// 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);