2a:null 2b:["$","title",null,{"children":"Untitled | Ananya Sarangi | Observable"}] 30:T1970,const moments = [ {moment: "Waiting for your food", actual: 12, felt: 25, pleasantness: 4, anticipation: 8}, {moment: "Talking with a close friend", actual: 60, felt: 20, pleasantness: 9, anticipation: 2}, {moment: "Waiting for a text back", actual: 30, felt: 90, pleasantness: 3, anticipation: 10}, {moment: "Sitting through a boring meeting", actual: 45, felt: 100, pleasantness: 2, anticipation: 1}, {moment: "Watching the sunset", actual: 15, felt: 8, pleasantness: 10, anticipation: 2}, {moment: "Five minutes before a deadline", actual: 5, felt: 1, pleasantness: 2, anticipation: 10}, {moment: "Lying awake at 3 AM", actual: 20, felt: 60, pleasantness: 2, anticipation: 3}, {moment: "Getting lost in a good book", actual: 90, felt: 25, pleasantness: 9, anticipation: 1} ];const baseSpeed = 80; // px per real second const C = { bar: "#fde2d6", barHover: "#fbc4ae", felt: "#e0457b", real: "#9b93c9", text: "#3a3340", muted: "#a39aa8", grid: "#f3eef0" }; function fmt(v) { return v >= 10 ? d3.format(".0f")(v) : d3.format(".2~f")(v); } const margin = {top: 64, right: 30, bottom: 44, left: 200}; const rowH = 44, barH = 20; const innerW = Math.max(160, width - margin.left - margin.right); const height = margin.top + moments.length * rowH + margin.bottom; const x = d3.scaleLinear().domain([0, d3.max(moments, d => d.actual)]).nice().range([0, innerW]); const rows = moments.map(d => ({...d, ratio: d.actual / d.felt, w: x(d.actual)})); const root = d3.create("div") .style("position", "relative") .style("font", "12px system-ui, sans-serif") .style("color", C.text); const svg = root.append("svg") .attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).style("max-width", "100%").style("display", "block"); // Playheads function realHead(sel, h) { const p = sel.append("g"); p.append("line").attr("y1", -3).attr("y2", h + 3) .attr("stroke", C.real).attr("stroke-width", 2).attr("stroke-linecap", "round"); return p; } function feltHead(sel, h) { const p = sel.append("g"); p.append("line").attr("y1", -5).attr("y2", h + 5) .attr("stroke", C.felt).attr("stroke-width", 2.5).attr("stroke-linecap", "round"); p.append("circle").attr("cy", -5).attr("r", 3.5).attr("fill", C.felt); return p; } // Legend const legend = svg.append("g").attr("transform", `translate(${margin.left},22)`); realHead(legend.append("g"), 14); legend.append("text").attr("x", 10).attr("y", 7).attr("dy", "0.35em").attr("fill", C.muted).text("real time"); feltHead(legend.append("g").attr("transform", "translate(90,0)"), 14); legend.append("text").attr("x", 102).attr("y", 7).attr("dy", "0.35em").attr("fill", C.muted).text("felt time"); legend.append("text").attr("x", 190).attr("y", 7).attr("dy", "0.35em").attr("fill", C.muted) .attr("font-style", "italic").text("hover a moment to race them"); // Grid + x axis const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const ticks = x.ticks(5); g.selectAll("line.grid").data(ticks).join("line") .attr("x1", x).attr("x2", x).attr("y1", -6).attr("y2", rows.length * rowH).attr("stroke", C.grid); g.selectAll("text.tick").data(ticks).join("text") .attr("x", x).attr("y", rows.length * rowH + 16).attr("text-anchor", "middle").attr("fill", C.muted).text(d => d); g.append("text").attr("x", innerW).attr("y", rows.length * rowH + 34) .attr("text-anchor", "end").attr("fill", C.muted).text("Minutes (actual)"); // Rows const row = g.selectAll("g.row").data(rows).join("g") .attr("transform", (d, i) => `translate(0,${i * rowH})`) .style("cursor", "pointer") .style("transition", "opacity 150ms"); row.append("rect").attr("x", -margin.left).attr("width", width).attr("height", rowH).attr("fill", "transparent"); row.append("text").attr("x", -12).attr("y", rowH / 2).attr("dy", "0.35em") .attr("text-anchor", "end").text(d => d.moment); const bars = row.append("rect") .attr("y", (rowH - barH) / 2).attr("width", d => d.w).attr("height", barH) .attr("rx", 6).attr("fill", C.bar).style("transition", "fill 150ms"); row.each(function(d) { d.heads = d3.select(this).append("g") .attr("transform", `translate(0,${(rowH - barH) / 2})`) .style("opacity", 0).style("transition", "opacity 150ms"); d.realHead = realHead(d.heads, barH); d.feltHead = feltHead(d.heads, barH); }); // Tooltip const tip = root.append("div") .style("position", "absolute").style("pointer-events", "none") .style("background", "#fffaf7").style("border", `1px solid ${C.barHover}`) .style("border-radius", "10px").style("padding", "8px 11px") .style("box-shadow", "0 3px 12px rgba(224,69,123,0.12)") .style("line-height", "1.5").style("white-space", "nowrap") .style("opacity", 0).style("transition", "opacity 120ms"); // Race state let active = null, lapStart = 0; function place(d, real, felt) { d.realHead.attr("transform", `translate(${real},0)`); d.feltHead.attr("transform", `translate(${felt},0)`); } row .on("mouseenter", (e, d) => { active = d; lapStart = d3.now(); place(d, 0, 0); d.heads.style("opacity", 1); row.style("opacity", r => (r === d ? 1 : 0.35)); bars.attr("fill", r => (r === d ? C.barHover : C.bar)); tip.html(`

