Parallel coordinates

// parallel-coords: 24 mods across five axes (stars, lines of code, age in days, hooks, views in 30 days),
// in candle's look. Each axis runs from its own minimum to its own maximum, which are the only ticks, so
// a line's shape compares mods without a shared unit. The 23 quiet mods are 1px lines at 18% ink, the
// axes are 14% ink tracks (no axis lines in candle, so they stay below the data), and one mod, cost-meter,
// is the only Claude orange, with its value printed at every axis. The sample is seeded (20261021): stars grow
// with age and quality, views follow stars, and hooks follow lines of code, so the bundles cross the way
// real repos do; cost-meter is young (46 days) but already well starred (640). Sample data only.
const W = 380
const H = 240
const STAGE = '#FAF9F5'
const INK = '#141413'
const MUTED = '#73726C'
const CLAUDE = '#D77757'
const FONT = "'Inter Tight','Segoe UI',system-ui,sans-serif"
const TOP = 38 // the maximum of every axis
const BOTTOM = 196 // the minimum of every axis
const X0 = 24 // the first axis; the last sits at W - 50 so its values fit after it
const X1 = 330
const HIGHLIGHT = { name: 'cost-meter', stars: 640, lines: 2380, age: 46, hooks: 5, views: 21300 }
const short = n => (n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(Math.round(n)))
const AXES = [
  { key: 'stars', name: 'STARS', fmt: short },
  { key: 'lines', name: 'LINES', fmt: short },
  { key: 'age', name: 'AGE, DAYS', fmt: short },
  { key: 'hooks', name: 'HOOKS', fmt: short },
  { key: 'views', name: 'VIEWS, 30D', fmt: short },
]
const f = n => n.toFixed(1)

function rng(seed) {
  return () => (seed = (Math.imul(seed, 1103515245) + 12345) & 0x7fffffff) / 0x7fffffff
}

const text = (x, y, s, { size = 9, fill = MUTED, anchor = 'start', font = FONT } = {}) =>
  `<text x="${f(x)}" y="${f(y)}"${anchor === 'start' ? '' : ` text-anchor="${anchor}"`} font-size="${size}" font-family="${font}" fill="${fill}">${s}</text>`

// 23 seeded mods plus the highlighted one: older and better mods collect more stars, views follow
// stars, and bigger mods register more hooks
function sample() {
  const rnd = rng(20261021)
  const mods = []
  for (let i = 0; i < 23; i++) {
    const quality = rnd()
    const age = Math.round(4 + rnd() * 406)
    const stars = Math.round(3 + quality ** 1.4 * 1150 * (0.35 + (0.65 * age) / 410))
    const lines = Math.round(180 + rnd() ** 1.6 * 9400)
    const hooks = Math.min(12, Math.max(1, Math.round(1 + lines / 1000 + (rnd() - 0.5) * 3)))
    const views = Math.round(400 + stars * (14 + rnd() * 22))
    mods.push({ stars, lines, age, hooks, views })
  }
  return mods
}

function draw() {
  const mods = sample()
  const all = [...mods, HIGHLIGHT]
  const ax = i => X0 + ((X1 - X0) * i) / (AXES.length - 1)
  const range = AXES.map(a => [Math.min(...all.map(m => m[a.key])), Math.max(...all.map(m => m[a.key]))])
  const ay = (i, v) => BOTTOM - ((v - range[i][0]) / (range[i][1] - range[i][0])) * (BOTTOM - TOP)
  const pathOf = m => AXES.map((a, i) => `${i ? 'L' : 'M'}${f(ax(i))} ${f(ay(i, m[a.key]))}`).join('')
  const parts = [`<rect width="${W}" height="${H}" rx="4" fill="${STAGE}"/>`]

  // Axes: a faint track, a 4px stub at each end, the name on top, the maximum above and the minimum below
  AXES.forEach((a, i) => {
    const x = ax(i)
    parts.push(`<line x1="${f(x)}" x2="${f(x)}" y1="${TOP}" y2="${BOTTOM}" stroke="${INK}" stroke-opacity="0.14" stroke-width="1"/>`)
    for (const yy of [TOP, BOTTOM]) parts.push(`<line x1="${f(x - 2)}" x2="${f(x + 2)}" y1="${yy}" y2="${yy}" stroke="${MUTED}" stroke-width="1"/>`)
    parts.push(text(x, 16, a.name, { anchor: 'middle' }))
    parts.push(text(x, TOP - 8, a.fmt(range[i][1]), { anchor: 'middle' }))
    parts.push(text(x, BOTTOM + 14, a.fmt(range[i][0]), { anchor: 'middle' }))
  })

  for (const m of mods) parts.push(`<path d="${pathOf(m)}" fill="none" stroke="${INK}" stroke-opacity="0.18" stroke-width="1"/>`)
  parts.push(`<path d="${pathOf(HIGHLIGHT)}" fill="none" stroke="${CLAUDE}" stroke-width="1"/>`)

  // The Claude orange mod's value at every axis, on a stage patch so the quiet lines do not run through it.
  // Centred on the dot, the patch also cut the Claude orange line where it leaves for the next axis, so the
  // value steps above a falling segment and below a rising one; the last axis has none and stays centred.
  AXES.forEach((a, i) => {
    const x = ax(i)
    const y = ay(i, HIGHLIGHT[a.key])
    const s = a.fmt(HIGHLIGHT[a.key])
    const next = i < AXES.length - 1 ? ay(i + 1, HIGHLIGHT[AXES[i + 1].key]) : y
    const base = next > y ? y - 4 : next < y ? y + 11 : y + 3
    parts.push(`<circle cx="${f(x)}" cy="${f(y)}" r="2" fill="${CLAUDE}"/>`)
    parts.push(`<rect x="${f(x + 4)}" y="${f(base - 9)}" width="${f(s.length * 5.2 + 4)}" height="11" fill="${STAGE}"/>`)
    parts.push(text(x + 6, base, s, { fill: CLAUDE }))
  })

  // The key sits on the caption line: the Claude orange line names its mod
  // (left-aligned after a fixed key: a right-aligned name would need its width guessed to place the key)
  const kx = W - 12 - 78 // room for a 10-character name at 10px plus slack
  parts.push(`<line x1="${kx}" x2="${kx + 10}" y1="${H - 11.5}" y2="${H - 11.5}" stroke="${CLAUDE}" stroke-width="1"/>`)
  parts.push(text(kx + 16, H - 8, HIGHLIGHT.name, { size: 10, fill: CLAUDE }))
  parts.push(text(12, H - 8, `SAMPLE ${all.length} MODS`))
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}">${parts.join('')}</svg>`
}

let source // drawn on first use and kept: the pane loads every design, so none pays at load time
export default {
  id: 'parallel-coords',
  title: 'Parallel coordinates',
  category: 'compare',
  description: 'Mods compared across stars, lines, age, hooks and views; each axis runs min to max, one mod in Claude orange with its values.',
  element: ui => ui.Svg({ source: (source ??= draw()), alt: 'Parallel coordinates of 24 mods across stars, lines, age, hooks and views, one mod highlighted in Claude orange, sample data', width: W, height: H }),
}