45:["$","title",null,{"children":"Parallel coordinates ❤️ radar charts | Visnu Pitiyanuvath | Observable"}] 4d:T1763,const W = 680, H = 480, m = {top: 60, right: 50, bottom: 60, left: 50}; const lo = H - m.bottom, hi = m.top; const step = (W - m.left - m.right) / (dims.length - 1); const slot = (i) => m.left + i * step; const yScale = Object.fromEntries(allDims.map((k) => [k, d3.scaleLinear(extents[k], flips.has(k) ? [hi, lo] : [lo, hi])])); const norm = (d, k) => d[k] == null ? 0 : (lo - yScale[k](d[k])) / (lo - hi); // 0..1, follows flips let order = [...dims], hovered = null, dragging = false; const xPos = new Map(order.map((k, i) => [k, slot(i)])); const flipped = new Set(flips); const pc = chart(W, H, "Parallel coordinates of 406 cars, 1970–1982", "Drag labels to reorder · click to flip · hover to inspect"); const ptsFor = (d) => order.filter((k) => d[k] != null).map((k) => [xPos.get(k), yScale[k](d[k])]); const pathFor = (d) => d3.line()(ptsFor(d)); const paths = add(pc.svg, "g", {fill: "none", "stroke-opacity": 0.35, "pointer-events": "none"}) .selectAll("path").data(cars).join("path").attr("stroke", (d) => color(d.cylinders)).attr("d", pathFor); const axes = pc.svg.append("g").selectAll("g").data(allDims, (k) => k).join("g") .attr("transform", (k) => `translate(${xPos.get(k)},0)`).style("cursor", "grab"); add(axes, "line", {y1: hi, y2: lo, stroke: "#333", "stroke-width": 1.5}); const endLabel = (y) => add(axes, "text", {y, "text-anchor": "middle", fill: "#666"}); const topLab = endLabel(hi - 8), botLab = endLabel(lo + 14); const axLab = add(axes, "text", {"text-anchor": "middle", "font-weight": "bold"}); add(axLab, "tspan", {x: 0, y: lo + 32}).text(stripUnit); add(axLab, "tspan", {x: 0, y: lo + 45, "font-weight": "normal", fill: "#666"}).text(unitOf); add(axes, "rect", {x: -step / 2 + 4, width: step - 8, y: hi - 20, height: lo - hi + 70, fill: "transparent"}); const relabel = () => { const end = (k, i) => fmt(extents[k][flipped.has(k) ? 1 - i : i]); topLab.text((k) => end(k, 1)); botLab.text((k) => end(k, 0)); }; relabel(); // ---- hover: nearest line ---- const hoverG = add(pc.svg, "g", {"pointer-events": "none"}); function distToSeg([px, py], [ax, ay], [bx, by]) { const dx = bx - ax, dy = by - ay; const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1))); return Math.hypot(px - (ax + t * dx), py - (ay + t * dy)); } function nearest(p) { let best = null, bd = 25; for (const d of cars) { const pts = ptsFor(d); for (let i = 0; i < pts.length - 1; i++) { const dd = distToSeg(p, pts[i], pts[i + 1]); if (dd < bd) { bd = dd; best = d; } } } return best; } function drawHover() { hoverG.selectAll("*").remove(); if (!hovered) return; const base = {d: pathFor(hovered), fill: "none"}; add(hoverG, "path", {...base, stroke: "#000", "stroke-width": 3.5, "stroke-opacity": 0.9}); add(hoverG, "path", {...base, stroke: color(hovered.cylinders), "stroke-width": 2}); } function setHover(d) { if (d === hovered) return; hovered = d; paths.attr("stroke-opacity", d ? 0.12 : null); drawHover(); drawRadar(); } pc.svg.on("pointermove", (e) => { if (!dragging) setHover(nearest(d3.pointer(e, pc.svg.node()))); }) .on("pointerleave", () => setHover(null)); // ---- reorder / flip ---- function redraw() { paths.attr("d", pathFor); axes.attr("transform", (k) => `translate(${xPos.get(k)},0)`); drawHover(); } axes.on("click", (e, k) => { if (e.defaultPrevented) return; yScale[k].range(yScale[k].range().reverse()); flipped.has(k) ? flipped.delete(k) : flipped.add(k); relabel(); paths.transition().duration(300).attr("d", pathFor).on("end", drawHover); drawHover(); drawRadar(); }); axes.call(d3.drag() .on("start", function () { dragging = true; setHover(null); d3.select(this).style("cursor", "grabbing").raise(); }) .on("drag", (e, k) => { xPos.set(k, Math.max(slot(0), Math.min(slot(dims.length - 1), e.x))); order = d3.sort(allDims, (a) => xPos.get(a)); order.forEach((o, i) => o !== k && xPos.set(o, slot(i))); redraw(); }) .on("end", function (e, k) { dragging = false; xPos.set(k, slot(order.indexOf(k))); d3.select(this).style("cursor", "grab"); redraw(); drawRadar(); })); // ---- radar ---- const rw = 340, cx = rw / 2, cy = H / 2 + 15, R = 120; const radar = chart(rw, H, "Radar of hovered car"); const radarG = radar.svg.append("g"); const avgCar = Object.fromEntries(allDims.map((k) => [k, d3.mean(cars, (d) => d[k])])); const closed = d3.line().curve(d3.curveLinearClosed); function drawRadar() { const n = order.length; const pt = (i, t) => { const a = i / n * 2 * Math.PI - Math.PI / 2; return [cx + Math.cos(a) * R * t, cy + Math.sin(a) * R * t]; }; const poly = (d) => closed(order.map((k, i) => pt(i, norm(d, k)))); radar.sub.text(hovered ? `${hovered.name} (19${hovered.year}) · ${hovered.cylinders} cyl` : "Hover a line (dashed = fleet average)"); radarG.selectAll("*").remove(); for (const t of rings) add(radarG, "path", {d: closed(order.map((k, i) => pt(i, t))), fill: "none", stroke: "#ddd"}); order.forEach((k, i) => { const [x2, y2] = pt(i, 1), [lx, ly] = pt(i, 1.2); add(radarG, "line", {x1: cx, y1: cy, x2, y2, stroke: "#ddd"}); const t = add(radarG, "text", {x: lx, y: ly, dy: "0.32em", "text-anchor": Math.abs(lx - cx) < 8 ? "middle" : lx > cx ? "start" : "end"}); add(t, "tspan", {"font-weight": "bold"}).text(stripUnit(k) + (flipped.has(k) ? " ↓" : "")); if (hovered) add(t, "tspan", {x: lx, dy: "1.2em", fill: "#666"}).text(hovered[k] == null ? "n/a" : fmt(hovered[k])); }); add(radarG, "path", {d: poly(avgCar), fill: "none", stroke: "#888", "stroke-dasharray": "4 3"}); if (hovered) add(radarG, "path", {d: poly(hovered), fill: color(hovered.cylinders), "fill-opacity": 0.35, stroke: color(hovered.cylinders), "stroke-width": 2}); } drawRadar(); display(html`

