2a:null 2b:["$","title",null,{"children":"Untitled | Colin Joseph Quigley | Observable"}] 30:T4b27,// ============================================================ // ELASTIC TIME: how long moments feel vs. how long they last //I wanted my visualization to be a matrix, as I felt it better represented the whole of the data. I have also added animations to convey the experiences of these moments better, whether they feel more chaotic or calming. I have added customized tool tips and the ability to expand that tooltip at the bottom. There is also a slider at the top that allows you to see how long of these moments feel vs what they are in reality. The dashed white circle reflecting reality. I hope the viewer is able to understand the emotion better as the moments of time may feel more subjective to them personally, that was the idea behind the animations. // ============================================================ //DATA const data = [ { 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 } ] // Visualization const width = 1000, height = 760; const margin = { top: 80, right: 90, bottom: 110, left: 110 }; // Palette: dusk sky. Unpleasant = cold violet-blue, pleasant = warm sunset gold const bg = "#1b1936"; const panelBg = "#262349"; const ink = "#f3eee4"; const muted = "#9c97b8"; const color = d3.scaleSequential( d3.interpolateRgbBasis(["#5f6fb3", "#9a6fc0", "#e0797a", "#ffb35c", "#ffe08a"]) ).domain([1, 10]); // ---- Scales (tightened to the data so moments spread out) ---- const x = d3.scaleLog().domain([0.17, 3.8]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([1, 10]).range([height - margin.bottom, margin.top]); const r = d3.scaleSqrt().domain([0, 100]).range([2, 50]); // area-true minutes const maxR = d => r(Math.max(d.actual, d.felt)); // ---- Nodes: true data position (tx, ty) + nudged display position (x, y) ---- const nodes = data.map((d, i) => { const ratio = d.felt / d.actual; const tx = x(ratio), ty = y(d.pleasantness); return { ...d, ratio, tx, ty, x: tx + (i % 2 ? 2 : -2), y: ty, seed: i * 1.7 }; }); const sim = d3.forceSimulation(nodes) .force("x", d3.forceX(d => d.tx).strength(0.3)) .force("y", d3.forceY(d => d.ty).strength(0.3)) .force("collide", d3.forceCollide(d => maxR(d) + 10).strength(1).iterations(3)) .stop(); for (let i = 0; i < 400; i++) sim.tick(); nodes.forEach(d => { const R = maxR(d); d.x = Math.max(margin.left + R, Math.min(width - margin.right - R, d.x)); d.y = Math.max(margin.top + R, Math.min(height - margin.bottom - R, d.y)); }); // ---- Label placement: try 8 spots around each shape, keep the one with no collisions ---- const charW = 6.6; const placed = []; const rectsOverlap = (a, b) => a.x0 < b.x1 && a.x1 > b.x0 && a.y0 < b.y1 && a.y1 > b.y0; const rectHitsCircle = (a, c) => { const nx = Math.max(a.x0, Math.min(c.x, a.x1)); const ny = Math.max(a.y0, Math.min(c.y, a.y1)); return (c.x - nx) ** 2 + (c.y - ny) ** 2 < c.r ** 2; }; [...nodes].sort((a, b) => maxR(b) - maxR(a)).forEach(d => { const R = maxR(d) + 6; const w = d.moment.length * charW; const k = R * 0.72; const cands = [ { dx: 0, dy: R + 12, anchor: "middle" }, { dx: 0, dy: -R - 4, anchor: "middle" }, { dx: R, dy: 4, anchor: "start" }, { dx: -R, dy: 4, anchor: "end" }, { dx: k, dy: k + 10, anchor: "start" }, { dx: -k, dy: k + 10, anchor: "end" }, { dx: k, dy: -k, anchor: "start" }, { dx: -k, dy: -k, anchor: "end" } ]; let best, bestCost = Infinity; cands.forEach((c, i) => { const bx = d.x + c.dx, by = d.y + c.dy; const x0 = c.anchor === "middle" ? bx - w / 2 : c.anchor === "start" ? bx : bx - w; const rect = { x0, x1: x0 + w, y0: by - 12, y1: by + 4 }; let cost = i * 0.1; if (rect.x0 < 6 || rect.x1 > width - 6 || rect.y0 < 6 || rect.y1 > height - margin.bottom + 8) cost += 100; for (const o of nodes) if (o !== d && rectHitsCircle(rect, { x: o.x, y: o.y, r: maxR(o) + 3 })) cost += 10; for (const p of placed) if (rectsOverlap(rect, p)) cost += 20; if (cost < bestCost) { bestCost = cost; best = { ...c, bx, by, rect }; } }); placed.push(best.rect); d.label = best; }); // ---- Container ---- const root = d3.create("div") .style("position", "relative") .style("background", bg) .style("color", ink) .style("font-family", "'Fraunces', Georgia, serif") .style("padding", "28px 28px 20px") .style("border-radius", "6px") .style("max-width", width + "px"); root.append("link").attr("rel", "stylesheet") .attr("href", "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,600&family=Karla:wght@400;600&display=swap"); root.append("h2") .style("margin", "0 0 4px").style("font-weight", 600).style("font-size", "30px").style("color", ink) .text("Elastic time"); root.append("p") .style("margin", "0 0 18px").style("font-family", "Karla, sans-serif").style("color", muted) .style("max-width", "62ch").style("line-height", 1.5) .text("Every moment starts at its real length on the clock. Drag the slider to let it stretch or shrink into how long it actually felt. Hover a moment to measure it, click to live through it."); // ---- Slider ---- const ctrl = root.append("div") .style("display", "flex").style("align-items", "center").style("gap", "14px") .style("font-family", "Karla, sans-serif").style("font-size", "14px"); ctrl.append("span").text("On the clock"); const slider = ctrl.append("input") .attr("type", "range").attr("min", 0).attr("max", 1).attr("step", 0.005).property("value", 0) .attr("aria-label", "Blend from clock time to felt time") .style("flex", "1").style("accent-color", "#ffb35c"); ctrl.append("span").text("How it felt"); // ---- SVG ---- const svg = root.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("display", "block") .style("font-family", "Karla, sans-serif"); const defs = svg.append("defs"); defs.append("filter").attr("id", "glow").attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%") .call(f => { f.append("feGaussianBlur").attr("stdDeviation", 6).attr("result", "b"); const m = f.append("feMerge"); m.append("feMergeNode").attr("in", "b"); m.append("feMergeNode").attr("in", "SourceGraphic"); }); // ---- Scale grid: x = how much time bent, y = pleasantness ---- const xTicks = [ { v: 0.25, t: "4× faster" }, { v: 0.5, t: "2× faster" }, { v: 1, t: "real time" }, { v: 2, t: "2× slower" }, { v: 3, t: "3× slower" } ]; const grid = svg.append("g"); grid.selectAll("line.x").data(xTicks).join("line") .attr("x1", d => x(d.v)).attr("x2", d => x(d.v)) .attr("y1", margin.top - 20).attr("y2", height - margin.bottom + 6) .attr("stroke", muted) .attr("stroke-opacity", d => (d.v === 1 ? 0.7 : 0.18)) .attr("stroke-dasharray", d => (d.v === 1 ? "2 6" : null)); grid.selectAll("text.x").data(xTicks).join("text") .attr("x", d => x(d.v)).attr("y", height - margin.bottom + 26) .attr("text-anchor", "middle").attr("font-size", 12) .attr("fill", d => (d.v === 1 ? ink : muted)) .text(d => d.t); grid.selectAll("line.y").data([2, 4, 6, 8, 10]).join("line") .attr("x1", margin.left - 8).attr("x2", width - margin.right) .attr("y1", d => y(d)).attr("y2", d => y(d)) .attr("stroke", muted).attr("stroke-opacity", 0.1); grid.selectAll("text.y").data([2, 4, 6, 8, 10]).join("text") .attr("x", margin.left - 14).attr("y", d => y(d) + 4) .attr("text-anchor", "end").attr("font-size", 12).attr("fill", muted) .text(d => d); grid.append("text") .attr("transform", `translate(${margin.left - 52},${(margin.top + height - margin.bottom) / 2}) rotate(-90)`) .attr("text-anchor", "middle").attr("font-size", 12).attr("fill", muted) .text("pleasantness (1 to 10)"); const bottomY = height - margin.bottom + 64; svg.append("text").attr("x", margin.left).attr("y", bottomY) .attr("fill", ink).attr("font-size", 16).attr("font-family", "Fraunces, serif") .text("← time flies"); svg.append("text").attr("x", width - margin.right).attr("y", bottomY).attr("text-anchor", "end") .attr("fill", ink).attr("font-size", 16).attr("font-family", "Fraunces, serif") .text("time drags →"); // ---- Moments ---- const node = svg.append("g").selectAll("g") .data(nodes).join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("tabindex", 0) .attr("role", "button") .attr("aria-label", d => `${d.moment}: ${d.actual} minutes felt like ${d.felt}`) .style("cursor", "pointer") .style("outline", "none"); const blobs = node.append("path") .attr("fill", d => color(d.pleasantness)) .attr("fill-opacity", 0.82) .attr("filter", "url(#glow)"); const rings = node.append("circle") .attr("r", d => r(d.actual)) .attr("fill", "none") .attr("stroke", ink) .attr("stroke-opacity", 0.55) .attr("stroke-dasharray", "3 4"); // Exact data point + tether to where the shape was nudged const anchors = svg.append("g").style("pointer-events", "none"); anchors.selectAll("line") .data(nodes.filter(d => Math.hypot(d.x - d.tx, d.y - d.ty) > 4)) .join("line") .attr("x1", d => d.tx).attr("y1", d => d.ty) .attr("x2", d => d.x).attr("y2", d => d.y) .attr("stroke", ink).attr("stroke-opacity", 0.35); anchors.selectAll("circle").data(nodes).join("circle") .attr("cx", d => d.tx).attr("cy", d => d.ty).attr("r", 2.5) .attr("fill", ink); // Labels in their collision-free spots svg.append("g").style("pointer-events", "none") .selectAll("text").data(nodes).join("text") .attr("x", d => d.label.bx).attr("y", d => d.label.by) .attr("text-anchor", d => d.label.anchor) .attr("font-size", 12.5) .attr("fill", ink) .attr("stroke", bg).attr("stroke-width", 4).attr("paint-order", "stroke") .text(d => d.moment); // ---- Animation: shapes morph with slider, edges tremble with anticipation ---- const radial = d3.lineRadial().curve(d3.curveCatmullRomClosed); const N = 40; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const currentR = (d, t) => r(d.actual + (d.felt - d.actual) * t); const timer = d3.timer(elapsed => { const t = +slider.property("value"); const e = reduceMotion ? 0 : elapsed; blobs.attr("d", d => { const R = currentR(d, t); const amp = 0.03 + (d.anticipation / 10) * 0.16; const speed = 0.0008 + d.anticipation * 0.0006; const pts = d3.range(N).map(i => { const a = (i / N) * Math.PI * 2; const w = 0.6 * Math.sin(a * 3 + e * speed * 3 + d.seed) + 0.4 * Math.sin(a * 7 - e * speed * 5 + d.seed * 2); return [a, R * (1 + amp * w)]; }); return radial(pts); }); }); invalidation.then(() => timer.stop()); // ---- Tooltip: an elastic tape measure ---- // Top ruler = real minutes. Bottom ruler = felt minutes. // Threads connect each real minute to where it landed in your head, // so you can see time literally stretch or squeeze. const tip = root.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transition", "opacity 120ms") .style("width", "264px") .style("background", panelBg) .style("border", `1px solid ${muted}55`) .style("border-radius", "4px") .style("padding", "12px 14px") .style("font-family", "Karla, sans-serif") .style("color", ink) .style("z-index", 5); function tapeMeasure(d) { const s = 2.1, ox = 12, c = color(d.pleasantness); const step = d.actual <= 15 ? 1 : 5; const realTicks = d3.range(0, d.actual + 0.001, step); const feltStep = d.felt <= 15 ? 1 : 5; const feltTicks = d3.range(0, d.felt + 0.001, feltStep); const threads = realTicks.map(m => ``).join(""); const top = realTicks.map(m => ``).join(""); const bottom = feltTicks.map(m => ``).join(""); return ` `; } function tipHTML(d) { const c = color(d.pleasantness); const diff = d.felt - d.actual; const perMin = d.ratio >= 1 ? `${d.ratio.toFixed(1)} minutes` : `${Math.round(d.ratio * 60)} seconds`; const drift = diff > 0 ? `${diff} extra minutes appeared out of nowhere.` : `${-diff} minutes vanished without you noticing.`; return `

