2f:T1e0f,// Paste this entire block into a single Observable cell { const W = 760, H = 420; const margin = { top: 32, right: 48, bottom: 44, left: 56 }; const w = W - margin.left - margin.right; const h = H - margin.top - margin.bottom; // --- Sample data --- const N = 60; const series = [ { id: "A", label: "Metric A", range: [1, 10], color: "#58a6ff", desc: "1–10" }, { id: "B", label: "Metric B", range: [1, 100], color: "#f78166", desc: "1–100" }, { id: "C", label: "Metric C", range: [1, 1000], color: "#7ee787", desc: "1–1000" } ]; for (const s of series) { let v = s.range[0] + (s.range[1] - s.range[0]) * 0.3; s.data = Array.from({ length: N }, (_, i) => { v += (Math.random() - 0.48) * (s.range[1] - s.range[0]) * 0.08; v = Math.max(s.range[0], Math.min(s.range[1], v)); return { x: i, y: v }; }); } // --- State --- let focused = null; // --- Scales --- const xScale = d3.scaleLinear().domain([0, N - 1]).range([0, w]); const yPixel = d3.scaleLinear().domain([0, 1]).range([h, 0]); function lineGen(s, yDomain) { return d3.line() .x(d => xScale(d.x)) .y(d => yPixel((d.y - yDomain[0]) / (yDomain[1] - yDomain[0]))) .curve(d3.curveCatmullRom.alpha(0.5)); } // --- Container --- const container = d3.create("div") .style("font-family", "-apple-system, BlinkMacSystemFont, sans-serif") .style("position", "relative"); const badge = container.append("div") .style("font-size", "12px") .style("color", "#8b949e") .style("margin-bottom", "8px"); const hint = container.append("div") .style("font-size", "11px") .style("color", "#6e7681") .style("margin-bottom", "12px") .html("Double-click a line to zoom into its y-scale · double-click background to reset"); const svg = container.append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H) .style("overflow", "visible"); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // Background rect for reset g.append("rect").attr("width", w).attr("height", h) .attr("fill", "transparent") .on("dblclick", () => { focused = null; render(true); }); const gridG = g.append("g").attr("class", "grid"); const xAxisG = g.append("g").attr("transform", `translate(0,${h})`); const yAxisG = g.append("g"); const yLabel = g.append("text") .attr("transform", "rotate(-90)") .attr("x", -h / 2).attr("y", -42) .attr("text-anchor", "middle") .attr("fill", "#8b949e") .attr("font-size", 11); // Lines const paths = g.selectAll(".line-path") .data(series).join("path") .attr("fill", "none") .attr("stroke", d => d.color) .attr("stroke-width", 2.5) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .style("cursor", "pointer"); // Wider invisible hit targets const hits = g.selectAll(".hit") .data(series).join("path") .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 18) .style("cursor", "pointer") .on("dblclick", (event, d) => { event.stopPropagation(); focused = focused === d.id ? null : d.id; render(true); }); // Legend const legend = svg.append("g").attr("transform", `translate(${margin.left + 4},${margin.top - 10})`); series.forEach((s, i) => { const lg = legend.append("g") .attr("transform", `translate(${i * 150},0)`) .style("cursor", "pointer") .on("dblclick", () => { focused = focused === s.id ? null : s.id; render(true); }); lg.append("circle").attr("r", 4).attr("cx", 4).attr("cy", -3).attr("fill", s.color); lg.append("text").attr("x", 14).attr("y", 0) .attr("font-size", 11).attr("fill", "#c9d1d9") .text(`${s.label} (${s.desc})`); }); // Tooltip const tip = container.append("div") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #d0d7de") .style("border-radius", "6px") .style("padding", "6px 10px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0) .style("box-shadow", "0 2px 8px rgba(0,0,0,0.1)") .style("white-space", "nowrap"); const tipDot = g.append("circle").attr("r", 4.5) .attr("fill", "#fff").attr("stroke-width", 2.5) .style("display", "none"); svg.on("mousemove", function (event) { const [mx, my] = d3.pointer(event, g.node()); if (mx < 0 || mx > w || my < 0 || my > h) { hideTip(); return; } const xi = Math.round(xScale.invert(mx)); if (xi < 0 || xi >= N) { hideTip(); return; } const yDomain = focused ? series.find(s => s.id === focused).range : [0, 1000]; let best = null, bestD = Infinity; for (const s of series) { if (focused && focused !== s.id) continue; const py = yPixel((s.data[xi].y - yDomain[0]) / (yDomain[1] - yDomain[0])); const dist = Math.abs(py - my); if (dist < bestD) { bestD = dist; best = s; } } if (best && bestD < 60) { const py = yPixel((best.data[xi].y - yDomain[0]) / (yDomain[1] - yDomain[0])); tipDot.style("display", null) .attr("cx", xScale(xi)).attr("cy", py) .attr("stroke", best.color); tip.style("opacity", 1) .style("left", `${xScale(xi) + margin.left + 14}px`) .style("top", `${py + margin.top + 30}px`) .html(`${best.label} Day ${xi}
${best.data[xi].y.toFixed(1)}`); } else hideTip(); }).on("mouseleave", hideTip); function hideTip() { tip.style("opacity", 0); tipDot.style("display", "none"); } // --- Render --- function render(animate) { const t = animate ? d3.transition().duration(600).ease(d3.easeCubicInOut) : null; const yDomain = focused ? series.find(s => s.id === focused).range : [0, 1000]; const realY = d3.scaleLinear().domain(yDomain).range([h, 0]); // Axes const xa = d3.axisBottom(xScale).ticks(10).tickFormat(d => `${d}`).tickSize(-4); const ya = d3.axisLeft(realY).ticks(8).tickSize(-4); const gr = d3.axisLeft(realY).ticks(6).tickSize(-w).tickFormat(""); if (t) { xAxisG.transition(t).call(xa); yAxisG.transition(t).call(ya); gridG.transition(t).call(gr); } else { xAxisG.call(xa); yAxisG.call(ya); gridG.call(gr); } gridG.selectAll("line").attr("stroke", "#eaeef2").attr("stroke-dasharray", "2,3"); gridG.select(".domain").remove(); xAxisG.selectAll("text").attr("fill", "#656d76"); yAxisG.selectAll("text").attr("fill", "#656d76"); xAxisG.selectAll("line,.domain").attr("stroke", "#d0d7de"); yAxisG.selectAll("line,.domain").attr("stroke", "#d0d7de"); yLabel.text(focused ? `${series.find(s => s.id === focused).label} (${yDomain[0]}–${yDomain[1]})` : "All scales (0–1000)"); // Lines paths.each(function (s) { const p = d3.select(this); const d = lineGen(s, yDomain)(s.data); (t ? p.transition(t) : p).attr("d", d); p.attr("stroke-width", focused === s.id ? 3.5 : 2.5) .attr("opacity", focused && focused !== s.id ? 0.12 : 1); }); hits.each(function (s) { const p = d3.select(this); const d = lineGen(s, yDomain)(s.data); (t ? p.transition(t) : p).attr("d", d); }); // Badge if (focused) { const s = series.find(d => d.id === focused); badge.html(`Zoomed: ${s.label} (${s.desc})`); } else { badge.text("Showing all series on unified scale"); } } render(false); return container.node(); }30:[] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}