${d.moment}

${d.actual} min on the clock

felt like ${d.felt} min

1 real second felt like ${fmt(d.felt / d.actual)} seconds

`).style("opacity", 1); }) .on("mousemove", e => { const [mx, my] = d3.pointer(e, root.node()); const tw = tip.node().offsetWidth; const left = mx + 16 + tw > width ? mx - 16 - tw : mx + 16; tip.style("left", `${left}px`).style("top", `${my - 12}px`); }) .on("mouseleave", (e, d) => { active = null; d.heads.style("opacity", 0); row.style("opacity", 1); bars.attr("fill", C.bar); tip.style("opacity", 0); }); // Each lap: both start at 0, finisher waits at the end, restart together after a short pause const pause = 0.8; const timer = d3.timer(() => { if (!active) return; const d = active; let t = (d3.now() - lapStart) / 1000; const lap = d.w / (baseSpeed * Math.min(1, d.ratio)) + pause; if (t > lap) { lapStart = d3.now(); t = 0; } const real = Math.min(baseSpeed * t, d.w); const felt = Math.min(baseSpeed * d.ratio * t, d.w); place(d, real, felt); }); invalidation.then(() => timer.stop()); display(root.node());31:T786,// Hover over a bar to highlight it and reveal how that moment felt. // No click interaction. const container = document.createElement("div"); display(container); function getEmoji(pleasantness) { if (pleasantness >= 8) return "😊"; if (pleasantness >= 5) return "😐"; if (pleasantness >= 3) return "😕"; return "😩"; } const chart = Plot.plot({ title: "How long did these moments actually last?", marginLeft: 190, marginTop: 50, x: { label: "Minutes", labelArrow: "none", domain: [0, 100], grid: true }, y: { label: null }, marks: [ Plot.barX(moments, { x: "actual", y: "moment", fill: "#a1c0db" }), Plot.ruleX([0]) ] }); // Wrapper const wrapper = document.createElement("div"); Object.assign(wrapper.style, { position: "relative" }); // Large emoji const emoji = document.createElement("div"); Object.assign(emoji.style, { position: "absolute", right: "12%", top: "52%", transform: "translateY(-50%)", fontSize: "100px", lineHeight: "1", pointerEvents: "none" }); // Add chart first wrapper.append(chart, emoji); container.replaceChildren(wrapper); // Get the actual bars created by Observable Plot const bars = chart.querySelectorAll("rect"); bars.forEach((bar, i) => { // Ignore anything that isn't one of our data bars if (i >= moments.length) return; bar.style.transition = "opacity 0.15s, filter 0.15s"; bar.addEventListener("pointerenter", () => { // Highlight hovered bar bar.style.filter = "brightness(0.6)"; // Show feeling emoji.textContent = getEmoji(moments[i].pleasantness); }); bar.addEventListener("pointerleave", () => { // Restore all bars bars.forEach((otherBar, j) => { if (j < moments.length) { otherBar.style.opacity = "1"; otherBar.style.filter = "none"; } }); emoji.textContent = ""; }); });32:T483,

### 💡 Try Your Own Feel free to write the code yourself or get some help from AI. Importantly, start with a **clear design intention**: What do you want the visualization to do, and why? Describe the behavior you want first, then figure out how to implement it. **Try this prompt:** > I want __________ to happen when someone __________. Help me modify the visualization to do this. **For example:** - "I want a bar to grow from actual time to felt time when someone clicks it." - "I want unpleasant moments to react differently from pleasant moments." - "I want the visualization to reveal anticipation when someone hovers." - "I want moments that felt longer to move more slowly." - "I want a selected moment to stand out while the others fade." - "I want clicking a moment to show the difference between actual and felt time." - "I want the visualization to filter moments by pleasantness." - "I want each moment to respond differently based on its data." *These are starting points. You can invent something completely different.*

33:[] 2e:{"id":"259647c7308541f5","slug":"untitled","title":"Untitled","thumbnail":"594b0080aa7a9c37ae74b324cc1ba72cec0ffbada9370bf27e7ae464a43b6439","access_level":"public","create_time":"$D2026-09-30T19:52:24.607Z","update_time":"$D2026-09-30T20:57:46.761Z","view_time":null,"first_public_time":"$D2026-09-30T20:05:29.499Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0eb2c34aa67d2ab8","login":"ananya-sarangi","name":"Ananya Sarangi","avatar_url":"https://avatars-next.observableusercontent.com/3f767e62f686b0da3d928f3d3b4317c5fd43996a561196bcb69a43afe043b741","tier":"free_2026"},"version":326,"publish_version":326,"role":null,"authored":false,"authors":[{"type":"individual","id":"0601e3472c6f48cc","login":"ananya-sarangi","name":"Ananya Sarangi","avatar_url":"https://avatars-next.observableusercontent.com/3f767e62f686b0da3d928f3d3b4317c5fd43996a561196bcb69a43afe043b741","tier":null}],"members":[{"type":"team","id":"0eb2c34aa67d2ab8","login":"ananya-sarangi","name":"Ananya Sarangi","avatar_url":"https://avatars-next.observableusercontent.com/3f767e62f686b0da3d928f3d3b4317c5fd43996a561196bcb69a43afe043b741","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":"Untitled","cells":[{"id":35,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"---\n\n## 03 · Your Challenge: Give the Data a Character\n\nChoose one or two attributes and use them to change how the visualization looks or responds. How should this data behave? What can interaction help someone notice or experience?\n\nOne thoughtful interaction is enough.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"---\n\n## 04 · Your Turn\n\n1. Fork this notebook to create your own copy.\n2. Decide what you want the interaction to help someone notice or experience.\n3. Modify the visualization using your own code or with the help of AI.\n4. Publish your notebook when you're finished.\n\n### Submit\n\nSubmit your **Observable notebook link** on ELMS and briefly explain:\n\n- What did you change?\n- What does your interaction help someone notice or experience?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"---\n\n### Three Example Interactions\n\nThis example uses three simple interactions:\n\n1. **Transform** — Click the chart to switch between *actual* and *felt* time.\n2. **Change** — The color changes to show which state you are viewing.\n3. **Reveal** — Hover over a bar to reveal more about the experience.\n\nEach interaction does something different with the data.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"

\n\n

\nEXAMPLE 01\n

\n\n

\nHover Over to Show Tooltips\n

\n\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Change what happens, what is revealed, and how the data responds.\nconst interactiveChart = Plot.plot({\n title: \"How long did these moments actually last?\",\n marginLeft: 190,\n\n x: {\n label: \"Minutes\",\n labelArrow: \"none\",\n grid: true\n },\n\n y: {\n label: null\n },\n\n marks: [\n Plot.barX(moments, {\n x: \"actual\",\n y: \"moment\",\n fill: \"#a1c0db\"\n }),\n\n // Highlight a moment when you interact with it\n Plot.barX(\n moments,\n Plot.pointerY({\n x: \"actual\",\n y: \"moment\",\n fill: \"steelblue\"\n })\n ),\n\n // Reveal more of the data\n Plot.tip(\n moments,\n Plot.pointerY({\n x: \"actual\",\n y: \"moment\",\n channels: {\n \"Felt duration\": \"felt\"\n }\n })\n )\n ]\n});\n\ndisplay(interactiveChart);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"

\n\n

\nEXAMPLE 02\n

\n\n

\nClick to Swap What’s Being Shown\n

\n\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Click a bar to switch between actual time and felt time.\n\nconst container = document.createElement(\"div\");\ndisplay(container);\n\nlet showingFelt = false;\n\nfunction drawChart() {\n const value = showingFelt ? \"felt\" : \"actual\";\n\n const chart = Plot.plot({\n title: showingFelt\n ? \"How long did these moments feel?\"\n : \"How long did these moments actually last?\",\n\n marginLeft: 190,\n\n x: {\n label: \"Minutes\",\n labelArrow: \"none\",\n domain: [0, 100],\n grid: true\n },\n\n y: {\n label: null\n },\n\n marks: [\n Plot.barX(moments, {\n x: value,\n y: \"moment\",\n fill: showingFelt ? \"#E07A5F\" : \"#a1c0db\"\n}),\n\n Plot.ruleX([0])\n ]\n });\n\n // Make the bars clickable\n chart.style.cursor = \"pointer\";\n\n chart.addEventListener(\"click\", () => {\n showingFelt = !showingFelt;\n drawChart();\n });\n\n container.replaceChildren(chart);\n}\n\ndrawChart();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"

\n\n

\nEXAMPLE 03\n

\n\n

\nHover Over to Show Emojis\n

\n\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$32","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"