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