${pc.svg.node()}${radar.svg.node()}

`);4e:Td4b,{ const W = 928, H = 520, left = 70, right = 70, top = 100, bottom = 430; const cx = W / 2, cy = 275, R = 175; const n = dims.length, mid = (n - 1) / 2; const stepX = (W - left - right) / (n - 1); const mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]; // only cars with every value present, so every line can close into a polygon const rows = cars.filter((d) => dims.every((k) => d[k] != null)); const vals = rows.map((d) => dims.map((k) => d3.scaleLinear(extents[k], flips.has(k) ? [1, 0] : [0, 1])(d[k]))); // Each axis is a rigid segment rotating about its base like a fan: t=0 parallel, t=1 radial. const delta = (i) => (i - mid) * (2 * Math.PI / n); // final rotation (+ = clockwise) const angle = (i, t) => -Math.PI / 2 + t * delta(i); const pos = (i, v, t) => { const [bx, by] = mix([left + i * stepX, bottom], [cx, cy], t); const len = (bottom - top) + t * (R - (bottom - top)); return [bx + Math.cos(angle(i, t)) * len * v, by + Math.sin(angle(i, t)) * len * v]; }; // the closing link (last axis → first) only grows once the outer axes have mostly swung down const closeAmount = (t) => d3.easeCubicInOut(Math.max(0, (t - 0.65) / 0.35)); const outline = (vi, t) => { // polyline through all axes + closing segment const pts = d3.range(n).map((i) => pos(i, vi(i), t)); return d3.line()([...pts, mix(pts[n - 1], pts[0], closeAmount(t))]); }; const {svg, title, sub} = chart(W, H, "", `${rows.length} cars with complete data · left axes rotate counter-clockwise, right axes clockwise`); title.attr("font-size", 18); svg.style("font", "12px system-ui, sans-serif"); const ringG = add(svg, "g", {fill: "none", stroke: "#ccc"}); const ringPaths = rings.map((r) => add(ringG, "path")); const axisLines = add(svg, "g").selectAll("line").data(dims).join("line").attr("stroke", "#333").attr("stroke-width", 1.5); const axisLabels = add(svg, "g").selectAll("text").data(dims).join("text") .attr("font-weight", "bold").attr("fill", "#333").text(stripUnit); const lines = add(svg, "g", {fill: "none", "stroke-opacity": 0.3}) .selectAll("path").data(rows).join("path").attr("stroke", (d) => color(d.cylinders)); function render(t) { title.text(t < 0.5 ? "Parallel coordinates → radar" : "Radar → parallel coordinates"); lines.attr("d", (d, j) => outline((i) => vals[j][i], t)); ringPaths.forEach((p, j) => p.attr("d", outline(() => rings[j], t)).attr("stroke-opacity", t)); axisLines .attr("x1", (k, i) => pos(i, 0, t)[0]).attr("y1", (k, i) => pos(i, 0, t)[1]) .attr("x2", (k, i) => pos(i, 1, t)[0]).attr("y2", (k, i) => pos(i, 1, t)[1]); axisLabels.each(function (k, i) { // label sits just beyond each axis tip const [x, y] = pos(i, 1, t), a = angle(i, t), c = Math.cos(a); d3.select(this).attr("x", x + c * 14).attr("y", y + Math.sin(a) * 14 + 4) .attr("text-anchor", Math.abs(c) < 0.25 ? "middle" : c > 0 ? "start" : "end"); }); } // hold, morph to radar, hold, morph back const T = 7000, ease = d3.easeCubicInOut; const tAt = (ms) => { const s = (ms % T) / T; return s < 0.1 ? 0 : s < 0.5 ? ease((s - 0.1) / 0.4) : s < 0.6 ? 1 : 1 - ease((s - 0.6) / 0.4); }; render(0); const timer = d3.timer((elapsed) => render(tAt(elapsed))); invalidation.then(() => timer.stop()); display(svg.node()); }4f:T553,const allDims = ["economy (mpg)", "cylinders", "displacement (cc)", "power (hp)", "weight (lb)", "0-60 mph (s)", "year"]; // axis order, and which axes run high→low (the "−" ones) const dims = ["0-60 mph (s)", "power (hp)", "displacement (cc)", "cylinders", "weight (lb)", "economy (mpg)", "year"]; const flips = new Set(["year", "0-60 mph (s)", "economy"]); const extents = Object.fromEntries(allDims.map((k) => [k, d3.extent(cars, (d) => d[k])])); const color = d3.scaleOrdinal(d3.sort(new Set(cars.map((d) => d.cylinders))), d3.schemeTableau10); const rings = [0.25, 0.5, 0.75, 1]; const fmt = d3.format(","); const stripUnit = (k) => k.replace(/ $.*$/, ""); const unitOf = (k) => (k.match(/$(.*)$/) || [])[1] ?? ""; // set many attributes at once on a new child element const add = (parent, tag, attrs = {}) => Object.entries(attrs).reduce((s, [k, v]) => s.attr(k, v), parent.append(tag)); // svg with a bold title and gray subtitle; returns {svg, title, sub} function chart(w, h, title, sub = "") { const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]) .style("width", "100%").style("height", "auto").style("font", "11px system-ui, sans-serif"); return { svg, title: add(svg, "text", {x: 10, y: 22, "font-size": 16, "font-weight": "bold"}).text(title), sub: add(svg, "text", {x: 10, y: 40, fill: "#666"}).text(sub) }; }50:[] 49:{"id":"1e2618315da218c8","slug":"parallel-coordinates-radar-charts","title":"Parallel coordinates ❤️ radar charts","thumbnail":"cf969e8dec58d2d7bf80b768ef16a7219ffc5221207b13ff97f5fd7d2d513d16","access_level":"public","create_time":"$D2026-11-11T17:08:57.618Z","update_time":"$D2026-11-11T18:05:35.341Z","view_time":null,"first_public_time":"$D2026-11-11T17:52:21.839Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026","bio":"","followed_by_you":false,"follows_you":false},"version":42,"publish_version":42,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Parallel coordinates ❤️ radar charts","cells":[{"id":1,"value":"# Parallel coordinates ❤️ radar charts\n\nVibed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 44:null