2a:null 2b:["$","title",null,{"children":"Give Data a Character | Void | Observable"}] 30:T1c7e,// TIME WARP: race the clock against how each moment felt. // Assumes `moments` = [{moment, actual, felt, pleasantness, anticipation}, ...] // Observable Framework: paste into a js code block. (Notebook: replace display(root) with `return root`.) { const W = 860, rowH = 52; const m = {top: 78, right: 175, bottom: 24, left: 215}; const H = m.top + moments.length * rowH + m.bottom; const T_MAX = 100; // shared axis + scrubber max (minutes) const HOLD = 6; // minutes of pause at the end before looping const x = d3.scaleLinear([0, 100], [m.left, W - m.right]); const color = d3.scaleSequential(d3.interpolateRdYlGn).domain([1, 10]); const data = moments.map((d, i) => ({...d, i, ratio: d.felt / d.actual})); const defaultInfo = "Hover a moment to see the numbers. Drag the scrubber to step through time."; // ---------- controls ---------- const playBtn = html``; const restartBtn = html``; const scrub = html``; const speed = html``; const sortSel = html``; const info = html`

${defaultInfo}

`; const controlBar = html`

${playBtn}${restartBtn}${scrub}speed${speed}sort${sortSel}

`; // ---------- svg ---------- const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("font-family", "sans-serif") .style("width", "100%").style("height", "auto"); svg.append("g") .attr("transform", `translate(0,${m.top - 12})`) .call(d3.axisTop(x).ticks(10)) .call(g => g.select(".domain").attr("stroke", "#ccc")) .call(g => g.selectAll("text").attr("fill", "#666")); svg.append("text").attr("x", m.left - 14).attr("y", m.top - 16) .attr("text-anchor", "end").attr("font-size", 11).attr("fill", "#666").text("minutes"); const clockText = svg.append("text").attr("x", m.left).attr("y", 16) .attr("font-size", 14).attr("font-weight", "bold").attr("fill", "#444"); const rows = svg.selectAll("g.row").data(data).join("g").attr("class", "row").style("cursor", "pointer"); const cyMid = rowH / 2; rows.append("rect").attr("width", W).attr("height", rowH).attr("fill", "transparent"); rows.append("text").attr("x", m.left - 14).attr("y", cyMid).attr("text-anchor", "end") .attr("dominant-baseline", "middle").attr("font-size", 12.5).attr("fill", "#222").text(d => d.moment); rows.append("line").attr("x1", x(0)).attr("x2", x(100)).attr("y1", cyMid).attr("y2", cyMid).attr("stroke", "#ececec"); // destinations (ghosts): where the clock ends vs where it felt like it ended rows.append("line").attr("x1", d => x(d.actual)).attr("x2", d => x(d.actual)) .attr("y1", cyMid - 10).attr("y2", cyMid + 10).attr("stroke", "#9aa0a6").attr("stroke-width", 1.5); rows.append("circle").attr("cx", d => x(d.felt)).attr("cy", cyMid).attr("r", 6) .attr("fill", "none").attr("stroke", d => color(d.pleasantness)).attr("stroke-dasharray", "2 2"); // live elements const clockBar = rows.append("rect").attr("x", x(0)).attr("y", cyMid - 3).attr("height", 6).attr("rx", 3).attr("fill", "#9aa0a6"); const gap = rows.append("line").attr("y1", cyMid).attr("y2", cyMid) .attr("stroke", d => color(d.pleasantness)).attr("stroke-width", 2).attr("opacity", 0.6); const dot = rows.append("circle").attr("r", 7).attr("fill", d => color(d.pleasantness)) .attr("stroke", "#fff").attr("stroke-width", 1.5); const readout = rows.append("text").attr("x", W - m.right + 18).attr("y", cyMid) .attr("dominant-baseline", "middle").attr("font-size", 11.5).attr("fill", "#333"); const playhead = svg.append("line").attr("y1", m.top - 8).attr("y2", H - m.bottom) .attr("stroke", "#444").attr("stroke-width", 1).attr("stroke-dasharray", "3 3").attr("opacity", 0.5); // ---------- layout / sorting ---------- function layout(animate) { const ord = sortSel.value === "warp" ? d3.sort(data, d => -Math.abs(Math.log(d.ratio))) : data; const pos = new Map(ord.map((d, k) => [d.i, m.top + k * rowH])); (animate ? rows.transition().duration(700) : rows) .attr("transform", d => `translate(0,${pos.get(d.i)})`); } layout(false); // ---------- hover ---------- rows.on("mouseenter", (e, d) => { rows.style("opacity", r => (r === d ? 1 : 0.3)); info.textContent = `${d.moment}: ${d.actual} min on the clock, felt like ${d.felt}. ` + `Pleasantness ${d.pleasantness}/10 · anticipation ${d.anticipation}/10.`; }).on("mouseleave", () => { rows.style("opacity", 1); info.textContent = defaultInfo; }); // ---------- animation ---------- let t = 0, playing = true, last = performance.now(); const setPlaying = p => { playing = p; playBtn.textContent = p ? "⏸ Pause" : "▶ Play"; last = performance.now(); }; playBtn.onclick = () => setPlaying(!playing); restartBtn.onclick = () => { t = 0; setPlaying(true); }; scrub.oninput = () => { t = +scrub.value; setPlaying(false); }; sortSel.onchange = () => layout(true); const prog = (d, tt) => Math.min(tt / d.actual, 1); function draw(ms) { const tt = Math.min(t, T_MAX); scrub.value = tt; playhead.attr("x1", x(tt)).attr("x2", x(tt)); clockText.text(`${Math.round(tt)} min on the clock`); const clockX = d => x(Math.min(tt, d.actual)); const feltX = d => x(d.felt * prog(d, tt)); clockBar.attr("width", d => clockX(d) - x(0)); gap.attr("x1", clockX).attr("x2", feltX); // anticipation = fidget: higher anticipation jitters harder and faster dot.attr("cx", d => feltX(d) + Math.cos(ms / (170 - d.anticipation * 13)) * d.anticipation * 0.3) .attr("cy", d => cyMid + Math.sin(ms / (230 - d.anticipation * 19)) * d.anticipation * 0.55); readout.text(d => { const p = prog(d, tt); if (p < 1) return `${Math.round(d.actual * p)} min → feels like ${Math.round(d.felt * p)}`; return d.ratio > 1 ? `felt ${d.ratio.toFixed(1)}× longer` : `felt ${(1 / d.ratio).toFixed(1)}× shorter`; }).attr("font-weight", d => (prog(d, tt) >= 1 ? "bold" : "normal")); } const timer = d3.timer(ms => { const now = performance.now(), dt = (now - last) / 1000; last = now; if (playing) { t += dt * +speed.value; if (t > T_MAX + HOLD) t = 0; } draw(ms); }); invalidation.then(() => timer.stop()); const root = html`