${d.moment}

${tapeMeasure(d)}

${d.actual} min real ${d.felt} min felt

Every real minute felt like ${perMin}. ${drift}

`; } function placeTip(px, py) { const W = root.node().clientWidth; const tw = 296; let left = px + 18; if (left + tw > W) left = px - tw - 10; tip.style("left", Math.max(6, left) + "px").style("top", (py + 16) + "px"); } function showTip(d, px, py) { tip.html(tipHTML(d)).style("opacity", 1); placeTip(px, py); } const hideTip = () => tip.style("opacity", 0); node .on("pointerenter", (event, d) => { const [px, py] = d3.pointer(event, root.node()); showTip(d, px, py); }) .on("pointermove", event => { const [px, py] = d3.pointer(event, root.node()); placeTip(px, py); }) .on("pointerleave", hideTip) .on("focus", function (event, d) { const b = this.getBoundingClientRect(), rb = root.node().getBoundingClientRect(); showTip(d, b.right - rb.left, b.top - rb.top); }) .on("blur", hideTip); // ---- "Live it" panel ---- const panel = root.append("div") .style("display", "flex").style("gap", "28px").style("align-items", "center") .style("min-height", "240px").style("margin-top", "8px") .style("border-top", `1px solid ${muted}55`).style("padding-top", "18px"); panel.append("p") .style("font-family", "Karla, sans-serif").style("color", muted).style("margin", 0) .text("Click a moment to watch the clock and your mind race each other."); function live(d) { panel.selectAll("*").remove(); rings.attr("stroke-opacity", n => (n === d ? 1 : 0.35)); blobs.attr("fill-opacity", n => (n === d ? 0.95 : 0.45)); const size = 220, R = 90, max = 120; // dial = 2 hours const dial = panel.append("svg").attr("viewBox", [-size / 2, -size / 2, size, size]) .attr("width", size).attr("height", size).style("flex", "none"); dial.append("circle").attr("r", R).attr("fill", "none").attr("stroke", `${muted}55`); dial.selectAll("line").data(d3.range(0, max, 15)).join("line") .attr("x1", 0).attr("x2", 0).attr("y1", -R - 4).attr("y2", -R + 4) .attr("transform", m => `rotate(${(m / max) * 360})`) .attr("stroke", muted); const clockArc = d3.arc().innerRadius(R - 4).outerRadius(R).startAngle(0); const feltArc = d3.arc().innerRadius(R - 30).outerRadius(R - 10).startAngle(0).cornerRadius(10); const clockPath = dial.append("path").attr("fill", ink); const feltPath = dial.append("path").attr("fill", color(d.pleasantness)); const counter = dial.append("text").attr("text-anchor", "middle").attr("dy", "0.1em") .attr("fill", ink).attr("font-family", "Fraunces, serif").attr("font-size", 30); dial.append("text").attr("text-anchor", "middle").attr("dy", "1.9em") .attr("fill", muted).attr("font-family", "Karla, sans-serif").attr("font-size", 11) .text("minutes felt"); const dur = reduceMotion ? 0 : 3200; const toAngle = m => (m / max) * Math.PI * 2; clockPath.transition().duration(dur).ease(d3.easeLinear) .attrTween("d", () => tt => clockArc({ endAngle: toAngle(d.actual * tt) })); feltPath.transition().duration(dur).ease(d3.easeLinear) .attrTween("d", () => tt => feltArc({ endAngle: toAngle(d.felt * tt) })); counter.transition().duration(dur).ease(d3.easeLinear) .tween("text", function () { const i = d3.interpolateNumber(0, d.felt); return tt => (this.textContent = Math.round(i(tt))); }); const txt = panel.append("div").style("font-family", "Karla, sans-serif").style("line-height", 1.55); txt.append("h3") .style("font-family", "Fraunces, serif").style("font-weight", 600) .style("font-size", "22px").style("margin", "0 0 6px").style("color", ink) .text(d.moment); const slower = d.ratio > 1; const factor = slower ? d.ratio : 1 / d.ratio; txt.append("p").style("margin", "0 0 8px").style("font-size", "16px") .html(`${d.actual} real minutes felt like ${d.felt}.
Time ${slower ? "dragged" : "flew"}, about ${factor.toFixed(1)}× ${slower ? "slower" : "faster"} than the clock.`); txt.append("p").style("margin", 0).style("color", muted).style("font-size", "13px") .text(`Thin white ring: the clock. Thick colored ring: your mind. Pleasantness ${d.pleasantness}/10, anticipation ${d.anticipation}/10.`); } node.on("click", (event, d) => live(d)) .on("keydown", (event, d) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); live(d); } }); // ---- Legend ---- root.append("p") .style("font-family", "Karla, sans-serif").style("font-size", "12px").style("color", muted) .style("margin", "14px 0 0").style("line-height", 1.5) .text("Dashed ring = time on the clock. Glowing shape = time as it felt. Warm = pleasant, cool = unpleasant. Trembling = anticipation. Small white dot = the exact data point; a thin line shows where a shape was nudged so nothing overlaps."); 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":"602c3e9a60df14d5","slug":"give-data-a-character","title":"Untitled","thumbnail":"594b0080aa7a9c37ae74b324cc1ba72cec0ffbada9370bf27e7ae464a43b6439","access_level":"public","create_time":"$D2026-09-30T18:25:18.554Z","update_time":"$D2026-09-30T20:06:47.154Z","view_time":null,"first_public_time":"$D2026-09-30T19:38:34.223Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d9e38aef82cfd52","login":"colin-joseph-quigley","name":"Colin Joseph Quigley","avatar_url":"https://avatars-next.observableusercontent.com/a1f10038cc8e4838826c273e88febd2c36fbe0ca0c4b50daadc34e9d5674162b","tier":"free_2026"},"version":341,"publish_version":341,"role":null,"authored":false,"authors":[{"type":"individual","id":"69cacb8a57e238fb","login":"colin-joseph-quigley","name":"Colin Joseph Quigley","avatar_url":"https://avatars-next.observableusercontent.com/a1f10038cc8e4838826c273e88febd2c36fbe0ca0c4b50daadc34e9d5674162b","tier":null}],"members":[{"type":"team","id":"3d9e38aef82cfd52","login":"colin-joseph-quigley","name":"Colin Joseph Quigley","avatar_url":"https://avatars-next.observableusercontent.com/a1f10038cc8e4838826c273e88febd2c36fbe0ca0c4b50daadc34e9d5674162b","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":64,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":36,"value":"---\n\n## 02 · Starting Point\n\nHere's a simple visualization of the data.\n\nIt shows how long each moment actually lasted, but not how that moment was experienced.\n\n*What is missing from this representation?*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"const chart = Plot.plot({\n title: \"How long did these moments actually last?\",\n marginLeft: 190,\n\n x: {\n label: \"Minutes\",\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 Plot.ruleX([0])\n ]\n});\n\ndisplay(chart);","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":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"