2a:null 2b:["$","title",null,{"children":"Give Data a Character | Rohit Mahesh | 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:T213f,// Observable Framework: paste into a ```js code block. import * as d3 from "npm:d3"; 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 feltColor = "#ff7b6b"; // pinkish-orange const actualColor = "#4fb98a"; // green // Pleasantness color: 1 = dirty brown, 10 = nice blue const pleasantScale = d3.scaleLinear() .domain([1, 10]) .range(["#8b6b4a", "#2f80ed"]) .interpolate(d3.interpolateLab); const anticipationColor = "#ef4444"; // tooltip pulse: anticipation (red) const chart = (() => { const width = 900, height = 520; const margin = {top: 40, right: 24, bottom: 110, left: 64}; const container = html`

`; const tooltip = d3.select(container).select(".tt"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .style("display", "block") .style("font-family", "system-ui, sans-serif"); container.prepend(svg.node()); const x = d3.scaleBand() .domain(moments.map(d => d.moment)) .range([margin.left, width - margin.right]) .padding(0.25); const y = d3.scaleLinear() .domain([0, d3.max(moments, d => d.actual + d.felt)]).nice() .range([height - margin.bottom, margin.top]); // Gridlines + y axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickSize(-(width - margin.left - margin.right))) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "currentColor").attr("stroke-opacity", 0.12)) .call(g => g.selectAll("text").attr("font-size", 12)); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + (height - margin.top - margin.bottom) / 2)) .attr("y", 16) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "currentColor") .text("Time (minutes)"); // X axis with wrapped labels const xAxis = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0)) .call(g => g.select(".domain").attr("stroke-opacity", 0.3)); xAxis.selectAll("text").each(function (label) { const text = d3.select(this); const words = label.split(" "); const maxChars = Math.max(10, Math.floor(x.bandwidth() / 7)); const lines = []; let line = ""; for (const w of words) { if ((line + " " + w).trim().length > maxChars && line) { lines.push(line); line = w; } else line = (line + " " + w).trim(); } lines.push(line); text.text(null).attr("font-size", 12).attr("y", 12); lines.forEach((l, i) => text.append("tspan").attr("x", 0).attr("dy", i === 0 ? "0.71em" : "1.15em").text(l)); }); // Bars (actual on the bottom, felt stacked on top) const groups = svg.append("g") .selectAll("g") .data(moments) .join("g") .attr("class", "moment") .style("cursor", "pointer"); // The smaller value sits at the bottom, the larger on top: // felt > actual -> green (actual) bottom, pink-orange (felt) on top // felt < actual -> pink-orange (felt) bottom, green (actual) on top const feltOnTop = d => d.felt >= d.actual; // Bottom segment groups.append("rect") .attr("x", d => x(d.moment)) .attr("width", x.bandwidth()) .attr("y", d => y(feltOnTop(d) ? d.actual : d.felt)) .attr("height", d => y(0) - y(feltOnTop(d) ? d.actual : d.felt)) .attr("fill", d => feltOnTop(d) ? actualColor : feltColor) .attr("rx", 2); // Top segment groups.append("rect") .attr("x", d => x(d.moment)) .attr("width", x.bandwidth()) .attr("y", d => y(d.actual + d.felt)) .attr("height", d => { const bottom = feltOnTop(d) ? d.actual : d.felt; return y(bottom) - y(d.actual + d.felt); }) .attr("fill", d => feltOnTop(d) ? feltColor : actualColor) .attr("rx", 2); // Total label above each stack svg.append("g") .selectAll("text") .data(moments) .join("text") .attr("x", d => x(d.moment) + x.bandwidth() / 2) .attr("y", d => y(d.actual + d.felt) - 6) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "currentColor") .attr("fill-opacity", 0.6) .text(d => `${d.actual}+${d.felt}`); // Legend const legend = svg.append("g").attr("transform", `translate(${margin.left},14)`); [["Actual time", actualColor], ["Felt time", feltColor]].forEach(([label, color], i) => { const g = legend.append("g").attr("transform", `translate(${i * 130},0)`); g.append("rect").attr("width", 14).attr("height", 14).attr("rx", 3).attr("fill", color); g.append("text").attr("x", 20).attr("y", 11).attr("font-size", 13).attr("fill", "currentColor").text(label); }); // Tooltip content // Anticipation (red) pulses: high value -> fast pulse (10 => 0.4s, 1 => 2.2s). // Pleasantness does not pulse; its color runs from brown (low) to blue (high). const pulseRow = (label, value, color, pulses) => { const dur = (2.4 - value * 0.2).toFixed(2); return `

${label}

${value}

`; }; groups .on("mouseenter", function (event, d) { groups.style("opacity", g => (g === d ? 1 : 0.35)); tooltip.html(`

${d.moment}

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

${pulseRow("Pleasantness", d.pleasantness, pleasantScale(d.pleasantness), false)} ${pulseRow("Anticipation", d.anticipation, anticipationColor, true)} `).style("opacity", 1); }) .on("mousemove", function (event) { const [px, py] = d3.pointer(event, container); const tw = tooltip.node().offsetWidth; const left = px + 16 + tw > width ? px - tw - 16 : px + 16; tooltip.style("left", `${left}px`).style("top", `${Math.max(0, py - 20)}px`); }) .on("mouseleave", function () { groups.style("opacity", 1); tooltip.style("opacity", 0); }); return container; })(); display(chart);33:[] 2e:{"id":"1c18ea7dbf456a23","slug":"give-data-a-character","title":"Give Data a Character","thumbnail":"594b0080aa7a9c37ae74b324cc1ba72cec0ffbada9370bf27e7ae464a43b6439","access_level":"public","create_time":"$D2026-09-30T19:25:06.883Z","update_time":"$D2026-09-30T20:00:45.689Z","view_time":null,"first_public_time":"$D2026-09-30T20:07:02.743Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"98172d5f34c10c80","login":"rohit-mahesh","name":"Rohit Mahesh","avatar_url":"https://avatars-next.observableusercontent.com/f35ef0d74545a65a74f39860f508231be2297b6aa808636de4351747765fe346","tier":"free_2026"},"version":328,"publish_version":328,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7c42ae1f28bb77b","login":"rohit-mahesh","name":"Rohit Mahesh","avatar_url":"https://avatars-next.observableusercontent.com/f35ef0d74545a65a74f39860f508231be2297b6aa808636de4351747765fe346","tier":null}],"members":[{"type":"team","id":"98172d5f34c10c80","login":"rohit-mahesh","name":"Rohit Mahesh","avatar_url":"https://avatars-next.observableusercontent.com/f35ef0d74545a65a74f39860f508231be2297b6aa808636de4351747765fe346","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":"md `\n\n\n- I first wanted to show the different between Actual time and Felt time and decided that a stacked bar chart would be a good way to do that.\n\n- Then I wanted to give the user a way to view how each moment felt in terms of pleasantness and anticipation. So i thought a tooltip would be helpful.\n\n- I wanted my interaction to give users an ability to see all 4 attributes from one chart instead of relying on many charts or multiple dimensions. I also wanted the user to be able to relate to the numbers such as pleasantness and anticipation by adding an pulsating animation for anticipation and a varying color scale for pleasantness\n\n`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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"