Race the clock against how it felt

Gray bar = the clock · Colored dot = where time felt like it was (dashed ring = where it will end up) · Color = pleasantness (red → green) · Jitter = anticipation

${controlBar}${info}${svg.node()}

`; display(root); }31:T503,// 2 · PULSE: anticipation sets the heartbeat speed, pleasantness sets the color. const pulseColor = d3.scaleSequential(d3.interpolateRdYlGn).domain([1, 10]); const pulseRows = moments.map((d, i) => { const period = (2.4 - d.anticipation * 0.2).toFixed(2); // high anticipation = fast pulse return html`

${d.moment}

`; }); display(html`

Which moments have a racing pulse?

Bar length = actual minutes · Color = pleasantness (red → green) · Pulse speed = anticipation

${pulseRows}

`);32:T735,// CLOCKS: each clock's hand spins at the speed time "flew" (actual ÷ felt). Face color = pleasantness. const clockColor = d3.scaleSequential(d3.interpolateRdYlGn).domain([1, 10]); const clockCards = moments.map(d => { const ratio = d.felt / d.actual; const period = (4 * Math.pow(ratio, 0.8)).toFixed(2); // compressed so extremes stay watchable const note = ratio >= 1 ? `dragged: felt ${ratio.toFixed(1)}× longer` : `flew: felt ${(1 / ratio).toFixed(1)}× shorter`; return html`

${d.moment}

${note}

`; }); display(html`

Clocks that run at the speed time felt

Fast hand = time flew. Slow hand = time dragged. Ring color = pleasantness (red → green). Spin speeds are compressed so the extremes stay watchable, but the order is preserved.

${clockCards}

