2a:null 2b:["$","title",null,{"children":"Give Data a Character | Tabitha Abeka | Observable"}] 30: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 = ""; }); });31: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.*

32:T39bc,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} ]; //display(Inputs.table(moments)); // ---------- Theme ---------- const ink = "#1f2937", muted = "#6b7280"; // Emoji colour scale: unpleasant (red) -> neutral (yellow) -> pleasant (green) const color = d3.scaleLinear() .domain([1, 5.5, 10]) .range(["#e8453c", "#f9c623", "#4caf50"]) .interpolate(d3.interpolateRgb); // How long the animation takes is based on the minutes in the selected view (felt or actual) // Shortest value -> 0.8s, longest value -> 5s (same scale for both views so speeds are comparable) const playTime = d3.scaleLinear() .domain(d3.extent(moments.flatMap(d => [d.felt, d.actual]))) // [1, 100] .range([800, 5000]); // milliseconds // ---------- Card (HTML shell) ---------- const card = document.createElement("div"); card.className = "gdc-card"; card.innerHTML = `

How You Felt Today in Your Everyday Moments

Show

💡 Hover or tap anywhere on the track to find the closest moment

Pleasantness

Unpleasant Pleasant = a moment to explore

`; const select = card.querySelector(".gdc-select"); const replayBtn = card.querySelector(".gdc-btn"); const titleEl = card.querySelector(".gdc-title"); const timeLabel = card.querySelector('[data-k="timeLabel"]'); const timeVal = card.querySelector('[data-k="time"]'); const pleasVal = card.querySelector('[data-k="pleasant"]'); const pleasDot = card.querySelector(".gdc-stats .gdc-dot"); const legendMode = card.querySelector('[data-k="legendMode"]'); const insightEl = card.querySelector(".gdc-insight"); const toggleBtns = card.querySelectorAll(".gdc-toggle button"); moments.forEach((d, i) => { const opt = document.createElement("option"); opt.value = i; opt.textContent = d.moment; select.append(opt); }); select.value = 3; let mode = "felt"; // which view is shown: "felt" or "actual" let current = 3; // index of the moment currently playing const modeText = { felt: {chip: "Felt like", legend: "Emoji + bar = how long it felt"}, actual: {chip: "Actual time", legend: "Emoji + bar = how long it actually lasted"} }; // ---------- Chart (SVG) ---------- const width = 680, height = 152, margin = {left: 30, right: 30}; const trackY = 90; const x = d3.scaleLinear([0, 100], [margin.left, width - margin.right]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("font-family", "inherit") .style("overflow", "visible"); // Soft drop shadow for the emoji svg.append("defs").append("filter") .attr("id", "gdc-shadow").attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%") .append("feDropShadow") .attr("dx", 0).attr("dy", 3).attr("stdDeviation", 3) .attr("flood-color", "#000").attr("flood-opacity", 0.18); // Background track svg.append("line") .attr("x1", x(0)).attr("x2", x(100)) .attr("y1", trackY).attr("y2", trackY) .attr("stroke", "#f1f3f5").attr("stroke-width", 14).attr("stroke-linecap", "round"); // Axis labels svg.append("g").selectAll("text") .data(x.ticks(5)) .join("text") .attr("x", d => x(d)) .attr("y", trackY + 30) .attr("text-anchor", "middle") .attr("fill", muted) .attr("font-size", 11) .text(d => `${d} min`); // Progress bar that grows to the selected view's minutes (colour follows the emoji) const bar = svg.append("line") .attr("x1", x(0)).attr("x2", x(0)) .attr("y1", trackY).attr("y2", trackY) .attr("stroke-width", 14).attr("stroke-linecap", "round"); // Explorable dots: one per moment, coloured by pleasantness const dots = svg.append("g").selectAll("circle") .data(moments) .join("circle") .attr("cy", trackY) .attr("fill", d => color(d.pleasantness)); function updateDots(hoverIdx = -1) { dots .attr("cx", d => x(d[mode])) .attr("r", (d, i) => i === hoverIdx ? 7.5 : 4.5) .attr("stroke", (d, i) => i === current ? ink : "#fff") .attr("stroke-width", (d, i) => i === current ? 2 : 1.5); } // Ground shadow under the emoji const groundShadow = svg.append("ellipse") .attr("cy", trackY - 9).attr("rx", 18).attr("ry", 3) .attr("fill", "#000").attr("opacity", 0.1); // The emoji character const face = svg.append("g"); const head = face.append("circle").attr("r", 28).attr("stroke-width", 2).attr("filter", "url(#gdc-shadow)"); face.append("ellipse").attr("cx", -10).attr("cy", -15).attr("rx", 8).attr("ry", 4) .attr("fill", "#fff").attr("opacity", 0.35); // shine const cheeks = face.append("g"); cheeks.append("circle").attr("cx", -16).attr("cy", 5).attr("r", 4.5).attr("fill", "#ff6b6b"); cheeks.append("circle").attr("cx", 16).attr("cy", 5).attr("r", 4.5).attr("fill", "#ff6b6b"); face.append("ellipse").attr("cx", -9).attr("cy", -5).attr("rx", 3.2).attr("ry", 4).attr("fill", "#222"); face.append("ellipse").attr("cx", 9).attr("cy", -5).attr("rx", 3.2).attr("ry", 4).attr("fill", "#222"); const browL = face.append("path").attr("stroke", "#222").attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("fill", "none"); const browR = face.append("path").attr("stroke", "#222").attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("fill", "none"); const mouth = face.append("path") .attr("fill", "none").attr("stroke", "#222") .attr("stroke-width", 3).attr("stroke-linecap", "round"); // Hover guide + label (shown while exploring the track) const hover = svg.append("g").attr("display", "none").style("pointer-events", "none"); const guide = hover.append("line") .attr("y1", trackY - 18).attr("y2", trackY + 14) .attr("stroke", "#9ca3af").attr("stroke-width", 1.5); const hoverText = hover.append("text") .attr("y", trackY + 52) .attr("font-size", 12) .attr("fill", ink) .attr("stroke", "#fff").attr("stroke-width", 4).attr("paint-order", "stroke"); // Invisible hit area over the track (on top of everything so it always catches the pointer) const hit = svg.append("rect") .attr("x", x(0) - 12).attr("width", x(100) - x(0) + 24) .attr("y", trackY - 22).attr("height", 58) .attr("fill", "transparent") .style("cursor", "pointer") .style("touch-action", "none"); card.querySelector(".gdc-chart").append(svg.node()); // Pleasantness 1 = frown, 5.5 = flat, 10 = big smile const mouthPath = p => { const curve = (p - 5.5) / 4.5 * 14; return `M-11,11 Q0,${11 + curve} 11,11`; }; function draw(m, t, elapsed) { const minutes = m[mode]; // felt or actual, depending on view const p = 5.5 + (m.pleasantness - 5.5) * t; // mood eases in const px = x(minutes * t); // emoji position const jitter = Math.sin(elapsed / 45) * m.anticipation * 0.6 * (1 - t); // nervous bounce const c = color(p); const sad = Math.max(0, (5.5 - p) / 4.5); // 0 (neutral/happy) to 1 (very unpleasant) const happy = Math.max(0, (p - 6) / 4); // 0 to 1 bar.attr("x2", px).attr("stroke", c); groundShadow.attr("cx", px).attr("rx", 18 - Math.abs(jitter) * 0.8); face.attr("transform", `translate(${px},${trackY - 44 + jitter})`); head.attr("fill", c).attr("stroke", d3.color(c).darker(0.8)); mouth.attr("d", mouthPath(p)); cheeks.attr("opacity", happy * 0.45); browL.attr("d", `M-15,-14 L-4,${-14 - sad * 5}`).attr("opacity", sad); browR.attr("d", `M4,${-14 - sad * 5} L15,-14`).attr("opacity", sad); timeVal.textContent = `${Math.round(minutes * t)} min`; pleasVal.textContent = `${p.toFixed(1)} / 10`; pleasDot.style.background = c; } function insightFor(m) { const diff = m.felt - m.actual; if (diff > 0) return `⏳ Lasted ${m.actual} min but felt like ${m.felt}. That's ${diff} min longer than it really was.`; if (diff < 0) return `✨ Lasted ${m.actual} min but felt like ${m.felt}. It flew by, ${-diff} min shorter than it really was.`; return `Felt exactly as long as it was.`; } // ---------- Animation ---------- let timer; function play() { if (timer) timer.stop(); current = +select.value; const m = moments[current]; const duration = playTime(m[mode]); titleEl.textContent = m.moment; timeLabel.textContent = modeText[mode].chip; legendMode.innerHTML = modeText[mode].legend; insightEl.style.opacity = 0; updateDots(); draw(m, 0, 0); timer = d3.timer(elapsed => { const t = Math.min(1, elapsed / duration); draw(m, d3.easeCubicInOut(t), elapsed); if (t === 1) { timer.stop(); insightEl.innerHTML = insightFor(m); insightEl.style.opacity = 1; } }); } // ---------- Exploration ---------- function minutesAt(event) { const [mx] = d3.pointer(event, svg.node()); return Math.max(0, Math.min(100, x.invert(mx))); } function nearestTo(min) { let best = 0; moments.forEach((d, i) => { if (Math.abs(d[mode] - min) < Math.abs(moments[best][mode] - min)) best = i; }); return best; } hit .on("pointermove", event => { const min = minutesAt(event); const i = nearestTo(min); const d = moments[i]; const gx = x(min); const onLeft = gx < width / 2; hover.attr("display", null); guide.attr("x1", gx).attr("x2", gx); hoverText .attr("x", onLeft ? gx + 8 : gx - 8) .attr("text-anchor", onLeft ? "start" : "end") .text(`≈ ${Math.round(min)} min → ${d.moment} (${mode} ${d[mode]} min) · click to play`); updateDots(i); }) .on("pointerleave", () => { hover.attr("display", "none"); updateDots(); }) .on("click", event => { select.value = nearestTo(minutesAt(event)); play(); }); // Switching views replays the current moment in the new view toggleBtns.forEach(btn => { btn.addEventListener("click", () => { mode = btn.dataset.mode; toggleBtns.forEach(b => b.classList.toggle("on", b === btn)); play(); }); }); select.addEventListener("change", play); replayBtn.addEventListener("click", play); if (typeof invalidation !== "undefined") invalidation.then(() => timer && timer.stop()); display(card); play();33:[] 2e:{"id":"c16be66e93ffca3e","slug":"give-data-a-character","title":"Give Data a Character","thumbnail":"594b0080aa7a9c37ae74b324cc1ba72cec0ffbada9370bf27e7ae464a43b6439","access_level":"public","create_time":"$D2026-09-30T19:39:29.468Z","update_time":"$D2026-09-30T20:28:21.993Z","view_time":null,"first_public_time":"$D2026-09-30T20:05:30.863Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d165f34e8ae5d358","login":"tabitha-abeka","name":"Tabitha Abeka","avatar_url":"https://avatars-next.observableusercontent.com/61c9c0a2b13308ca3b76f35c1fb2a0c606de1424466aa62b41bb1a30808feae1","tier":"free_2026"},"version":336,"publish_version":336,"role":null,"authored":false,"authors":[{"type":"individual","id":"af6ec000c7304821","login":"tabitha-abeka","name":"Tabitha Abeka","avatar_url":"https://avatars-next.observableusercontent.com/61c9c0a2b13308ca3b76f35c1fb2a0c606de1424466aa62b41bb1a30808feae1","tier":null}],"members":[{"type":"team","id":"d165f34e8ae5d358","login":"tabitha-abeka","name":"Tabitha Abeka","avatar_url":"https://avatars-next.observableusercontent.com/61c9c0a2b13308ca3b76f35c1fb2a0c606de1424466aa62b41bb1a30808feae1","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":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":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$31","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"