`);33:T15ac,// ALT 2 · SLOPE RIBBONS // Left axis = clock minutes, right axis = felt minutes, same log scale on both sides. // A FLAT ribbon means it felt exactly as long as it was. Rising = stretched, falling = squashed. // Ribbons draw themselves in one by one. Thickness = anticipation, color = pleasantness. // Assumes `moments` = [{moment, actual, felt, pleasantness, anticipation}, ...] { const W = 860, H = 520; const m = {top: 84, right: 190, bottom: 30, left: 290}; const xL = m.left, xR = W - m.right; const y = d3.scaleLog([1, 100], [H - m.bottom, m.top]); const color = d3.scaleSequential(d3.interpolateRdYlGn).domain([1, 10]); const data = moments.map(d => ({...d, ratio: d.felt / d.actual})); const defaultInfo = "Hover a ribbon for details."; // nudge labels apart so nothing overlaps (ribbons still end at the true values) function relax(key, field, gap = 15) { const s = d3.sort(data, d => y(d[field])); s.forEach((d, i) => { d[key] = i ? Math.max(y(d[field]), s[i - 1][key] + gap) : y(d[field]); }); s[s.length - 1][key] = Math.min(s[s.length - 1][key], H - m.bottom + 8); for (let i = s.length - 2; i >= 0; i--) s[i][key] = Math.min(s[i][key], s[i + 1][key] - gap); } relax("lyL", "actual"); relax("lyR", "felt"); const ribbon = d => { const xm = (xL + xR) / 2; return `M${xL},${y(d.actual)}C${xm},${y(d.actual)} ${xm},${y(d.felt)} ${xR},${y(d.felt)}`; }; // ---------- svg ---------- const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]) .attr("font-family", "sans-serif").style("width", "100%").style("height", "auto"); svg.append("text").attr("x", xL).attr("y", 28).attr("text-anchor", "middle") .attr("font-size", 12).attr("font-weight", "bold").attr("fill", "#555").text("ON THE CLOCK"); svg.append("text").attr("x", xR).attr("y", 28).attr("text-anchor", "middle") .attr("font-size", 12).attr("font-weight", "bold").attr("fill", "#555").text("HOW IT FELT"); svg.append("text").attr("x", (xL + xR) / 2).attr("y", 52).attr("text-anchor", "middle") .attr("font-size", 11).attr("fill", "#888").text("flat = felt exactly as long · rising = dragged on · falling = flew by"); [xL, xR].forEach(px => svg.append("line").attr("x1", px).attr("x2", px) .attr("y1", m.top - 10).attr("y2", H - m.bottom + 6).attr("stroke", "#ddd")); const groups = svg.selectAll("g.m").data(data).join("g").attr("class", "m"); const paths = groups.append("path").attr("d", ribbon).attr("fill", "none") .attr("stroke", d => color(d.pleasantness)).attr("stroke-width", d => 2 + d.anticipation * 0.6) .attr("stroke-linecap", "round").attr("opacity", 0.85); const hit = groups.append("path").attr("d", ribbon).attr("fill", "none") .attr("stroke", "transparent").attr("stroke-width", 16).style("cursor", "pointer"); // left side: dot + label groups.append("circle").attr("cx", xL).attr("cy", d => y(d.actual)).attr("r", 4.5).attr("fill", d => color(d.pleasantness)); groups.append("line").attr("x1", xL).attr("x2", xL - 8).attr("y1", d => y(d.actual)).attr("y2", d => d.lyL).attr("stroke", "#ccc"); groups.append("text").attr("x", xL - 12).attr("y", d => d.lyL).attr("text-anchor", "end") .attr("dominant-baseline", "middle").attr("font-size", 12).attr("fill", "#222") .text(d => `${d.moment} · ${d.actual}`); // right side (fades in when the ribbon arrives) const right = groups.append("g").attr("opacity", 0); right.append("circle").attr("cx", xR).attr("cy", d => y(d.felt)).attr("r", 4.5).attr("fill", d => color(d.pleasantness)); right.append("line").attr("x1", xR).attr("x2", xR + 8).attr("y1", d => y(d.felt)).attr("y2", d => d.lyR).attr("stroke", "#ccc"); right.append("text").attr("x", xR + 12).attr("y", d => d.lyR).attr("dominant-baseline", "middle") .attr("font-size", 12).attr("fill", "#222") .text(d => `${d.felt} (${d.ratio > 1 ? `${d.ratio.toFixed(1)}× longer` : `${(1 / d.ratio).toFixed(1)}× shorter`})`); // ---------- animation ---------- function play() { paths.interrupt(); right.interrupt(); paths.each(function () { this.__len = this.getTotalLength(); }) .attr("stroke-dasharray", function () { return this.__len; }) .attr("stroke-dashoffset", function () { return this.__len; }); right.attr("opacity", 0); paths.transition().delay((d, i) => i * 220).duration(1700).ease(d3.easeCubicInOut) .attr("stroke-dashoffset", 0); right.transition().delay((d, i) => i * 220 + 1500).duration(400).attr("opacity", 1); } // ---------- hover ---------- const info = html`

${defaultInfo}

`; groups.on("mouseenter", (e, d) => { groups.style("opacity", g => (g === d ? 1 : 0.15)); info.textContent = `${d.moment}: ${d.actual} min on the clock → felt like ${d.felt}. ` + `Pleasantness ${d.pleasantness}/10 · anticipation ${d.anticipation}/10.`; }).on("mouseleave", () => { groups.style("opacity", 1); info.textContent = defaultInfo; }); const replay = html``; replay.onclick = play; invalidation.then(() => { paths.interrupt(); right.interrupt(); }); display(html`

Which moments bent time the most?

Color = pleasantness (red → green) · Thickness = anticipation · Both axes are logarithmic minutes

${replay}${info}${svg.node()}

`); play(); } 34:[] 2e:{"id":"e7a490bd7f110962","slug":"give-data-a-character","title":"Give Data a Character","thumbnail":"594b0080aa7a9c37ae74b324cc1ba72cec0ffbada9370bf27e7ae464a43b6439","access_level":"public","create_time":"$D2026-09-30T19:18:35.718Z","update_time":"$D2026-09-30T19:55:24.394Z","view_time":null,"first_public_time":"$D2026-09-30T20:06:09.003Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5162e47daf8a6195","login":"eternalvoid","name":"Void","avatar_url":null,"tier":"free_2026"},"version":363,"publish_version":363,"role":null,"authored":false,"authors":[{"type":"individual","id":"97236f89891f571f","login":"eternalvoid","name":"Void","avatar_url":null,"tier":null}],"members":[{"type":"team","id":"5162e47daf8a6195","login":"eternalvoid","name":"Void","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Give Data a Character","cells":[{"id":33,"value":"# Give Data a Character\n\nSome moments feel like they fly by. Others feel like they last forever.\n\nIn this activity, you'll explore a dataset about **how we experience time** and redesign a simple visualization using **interaction**.\n\nYour goal is to make an intentional design choice: *How should the data look, behave, or respond to help someone experience or understand it differently?*\n\nYou'll start with the data, explore a simple visualization, and then create one meaningful interaction of your own.\n\n---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## 01 · Explore the Data\n\nThis fictional dataset describes eight everyday moments and how each moment was experienced.\n\n- `actual` — actual duration in minutes\n- `felt` — how long the moment seemed to last, in minutes\n- `pleasantness` — 1 (unpleasant) to 10 (pleasant)\n- `anticipation` — 1 (low) to 10 (high)\n\n*Take a quick look at the data. What catches your attention?*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"const moments = [\n {moment: \"Waiting for your food\", actual: 12, felt: 25, pleasantness: 4, anticipation: 8},\n {moment: \"Talking with a close friend\", actual: 60, felt: 20, pleasantness: 9, anticipation: 2},\n {moment: \"Waiting for a text back\", actual: 30, felt: 90, pleasantness: 3, anticipation: 10},\n {moment: \"Sitting through a boring meeting\", actual: 45, felt: 100, pleasantness: 2, anticipation: 1},\n {moment: \"Watching the sunset\", actual: 15, felt: 8, pleasantness: 10, anticipation: 2},\n {moment: \"Five minutes before a deadline\", actual: 5, felt: 1, pleasantness: 2, anticipation: 10},\n {moment: \"Lying awake at 3 AM\", actual: 20, felt: 60, pleasantness: 2, anticipation: 3},\n {moment: \"Getting lost in a good book\", actual: 90, felt: 25, pleasantness: 9, anticipation: 1}\n];\n\ndisplay(Inputs.table(moments));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"--\n\n## Four visualizations/interactions\n\n1. **Race against the clock**\n2. **Alternative (I LOVE THIS ONE PLEASE SHOW IF POSSIBLE): Pulse**\n3. **Alternative: Clock**\n4. **Alternative: Ribbon**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"//what was changed was the bars/metrics would essentially look like a race, with how long it took and how it actually felt being noticeable (the jittering would represent the anticipation and such). I thought it would help someone notice how much longer certain moments felt along with the jittering helping to show the anticipation level.","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"//PULSE","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$31","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"//What was changed was how the bar charts live, for lack of a better word. It gives each metric and chart some life and an idea of how one can feel given a certain moment (ex: few minutes before a deadline makes one feel stressed and unpleasant, which is what the fast pulse and red color indicate.). I feel the interaction (technically not an interaction, actually, given it's an animation).","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$32","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 2f:"$2e:body"