29:null 2a:["$","title",null,{"children":"Area bump chart experimentation (plain to watercolour) | Patrick Wojda | Observable"}] 2f:T459,data = [ ...[ // 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 [ "R&B / Hip-Hop", [ 80, 110, 160, 230, 340, 520, 820, 1200, 1650, 2100, 2600, 3100, 3500, 3900 ] ], [ "Pop", [ 120, 150, 200, 280, 380, 520, 700, 900, 1100, 1300, 1450, 1550, 1600, 1650 ] ], [ "Rock", [180, 200, 210, 220, 230, 240, 245, 240, 230, 220, 210, 200, 190, 180] ], [ "Country", [60, 80, 110, 150, 200, 270, 350, 430, 510, 580, 620, 660, 700, 730] ], [ "Latin", [20, 28, 40, 58, 80, 120, 200, 350, 520, 680, 820, 960, 1050, 1150] ], [ "Electronic/Dance", [30, 45, 65, 90, 130, 180, 240, 300, 350, 380, 400, 420, 430, 440] ], [ "Classical/Jazz", [40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 62, 66, 68, 70] ], ["K-Pop", [2, 4, 8, 15, 25, 40, 70, 130, 230, 380, 520, 650, 750, 830]] ].flatMap(([category, values]) => values.map((value, i) => ({ date: 2010 + i, category, value })) ) ]30:T129b,{ // ── Config ────────────────────────────────────────────── const width = 800; const height = 420; const margin = { top: 30, right: 140, bottom: 30, left: 50 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Normalise to proportions per date ────────────────── const totalByDate = d3.rollup( data, (v) => d3.sum(v, (d) => d.value), (d) => d.date ); const series = categories.map((category) => ({ category, values: dates.map((date) => { const row = data.find((d) => d.date === date && d.category === category); const val = row ? row.value : 0; return { date, proportion: val / totalByDate.get(date) }; }) })); // ── Stacking ───────────────────────────────────────────── // Compute cumulative y0/y1 per date const stacked = dates.map((date) => { let cum = 0; const cols = {}; // keep insertion order = category order for (const { category, values } of series) { const p = values.find((v) => v.date === date).proportion; cols[category] = { y0: cum, y1: cum + p }; cum += p; } return { date, cols }; }); // ── Scales ─────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── Area generator (smooth bumps via monotoneX) ────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ← the "bump" curve // ── SVG ────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "12px"); // Areas for (const { category } of series) { const pathData = dates.map((date) => ({ date, y0: stacked.find((s) => s.date === date).cols[category].y0, y1: stacked.find((s) => s.date === date).cols[category].y1 })); svg .append("path") .datum(pathData) .attr("fill", color(category)) .attr("opacity", 0.85) .attr("d", area); } // ── X Axis ─────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); // ── Y Axis (%) ─────────────────────────────────────────── svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(".0%"))) .call((g) => g.select(".domain").remove()); // ── Legend ─────────────────────────────────────────────── const legend = svg .append("g") .attr( "transform", `translate(${width - margin.right + 40}, ${margin.top})` ); categories.forEach((cat, i) => { const g = legend.append("g").attr("transform", `translate(0, ${i * 20})`); g.append("rect") .attr("width", 12) .attr("height", 12) .attr("fill", color(cat)) .attr("rx", 2); g.append("text").attr("x", 16).attr("y", 10).text(cat).attr("fill", "#333"); }); // ── Labels at last date ────────────────────────────────── const lastDate = dates.at(-1); for (const { category } of series) { const col = stacked.find((s) => s.date === lastDate).cols[category]; const midY = y((col.y0 + col.y1) / 2); const pct = ((col.y1 - col.y0) * 100).toFixed(0); svg .append("text") .attr("x", x(lastDate) + 4) .attr("y", midY + 4) .attr("fill", "#333") .text(`${pct}%`); } return svg.node(); }31:T121a,{ // ── Config ──────────────────────────────────────────────── const width = 800; const height = 440; const margin = { top: 20, right: 140, bottom: 30, left: 50 }; const padding = 0.15; // gap between bands as fraction of slot height const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const n = categories.length; // ── Rank each category per date (1 = highest value) ────── // rankAt[date][category] = rank index 0..n-1 (0 = top) const rankAt = {}; for (const date of dates) { const sorted = data .filter((d) => d.date === date) .sort((a, b) => d3.descending(a.value, b.value)) .map((d) => d.category); rankAt[date] = Object.fromEntries(sorted.map((cat, i) => [cat, i])); } // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // Total value per date (for normalising thickness within slot) const totalAt = Object.fromEntries( dates.map((date) => [date, d3.sum(categories, (cat) => valueOf(cat, date))]) ); // ── Scales ──────────────────────────────────────────────── const slotH = (height - margin.top - margin.bottom) / n; // px per rank slot // x: dates const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); // For a given rank slot, centre y position const slotCY = (rank) => margin.top + rank * slotH + slotH / 2; // Thickness of a band at (cat, date): // fills the slot proportionally to its share of total value, // but capped to (1 - padding) of the slot height. const halfThick = (cat, date) => { const share = valueOf(cat, date) / totalAt[date]; return (share * slotH * (1 - padding)) / 2; }; // ── Build one path per category ─────────────────────────── // Each path is defined by top-edge points (left→right) // and bottom-edge points (right→left), connected into a closed shape. const area = d3 .area() .x((d) => x(d.date)) .y0((d) => slotCY(d.rank) - d.half) .y1((d) => slotCY(d.rank) + d.half) .curve(d3.curveBumpX); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "12px"); // Draw bands for (const cat of categories) { const pathData = dates.map((date) => ({ date, rank: rankAt[date][cat], half: halfThick(cat, date) })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.85) .attr("d", area); } // ── Rank labels on left (first date) ───────────────────── const firstDate = dates[0]; for (const cat of categories) { const rank = rankAt[firstDate][cat]; svg .append("text") .attr("x", x(firstDate) - 6) .attr("y", slotCY(rank) + 4) .attr("text-anchor", "end") .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── Labels on right (last date) ─────────────────────────── const lastDate = dates.at(-1); for (const cat of categories) { const rank = rankAt[lastDate][cat]; const val = valueOf(cat, lastDate); svg .append("text") .attr("x", x(lastDate) + 8) .attr("y", slotCY(rank) + 4) .attr("fill", color(cat)) .attr("font-weight", "bold") .text(`${cat} (${val})`); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); return svg.node(); }32:T1530,{ // ── Config ──────────────────────────────────────────────── const width = 900; const height = 480; const margin = { top: 20, right: 160, bottom: 30, left: 100 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Rank order per date (rank 0 = bottom of stack) ──────── // At each date, sort categories by value ascending so rank 1 (highest) is on top const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.ascending(valueOf(a, date), valueOf(b, date)) ); } // ── Compute stacked y0/y1 per category per date ─────────── // At each date, stack bands bottom→top in rank order const totalAt = Object.fromEntries( dates.map((date) => [date, d3.sum(categories, (c) => valueOf(c, date))]) ); // y0[cat][date], y1[cat][date] as proportions 0..1 const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { let cum = 0; for (const cat of orderAt[date]) { const prop = valueOf(cat, date) / totalAt[date]; y0[cat][date] = cum; y1[cat][date] = cum + prop; cum += prop; } } // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "11px"); // Draw one band per category for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.85) .attr("d", area); // ── Inline label: place at the date where band is thickest ── const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); // Only draw inline label if band is tall enough if (bandPx > 14) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "bold") .attr("font-size", Math.min(13, bandPx * 0.45)) .text(cat); } } // ── Right-side labels (last date) ───────────────────────── const lastDate = dates.at(-1); // Sort by mid-position so labels don't collide const rightLabels = [...categories] .map((cat) => ({ cat, mid: (y0[cat][lastDate] + y1[cat][lastDate]) / 2 })) .sort((a, b) => d3.ascending(a.mid, b.mid)); for (const { cat, mid } of rightLabels) { svg .append("text") .attr("x", x(lastDate) + 8) .attr("y", y(mid) + 4) .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── Left-side labels (first date) ───────────────────────── const firstDate = dates[0]; const leftLabels = [...categories] .map((cat) => ({ cat, mid: (y0[cat][firstDate] + y1[cat][firstDate]) / 2 })) .sort((a, b) => d3.ascending(a.mid, b.mid)); for (const { cat, mid } of leftLabels) { svg .append("text") .attr("x", x(firstDate) - 8) .attr("y", y(mid) + 4) .attr("text-anchor", "end") .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); return svg.node(); }33:T149e,{ // ── Config ──────────────────────────────────────────────── const width = 900; const height = 480; const margin = { top: 20, right: 160, bottom: 30, left: 100 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Rank order per date (lowest value at bottom, highest at top) ── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.ascending(valueOf(a, date), valueOf(b, date)) ); } // ── Compute absolute stacked y0/y1 per category per date ── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); // ← raw value, NOT proportion y0[cat][date] = cum; y1[cat][date] = cum + v; cum += v; } } // ── Max total stack height across all dates ─────────────── const maxTotal = d3.max(dates, (date) => d3.sum(categories, (cat) => valueOf(cat, date)) ); // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, maxTotal]) // ← absolute domain .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "11px"); // Draw bands for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.85) .attr("d", area); // Inline label at thickest point const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); if (bandPx > 14) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "bold") .attr("font-size", Math.min(13, bandPx * 0.45)) .text(cat); } } // ── Right-side labels ───────────────────────────────────── const lastDate = dates.at(-1); for (const cat of categories) { const mid = (y0[cat][lastDate] + y1[cat][lastDate]) / 2; svg .append("text") .attr("x", x(lastDate) + 8) .attr("y", y(mid) + 4) .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── Left-side labels ────────────────────────────────────── const firstDate = dates[0]; for (const cat of categories) { const mid = (y0[cat][firstDate] + y1[cat][firstDate]) / 2; svg .append("text") .attr("x", x(firstDate) - 8) .attr("y", y(mid) + 4) .attr("text-anchor", "end") .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); // ── Y Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6)) .call((g) => g.select(".domain").remove()); return svg.node(); }34:T14d3,{ // ── Config ──────────────────────────────────────────────── const width = 900; const height = 480; const margin = { top: 20, right: 160, bottom: 30, left: 100 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Rank order per date (lowest value at top, highest at bottom) ── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); // ← descending = largest first = bottom of stack } // ── Compute absolute stacked y0/y1 per category per date ── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); // ← raw value, NOT proportion y0[cat][date] = cum; y1[cat][date] = cum + v; cum += v; } } // ── Max total stack height across all dates ─────────────── const maxTotal = d3.max(dates, (date) => d3.sum(categories, (cat) => valueOf(cat, date)) ); // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, maxTotal]) // ← absolute domain .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "11px"); // Draw bands for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.85) .attr("d", area); // Inline label at thickest point const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); if (bandPx > 14) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "bold") .attr("font-size", Math.min(13, bandPx * 0.45)) .text(cat); } } // ── Right-side labels ───────────────────────────────────── const lastDate = dates.at(-1); for (const cat of categories) { const mid = (y0[cat][lastDate] + y1[cat][lastDate]) / 2; svg .append("text") .attr("x", x(lastDate) + 8) .attr("y", y(mid) + 4) .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── Left-side labels ────────────────────────────────────── const firstDate = dates[0]; for (const cat of categories) { const mid = (y0[cat][firstDate] + y1[cat][firstDate]) / 2; svg .append("text") .attr("x", x(firstDate) - 8) .attr("y", y(mid) + 4) .attr("text-anchor", "end") .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); // ── Y Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6)) .call((g) => g.select(".domain").remove()); return svg.node(); }35:T13f8,{ const width = 900; const height = 480; const margin = { top: 20, right: 160, bottom: 30, left: 60 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Wide format: one object per date ───────────────────── const wide = dates.map((date) => { const row = { date }; for (const cat of categories) row[cat] = data.find((d) => d.date === date && d.category === cat)?.value ?? 0; return row; }); // ── Per-date rank order (largest at bottom = first in stack) ── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending( wide.find((r) => r.date === date)[a], wide.find((r) => r.date === date)[b] ) ); } // ── Build stacked layers manually per date, then apply silhouette offset ── // We can't use d3.stack() directly because key order changes per date, // so we compute y0/y1 per date then apply the silhouette offset ourselves // (which is exactly what d3.stackOffsetSilhouette does: shift by -sum/2) const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const row of wide) { const { date } = row; const total = d3.sum(categories, (c) => row[c]); const offset = total / 2; // silhouette offset let cum = 0; for (const cat of orderAt[date]) { y0[cat][date] = cum - offset; y1[cat][date] = cum + row[cat] - offset; cum += row[cat]; } } // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max(wide, (row) => d3.sum(categories, (c) => row[c]) / 2); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("font-size", "11px"); // Draw bands for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.85) .attr("d", area); // Inline label at thickest point const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); if (bandPx > 14) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "bold") .attr("font-size", Math.min(13, bandPx * 0.45)) .text(cat); } } // ── Right-side labels ───────────────────────────────────── const lastDate = dates.at(-1); for (const cat of categories) { const mid = (y0[cat][lastDate] + y1[cat][lastDate]) / 2; svg .append("text") .attr("x", x(lastDate) + 8) .attr("y", y(mid) + 4) .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── Left-side labels ────────────────────────────────────── const firstDate = dates[0]; for (const cat of categories) { const mid = (y0[cat][firstDate] + y1[cat][firstDate]) / 2; svg .append("text") .attr("x", x(firstDate) - 8) .attr("y", y(mid) + 4) .attr("text-anchor", "end") .attr("fill", color(cat)) .attr("font-weight", "bold") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()); return svg.node(); }36:T15ce,{ const width = 900; const height = 500; const margin = { top: 20, right: 140, bottom: 30, left: 20 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Per-date rank order (largest at bottom) ─────────────── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } // ── Stacked y0/y1 with silhouette offset ────────────────── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Better color palette ────────────────────────────────── const palette = [ "#e63946", "#2a9d8f", "#f4a261", "#457b9d", "#8ecae6", "#e9c46a", "#a8dadc", "#6a994e" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("background", "#fafafa"); // Draw bands — fully opaque, subtle stroke to separate neighbors for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); svg .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 1) .attr("stroke", "#fafafa") .attr("stroke-width", 0.8) .attr("d", area); // ── Inline label at widest point ────────────────────── const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); if (bandPx > 18) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "600") .attr("font-size", Math.min(14, bandPx * 0.4)) .attr("pointer-events", "none") .text(cat); } } // ── Right-side labels only, sorted by y position, de-collided ── const lastDate = dates.at(-1); const rightLabels = [...categories] .map((cat) => ({ cat, y: y((y0[cat][lastDate] + y1[cat][lastDate]) / 2) })) .sort((a, b) => d3.ascending(a.y, b.y)); // De-collide: nudge labels apart if they overlap const minGap = 14; for (let i = 1; i < rightLabels.length; i++) { const prev = rightLabels[i - 1]; const curr = rightLabels[i]; if (curr.y - prev.y < minGap) curr.y = prev.y + minGap; } for (const { cat, y: ly } of rightLabels) { // Connector dot svg .append("circle") .attr("cx", x(lastDate) + 4) .attr("cy", ly) .attr("r", 3) .attr("fill", color(cat)); svg .append("text") .attr("x", x(lastDate) + 12) .attr("y", ly + 4) .attr("fill", color(cat)) .attr("font-size", 12) .attr("font-weight", "600") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .attr("stroke", "#ccc") .attr("y1", -(height - margin.top - margin.bottom)) ) .call((g) => g.selectAll(".tick text").attr("fill", "#888").attr("font-size", 11) ); return svg.node(); }37:T154b,{ const width = 900; const height = 500; const margin = { top: 20, right: 140, bottom: 30, left: 20 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Per-date rank order (largest at bottom) ─────────────── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } // ── Stacked y0/y1 with silhouette offset ────────────────── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Color palette ───────────────────────────────────────── const palette = [ "#e63946", "#2a9d8f", "#f4a261", "#457b9d", "#8ecae6", "#e9c46a", "#a8dadc", "#6a994e" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("background", "#fafafa"); // ── Band group with blend mode ──────────────────────────── const bandGroup = svg.append("g").style("mix-blend-mode", "multiply"); for (const cat of categories) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); bandGroup .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.75) .attr("stroke", "#fafafa") .attr("stroke-width", 0.8) .attr("d", area); // Inline label at widest point const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y((y0[cat][thickest] + y1[cat][thickest]) / 2); if (bandPx > 18) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "600") .attr("font-size", Math.min(14, bandPx * 0.4)) .attr("pointer-events", "none") .text(cat); } } // ── Right-side labels, sorted + de-collided ─────────────── const lastDate = dates.at(-1); const rightLabels = [...categories] .map((cat) => ({ cat, y: y((y0[cat][lastDate] + y1[cat][lastDate]) / 2) })) .sort((a, b) => d3.ascending(a.y, b.y)); const minGap = 14; for (let i = 1; i < rightLabels.length; i++) { const prev = rightLabels[i - 1]; const curr = rightLabels[i]; if (curr.y - prev.y < minGap) curr.y = prev.y + minGap; } for (const { cat, y: ly } of rightLabels) { svg .append("circle") .attr("cx", x(lastDate) + 4) .attr("cy", ly) .attr("r", 3) .attr("fill", color(cat)); svg .append("text") .attr("x", x(lastDate) + 12) .attr("y", ly + 4) .attr("fill", color(cat)) .attr("font-size", 12) .attr("font-weight", "600") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick text").attr("fill", "#888").attr("font-size", 11) ); return svg.node(); }38:T1775,{ const width = 900; const height = 500; const margin = { top: 20, right: 140, bottom: 30, left: 20 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Per-date rank order (largest at bottom) ─────────────── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } // ── Stacked y0/y1 with silhouette offset ────────────────── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } // ── Mid-point of a band at a date ──────────────────────── const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Color palette ───────────────────────────────────────── const palette = [ "#e63946", "#2a9d8f", "#f4a261", "#457b9d", "#8ecae6", "#e9c46a", "#a8dadc", "#6a994e" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); // ── Area generator for a 2-point segment ───────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("background", "#fafafa"); // ── Draw segment by segment, sorting z-order per segment ── for (let i = 0; i < dates.length - 1; i++) { const d0 = dates[i]; const d1 = dates[i + 1]; const segOrder = [...categories].sort((a, b) => { const aDelta = midOf(a, d1) - midOf(a, d0); const bDelta = midOf(b, d1) - midOf(b, d0); return d3.descending(aDelta, bDelta); }); const segGroup = svg.append("g").style("mix-blend-mode", "multiply"); for (const cat of segOrder) { const pathData = [d0, d1].map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); segGroup .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.75) .attr("stroke", "none") // ← was "#fafafa", caused the vertical lines .attr("d", area); } } // ── Inline labels (drawn on top of everything) ──────────── for (const cat of categories) { const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y(midOf(cat, thickest)); if (bandPx > 18) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "600") .attr("font-size", Math.min(14, bandPx * 0.4)) .attr("pointer-events", "none") .text(cat); } } // ── Right-side labels, sorted + de-collided ─────────────── const lastDate = dates.at(-1); const rightLabels = [...categories] .map((cat) => ({ cat, y: y(midOf(cat, lastDate)) })) .sort((a, b) => d3.ascending(a.y, b.y)); const minGap = 14; for (let i = 1; i < rightLabels.length; i++) { if (rightLabels[i].y - rightLabels[i - 1].y < minGap) rightLabels[i].y = rightLabels[i - 1].y + minGap; } for (const { cat, y: ly } of rightLabels) { svg .append("circle") .attr("cx", x(lastDate) + 4) .attr("cy", ly) .attr("r", 3) .attr("fill", color(cat)); svg .append("text") .attr("x", x(lastDate) + 12) .attr("y", ly + 4) .attr("fill", color(cat)) .attr("font-size", 12) .attr("font-weight", "600") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g.selectAll(".tick text").attr("fill", "#888").attr("font-size", 11) ) .call((g) => g.select(".domain").remove()); return svg.node(); }39:T1cfd,{ const width = 900; const height = 500; const margin = { top: 20, right: 140, bottom: 30, left: 20 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Per-date rank order (largest at bottom) ─────────────── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } // ── Stacked y0/y1 with silhouette offset ────────────────── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } // ── Mid-point of a band at a date ───────────────────────── const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Color palette ───────────────────────────────────────── const palette = [ "#e63946", "#2a9d8f", "#f4a261", "#457b9d", "#8ecae6", "#e9c46a", "#a8dadc", "#6a994e" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("background", "#fafafa"); // ── Draw segment by segment, sorting z-order per segment ── for (let i = 0; i < dates.length - 1; i++) { const d0 = dates[i]; const d1 = dates[i + 1]; const segOrder = [...categories].sort((a, b) => { const aDelta = midOf(a, d1) - midOf(a, d0); const bDelta = midOf(b, d1) - midOf(b, d0); return d3.descending(aDelta, bDelta); }); // Clip region for this segment const clipId = `clip-${i}`; svg .append("defs") .append("clipPath") .attr("id", clipId) .append("rect") .attr("x", x(d0)) .attr("y", margin.top) .attr("width", x(d1) - x(d0)) .attr("height", height - margin.top - margin.bottom); // Filled bands with multiply blending const segGroup = svg.append("g").style("mix-blend-mode", "multiply"); for (const cat of segOrder) { const pathData = [d0, d1].map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); segGroup .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.75) .attr("stroke", "none") .attr("d", area); } // Full-series outlines clipped to this segment const outlineGroup = svg.append("g").attr("clip-path", `url(#${clipId})`); for (const cat of categories) { const fullData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); // Top edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d.y1)) .curve(d3.curveBumpX)(fullData) ); // Bottom edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d.y0)) .curve(d3.curveBumpX)(fullData) ); } } // ── Inline labels (drawn on top of everything) ──────────── for (const cat of categories) { const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const midY = y(midOf(cat, thickest)); if (bandPx > 18) { svg .append("text") .attr("x", x(thickest)) .attr("y", midY + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-weight", "600") .attr("font-size", Math.min(14, bandPx * 0.4)) .attr("pointer-events", "none") .text(cat); } } // ── Right-side labels, sorted + de-collided ─────────────── const lastDate = dates.at(-1); const rightLabels = [...categories] .map((cat) => ({ cat, y: y(midOf(cat, lastDate)) })) .sort((a, b) => d3.ascending(a.y, b.y)); const minGap = 14; for (let i = 1; i < rightLabels.length; i++) { if (rightLabels[i].y - rightLabels[i - 1].y < minGap) rightLabels[i].y = rightLabels[i - 1].y + minGap; } for (const { cat, y: ly } of rightLabels) { svg .append("circle") .attr("cx", x(lastDate) + 4) .attr("cy", ly) .attr("r", 3) .attr("fill", color(cat)); svg .append("text") .attr("x", x(lastDate) + 12) .attr("y", ly + 4) .attr("fill", color(cat)) .attr("font-size", 12) .attr("font-weight", "600") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g.selectAll(".tick text").attr("fill", "#888").attr("font-size", 11) ); return svg.node(); }3a:T1e46,{ const width = 900; const height = 500; const margin = { top: 20, right: 20, bottom: 30, left: 20 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); // ── Value lookup ────────────────────────────────────────── const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; // ── Per-date rank order (largest at bottom) ─────────────── const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } // ── Stacked y0/y1 with silhouette offset ────────────────── const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } // ── Mid-point of a band at a date ───────────────────────── const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; // ── Scales ──────────────────────────────────────────────── const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Color palette ───────────────────────────────────────── const palette = [ "#e63946", "#2a9d8f", "#f4a261", "#457b9d", "#8ecae6", "#e9c46a", "#a8dadc", "#6a994e" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); // ── Area generator ──────────────────────────────────────── const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("background", "#fafafa"); // ── Draw segment by segment, sorting z-order per segment ── for (let i = 0; i < dates.length - 1; i++) { const d0 = dates[i]; const d1 = dates[i + 1]; const segOrder = [...categories].sort((a, b) => { const aDelta = midOf(a, d1) - midOf(a, d0); const bDelta = midOf(b, d1) - midOf(b, d0); return d3.descending(aDelta, bDelta); }); // Clip region for this segment const clipId = `clip-${i}`; svg .append("defs") .append("clipPath") .attr("id", clipId) .append("rect") .attr("x", x(d0)) .attr("y", margin.top) .attr("width", x(d1) - x(d0)) .attr("height", height - margin.top - margin.bottom); // Filled bands with multiply blending const segGroup = svg.append("g").style("mix-blend-mode", "multiply"); for (const cat of segOrder) { const pathData = [d0, d1].map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); segGroup .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.75) .attr("stroke", "none") .attr("d", area); } // Full-series outlines clipped to this segment const outlineGroup = svg.append("g").attr("clip-path", `url(#${clipId})`); for (const cat of categories) { const fullData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); // Top edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d.y1)) .curve(d3.curveBumpX)(fullData) ); // Bottom edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d.y0)) .curve(d3.curveBumpX)(fullData) ); } } // ── Inline labels (inside chart, fitted, with outline) ──── for (const cat of categories) { const thickest = dates.reduce( (best, date) => y1[cat][date] - y0[cat][date] > y1[cat][best] - y0[cat][best] ? date : best, dates[0] ); const bandPx = y(y0[cat][thickest]) - y(y1[cat][thickest]); const fontSize = Math.min(13, bandPx * 0.45); const textWidth = cat.length * fontSize * 0.6; let bestDate = null; let bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 4 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.45 ); // White halo svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.3) .attr("pointer-events", "none") .text(cat); // Dark fill on top svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "white") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g.selectAll(".tick text").attr("fill", "#888").attr("font-size", 11) ); return svg.node(); }3b:T406,## Stacked Area Bump Chart — Brush Stroke Style A fixed-order stacked area chart rendered to look like a hand-painted brush drawing. Unlike the watercolour series, this version uses a single shared SVG displacement filter to simulate the texture and edge roughness of a broad ink brush stroke. **Rendering approach:** All bands are drawn in a fixed stack order (largest average value at bottom) rather than reordering by rank over time. Each band is rendered twice — first as a filled area through a `feTurbulence` + `feDisplacementMap` + `feGaussianBlur` filter chain that roughens the shape edges, then as two unfilled outline paths (top and bottom edges) through the same filter, simulating a pen line drawn over a wash. **Blend mode:** `multiply` on the fill group so overlapping bands darken naturally, like layered ink on paper. **Labels** are placed at the widest point of each band where the full text fits within the chart bounds. A paper-toned halo stroke sits behind the ink text to lift it off the background. 3c:T1e7a,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Ink palette ─────────────────────────────────────────── const palette = [ "#b5243a", // deep crimson "#1a6e63", // dark teal "#c4692a", // burnt sienna "#2a5275", // prussian blue "#4a8fa8", // cerulean "#b8960c", // dark gold "#5c8a7a", // muted jade "#3d6b35" // forest green ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); const lineGen = (yKey) => d3 .line() .x((d) => x(d.date)) .y((d) => y(d[yKey])) .curve(d3.curveBumpX); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f5f0e8"); const defs = svg.append("defs"); // ── Brush stroke filter (shared) ────────────────────────── const filter = defs .append("filter") .attr("id", "brush") .attr("x", "-5%") .attr("y", "-10%") .attr("width", "110%") .attr("height", "120%"); filter .append("feTurbulence") .attr("type", "turbulence") .attr("baseFrequency", "0.02 0.08") .attr("numOctaves", 3) .attr("seed", 5) .attr("result", "noise"); filter .append("feDisplacementMap") .attr("in", "SourceGraphic") .attr("in2", "noise") .attr("scale", 5) .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("result", "displaced"); filter .append("feGaussianBlur") .attr("in", "displaced") .attr("stdDeviation", "0.6"); // ── Chart clip ──────────────────────────────────────────── defs .append("clipPath") .attr("id", "chart-clip") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartGroup = svg.append("g").attr("clip-path", "url(#chart-clip)"); // ── Fixed draw order: largest average value at bottom ───── const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); // ── 1. Fill layer (multiply blend, brush texture) ───────── const fillGroup = chartGroup.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); fillGroup .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.7) .attr("stroke", "none") .attr("filter", "url(#brush)") .attr("d", area); } // ── 2. Outline layer (black pen, on top of fills) ───────── const outlineGroup = chartGroup.append("g"); for (const cat of drawOrder) { const fullData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); // Top edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "#1a1a1a") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr("filter", "url(#brush)") .attr("d", lineGen("y1")(fullData)); // Bottom edge outlineGroup .append("path") .datum(fullData) .attr("fill", "none") .attr("stroke", "#1a1a1a") .attr("stroke-width", 0.8) .attr("opacity", 0.5) .attr("filter", "url(#brush)") .attr("d", lineGen("y0")(fullData)); } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null; let bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); // Paper halo svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f5f0e8") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); // Ink text svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#1a1a1a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#888") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }3d:T6ae,## Stacked Area Bump Chart — Bristle Stroke Style A fixed-order stacked area chart rendered to simulate ink painted with a bristle brush on washi paper. Each band is built up from multiple rendering passes that together create the appearance of fibrous, textured brushwork. **Rendering layers, bottom to top:** 1. **Ink wash fill** — each band rendered twice through a per-category `fractalNoise` filter. The first pass uses a vertical opacity gradient (transparent at edges, opaque at centre) to simulate ink density. A second darker pass adds weight to the centre. The noise filter has unique frequency and seed per category so no two bands have the same bristle texture. 2. **Bristle lines** — 7 fine parallel strokes run along each band at evenly spaced vertical positions, displaced by the same fractal filter. These simulate individual bristles of a loaded brush, giving the fill a fibrous, directional quality. 3. **Ink splatter** — 40 small dots per category scattered near band edges using a seeded random function, simulating ink flicking off a loaded brush at the stroke boundaries. 4. **Pen outlines** — each band edge is drawn twice: a thick soft stroke (ink pooling) and a thin precise stroke (pen line), both filtered. Together they read as a pen line drawn over the painted wash. **Filters** use `fractalNoise` with a high vertical frequency and low horizontal frequency so the noise texture runs *along* the stroke direction, not randomly across it. `feMorphology erode` thins the edges, simulating bristles running dry at the tips. **Background** is warm washi paper `#f2ede3`. `multiply` blend mode on fills means overlapping bands darken naturally like layered ink washes.3e:T2ecd,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Deep ink palette ────────────────────────────────────── const palette = [ "#8B1A2A", // sumi crimson "#0D4F47", // deep teal "#A84B1F", // burnt sienna "#1B3A52", // prussian blue "#2E6B82", // cerulean ink "#7A6108", // ochre "#3A5E52", // jade "#1E4020" // forest ink ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const area = d3 .area() .x((d) => x(d.date)) .y0((d) => y(d.y0)) .y1((d) => y(d.y1)) .curve(d3.curveBumpX); const mkLine = (data, yKey) => d3 .line() .x((d) => x(d.date)) .y((d) => y(d[yKey])) .curve(d3.curveBumpX)(data); // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); // warm washi paper const defs = svg.append("defs"); // ── Chart clip ──────────────────────────────────────────── defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); // ── Per-category brush filters ──────────────────────────── categories.forEach((cat, i) => { const f = defs .append("filter") .attr("id", `f${i}`) .attr("x", "-8%") .attr("y", "-15%") .attr("width", "116%") .attr("height", "130%") .attr("color-interpolation-filters", "sRGB"); // Fractal noise — fibrous bristle texture along stroke axis f.append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", `${0.008 + i * 0.001} ${0.2 + i * 0.015}`) .attr("numOctaves", 6) .attr("seed", i * 13 + 7) .attr("result", "noise"); // Displace — dry brush edge breakup f.append("feDisplacementMap") .attr("in", "SourceGraphic") .attr("in2", "noise") .attr("scale", 10) .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("result", "disp"); // Blur — ink spreading into paper fibre f.append("feGaussianBlur") .attr("in", "disp") .attr("stdDeviation", "0.9") .attr("result", "blurred"); // Erode — thins bristle tips like brush running dry f.append("feMorphology") .attr("in", "blurred") .attr("operator", "erode") .attr("radius", "0.4") .attr("result", "eroded"); f.append("feComposite") .attr("in", "eroded") .attr("in2", "SourceGraphic") .attr("operator", "over"); }); // ── Ink density gradients — dark centre, fading edges ───── categories.forEach((cat, i) => { const grad = defs .append("linearGradient") .attr("id", `g${i}`) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); grad .append("stop") .attr("offset", "0%") .attr("stop-color", color(cat)) .attr("stop-opacity", 0.15); grad .append("stop") .attr("offset", "25%") .attr("stop-color", color(cat)) .attr("stop-opacity", 0.8); grad .append("stop") .attr("offset", "50%") .attr("stop-color", color(cat)) .attr("stop-opacity", 1.0); grad .append("stop") .attr("offset", "75%") .attr("stop-color", color(cat)) .attr("stop-opacity", 0.8); grad .append("stop") .attr("offset", "100%") .attr("stop-color", color(cat)) .attr("stop-opacity", 0.15); }); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── 1. FILL LAYER — ink wash ────────────────────────────── const fillG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const pathData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); // Gradient fill — lighter at edges, dense in centre fillG .append("path") .datum(pathData) .attr("fill", `url(#g${ci})`) .attr("opacity", 0.92) .attr("stroke", "none") .attr("filter", `url(#f${ci})`) .attr("d", area); // Second darker pass for ink density in centre fillG .append("path") .datum(pathData) .attr("fill", color(cat)) .attr("opacity", 0.2) .attr("stroke", "none") .attr("filter", `url(#f${ci})`) .attr("d", area); } // ── 2. BRISTLE LINES — parallel fibres along stroke ─────── const bristleG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const nLines = 7; for (let b = 1; b < nLines; b++) { const t = b / nLines; const bristleData = dates.map((date) => ({ date, yv: y0[cat][date] + (y1[cat][date] - y0[cat][date]) * t })); bristleG .append("path") .datum(bristleData) .attr("fill", "none") .attr("stroke", color(cat)) .attr("stroke-width", 0.35) .attr("opacity", 0.3) .attr("filter", `url(#f${ci})`) .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d.yv)) .curve(d3.curveBumpX)(bristleData) ); } } // ── 3. INK SPLATTER — dots near band edges ──────────────── const splatterG = chartG.append("g").style("mix-blend-mode", "multiply"); const rng = (seed) => { // simple seeded random let s = seed; return () => { s = (s * 16807 + 0) % 2147483647; return (s - 1) / 2147483646; }; }; for (const cat of drawOrder) { const ci = categories.indexOf(cat); const rand = rng(ci * 1234 + 5678); const nDots = 40; for (let d = 0; d < nDots; d++) { const dateIdx = Math.floor(rand() * (dates.length - 1)); const date0 = dates[dateIdx]; const date1 = dates[dateIdx + 1] ?? date0; const t = rand(); const xPos = x(date0) + (x(date1) - x(date0)) * t; // Dot near top or bottom edge const edge = rand() > 0.5 ? y1[cat][date0] : y0[cat][date0]; const scatter = (rand() - 0.5) * 12; const yPos = y(edge) + scatter; const r = rand() * 1.8 + 0.3; splatterG .append("circle") .attr("cx", xPos) .attr("cy", yPos) .attr("r", r) .attr("fill", color(cat)) .attr("opacity", rand() * 0.4 + 0.1); } } // ── 4. BLACK PEN OUTLINES ───────────────────────────────── const outlineG = chartG.append("g"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const fullData = dates.map((date) => ({ date, y0: y0[cat][date], y1: y1[cat][date] })); for (const yKey of ["y1", "y0"]) { // Thick outer — ink pooling at edge outlineG .append("path") .attr("fill", "none") .attr("stroke", "#0a0a0a") .attr("stroke-width", 1.8) .attr("opacity", 0.15) .attr("filter", `url(#f${ci})`) .attr("d", mkLine(fullData, yKey)); // Thin inner — precise pen line outlineG .append("path") .attr("fill", "none") .attr("stroke", "#0a0a0a") .attr("stroke-width", 0.5) .attr("opacity", 0.5) .attr("filter", `url(#f${ci})`) .attr("d", mkLine(fullData, yKey)); } } // ── 5. LABELS ───────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null; let bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); // Paper halo svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f2ede3") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); // Ink text svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#0a0a0a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }3f:T6a7,## Stacked Area Bump Chart — Bristle Strand Style A fixed-order stacked area chart where each band is built entirely from individual brush strands — there are no filled path shapes at all. The band shape emerges from the accumulation of many overlapping thin lines, exactly like a brush loaded with ink. **Core rendering principle:** Instead of drawing a filled `` per band, each category is drawn as 55 individual strand paths sampled at 120 x-positions between date ticks. The strands are distributed across the band using a Box-Muller gaussian transform so they cluster densely at the centre and thin out toward the edges — replicating the natural ink density of a loaded brush stroke. **Per-strand properties:** - **Position** — gaussian-distributed between top and bottom band edges, more strands near the centre - **Opacity** — falls off as a power curve from centre to edge `(1 - distFromCentre)^2.5` - **Width** — thicker at centre, hairline at edge - **Wiggle** — each strand has its own seeded correlated random walk (small amplitude, damped) so strands are individually irregular but don't drift far from their position **Edge darkening** — two additional strands at `3%` and `97%` of band height with higher opacity simulate ink pooling at the brush stroke boundary. **Ink splatter** — 25 small dots per category near band edges, seeded per category for reproducibility. **Key difference from filter-based approaches:** no SVG filters are used for the main rendering. The texture emerges from geometry — many paths — rather than pixel-level displacement. This produces a more genuinely fibrous, directional quality that filter-based approaches cannot match.40:T2951,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); // ── Ink palette ─────────────────────────────────────────── const palette = [ "#8B1A2A", "#0D4F47", "#A84B1F", "#1B3A52", "#2E6B82", "#7A6108", "#3A5E52", "#1E4020" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); // ── Seeded RNG ──────────────────────────────────────────── const makeRng = (seed) => { let s = seed; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; // ── Dense x sample points (not just date ticks) ─────────── // Interpolate many x positions between dates for smooth strands const nSamples = 120; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); // map x back to date domain for interpolation const dateVal = x.invert(xVal); return { xVal, dateVal }; }); // Interpolate y0/y1 at any date for a category using linear interp between known dates const interpY = (cat, dateVal, yArr) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return yArr[cat][dates[0]]; if (i1 >= dates.length) return yArr[cat][dates[dates.length - 1]]; const d0 = dates[i1 - 1], d1 = dates[i1]; const t = (dateVal - d0) / (d1 - d0); return yArr[cat][d0] * (1 - t) + yArr[cat][d1] * t; }; // curveBumpX-style smooth interpolation using the same cubic basis // We approximate by sampling the d3 area path — instead just use linear // interp between dates which is close enough for strand placement // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); const defs = svg.append("defs"); // Chart clip defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); // Slight blur filter for ink bleed — applied to whole strand group const blurF = defs .append("filter") .attr("id", "ink") .attr("x", "-2%") .attr("y", "-2%") .attr("width", "104%") .attr("height", "104%"); blurF .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "0.4"); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Draw each category as many bristle strands ──────────── for (const cat of drawOrder) { const ci = categories.indexOf(cat); const rand = makeRng(ci * 9999 + 1234); const col = color(cat); const catG = chartG.append("g").style("mix-blend-mode", "multiply"); // Number of strands — more = denser, more opaque centre const nStrands = 55; for (let s = 0; s < nStrands; s++) { // t: position within the band, 0=bottom edge, 1=top edge // Distribute strands with gaussian-like density — more in centre const u = rand(); // uniform 0..1 // Box-Muller for gaussian, clamped to 0..1 const u2 = rand(); const gauss = Math.sqrt(-2 * Math.log(Math.max(u, 0.0001))) * Math.cos(2 * Math.PI * u2); const t = Math.max(0.02, Math.min(0.98, 0.5 + gauss * 0.18)); // Opacity: highest near centre (t≈0.5), near zero at edges const distFromCentre = Math.abs(t - 0.5) * 2; // 0=centre, 1=edge const opacity = Math.pow(1 - distFromCentre, 2.5) * 0.28 + 0.02; // Strand width: thicker near centre const sw = (1 - distFromCentre) * 1.8 + 0.3; // Build strand path by sampling interpolated y at each x point // Add slight random waviness per strand (bristle wiggle) const strandRng = makeRng(ci * 1000 + s * 37); let wiggle = 0; const points = xs.map(({ xVal, dateVal }) => { const lo = y(interpY(cat, dateVal, y0)); const hi = y(interpY(cat, dateVal, y1)); // pixel position within band const baseY = hi + (lo - hi) * t; // bristle wiggle: random walk, small amplitude wiggle += (strandRng() - 0.5) * 1.2; wiggle *= 0.85; // dampen so it doesn't drift too far return [xVal, baseY + wiggle]; }); // Build path string directly for performance const d = "M " + points.map((p) => p.join(",")).join(" L "); catG .append("path") .attr("d", d) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("opacity", opacity); } // ── Ink edge darkening — a few dark strands at the edges ── for (const edge of [0.03, 0.97]) { const edgeRng = makeRng(ci * 555 + (edge > 0.5 ? 1 : 0)); let wiggle = 0; const points = xs.map(({ xVal, dateVal }) => { const lo = y(interpY(cat, dateVal, y0)); const hi = y(interpY(cat, dateVal, y1)); const baseY = hi + (lo - hi) * edge; wiggle += (edgeRng() - 0.5) * 0.8; wiggle *= 0.9; return [xVal, baseY + wiggle]; }); catG .append("path") .attr("d", "M " + points.map((p) => p.join(",")).join(" L ")) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", 0.5) .attr("stroke-linecap", "round") .attr("opacity", 0.6); } // ── Ink splatter near edges ─────────────────────────────── const splatterRng = makeRng(ci * 7777); for (let d = 0; d < 25; d++) { const si = Math.floor(splatterRng() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = xs[si]; const lo = y(interpY(cat, dateVal, y0)); const hi = y(interpY(cat, dateVal, y1)); const onTop = splatterRng() > 0.5; const edge = onTop ? hi : lo; const scatter = (splatterRng() - 0.5) * 14; catG .append("circle") .attr("cx", xVal + (splatterRng() - 0.5) * 8) .attr("cy", edge + scatter) .attr("r", splatterRng() * 1.8 + 0.2) .attr("fill", col) .attr("opacity", splatterRng() * 0.35 + 0.05); } } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null; let bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f2ede3") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#0a0a0a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }41:T6e0,## Stacked Area Bump Chart — Advanced Bristle Strand Style An evolution of the bristle strand approach with more sophisticated strand behaviour. Each band is built from 80 individual strands sampled at 200 x-positions, giving smoother curves and more naturalistic ink texture than the simpler version. **Advances over the previous bristle style:** - **Correlated random walk with velocity** — each strand's wiggle has momentum (`wiggleVel`) that is damped each step, so strands curve smoothly rather than jittering. Wiggle amplitude scales with band thickness so wide bands have more expressive strands and narrow bands stay tight. - **Dry brush breaks** — each strand has 0–2 random gaps where the path lifts (`M` command), simulating bristles running out of ink mid-stroke. Gap positions and lengths are randomised per strand. - **Tapered starts and ends** — strands begin and end at random x offsets (not all starting at the left edge), and opacity fades in/out over 8% of their length, so the stroke has a natural ragged beginning and end. - **Ink pooling strands** — 4 very thick (`stroke-width: 6`), very transparent (`opacity: 0.06`) strands near each band edge simulate ink accumulating at the boundary of a brush stroke, a characteristic of calligraphic brush technique. - **200 x-samples** — higher resolution than the 120-sample version, producing smoother strand curves that follow the band shape more faithfully through the bump transitions. **Gaussian distribution** uses Box-Muller transform for true gaussian strand placement rather than a clamped approximation, giving more natural density falloff at band edges. **No SVG filters** — all texture is geometric, produced entirely by strand geometry and opacity accumulation.42:T2ca9,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#8B1A2A", "#0D4F47", "#A84B1F", "#1B3A52", "#2E6B82", "#7A6108", "#3A5E52", "#1E4020" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); // ── Seeded RNG ──────────────────────────────────────────── const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; // ── Dense x samples ─────────────────────────────────────── const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); // ── Linear interpolation of y0/y1 at any date ──────────── const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; const t = (dateVal - d0) / (d1 - d0); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Draw each category ──────────────────────────────────── for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const catG = chartG.append("g").style("mix-blend-mode", "multiply"); const nStrands = 80; for (let s = 0; s < nStrands; s++) { const rand = makeRng(ci * 10000 + s * 137 + 42); // Position within band using gaussian — dense centre, sparse edges const u1 = Math.max(1e-6, rand()); const u2 = rand(); const g = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); const t = Math.max(0.01, Math.min(0.99, 0.5 + g * 0.22)); // Distance from centre — drives opacity and width const dist = Math.abs(t - 0.5) * 2; // 0=centre, 1=edge // Strand base opacity — tapers at edges const baseOpacity = Math.pow(1 - dist, 3) * 0.55 + 0.02; // Stroke width — thick at centre, hairline at edge const sw = Math.pow(1 - dist, 2) * 3.5 + 0.2; // Random taper offsets — strand starts and ends at random x const xStart = rand() * 0.25; // 0..0.25 of total width const xEnd = 1 - rand() * 0.25; // 0.75..1.0 // Wiggle state — correlated random walk let wiggle = (rand() - 0.5) * 4; let wiggleVel = 0; // Dry brush: random break points const nBreaks = Math.floor(rand() * 3); // 0-2 breaks const breakPoints = d3.range(nBreaks).map(() => rand()); let pathD = ""; let inStroke = false; let inBreak = false; let breakEnd = 0; xs.forEach(({ xVal, dateVal, t: xt }, idx) => { // Skip before xStart / after xEnd if (xt < xStart || xt > xEnd) { inStroke = false; return; } // Handle dry brush breaks if (!inBreak && breakPoints.some((bp) => Math.abs(xt - bp) < 0.015)) { inBreak = true; breakEnd = xt + rand() * 0.04 + 0.01; inStroke = false; } if (inBreak && xt > breakEnd) inBreak = false; if (inBreak) { inStroke = false; return; } const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; // pixel height of band (lo > hi in SVG) // Wiggle amplitude scales with band thickness — wider band = more wander const wiggleAmp = bandH * 0.35; // Correlated random walk for wiggle wiggleVel += (rand() - 0.5) * wiggleAmp * 0.15; wiggleVel *= 0.82; // dampen velocity wiggle += wiggleVel; // Pull back toward 0 so strands don't drift out of band wiggle *= 0.93; // Clamp to band const maxW = bandH * 0.45; wiggle = Math.max(-maxW, Math.min(maxW, wiggle)); const baseY = hi + bandH * t; const py = baseY + wiggle; // Taper opacity at strand start/end const taperIn = Math.min(1, (xt - xStart) / 0.08); const taperOut = Math.min(1, (xEnd - xt) / 0.08); const taper = Math.min(taperIn, taperOut); if (!inStroke) { pathD += ` M ${xVal},${py}`; inStroke = true; } else { pathD += ` L ${xVal},${py}`; } }); if (!pathD) continue; catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("opacity", baseOpacity); } // ── Ink pooling: a few very thick, very transparent strands ── for (let p = 0; p < 4; p++) { const rand = makeRng(ci * 5555 + p * 999); const tPos = p < 2 ? rand() * 0.15 : 1 - rand() * 0.15; // near edges let wg = 0, wgV = 0; let pathD = ""; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; wgV += (rand() - 0.5) * bandH * 0.08; wgV *= 0.8; wg += wgV; wg = Math.max(-bandH * 0.1, Math.min(bandH * 0.1, wg)); const py = hi + bandH * tPos + wg; pathD += pathD ? ` L ${xVal},${py}` : ` M ${xVal},${py}`; }); catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", 6) .attr("stroke-linecap", "round") .attr("opacity", 0.06); } // ── Splatter ────────────────────────────────────────────── const sr = makeRng(ci * 8888); for (let d = 0; d < 20; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; const scatter = (sr() - 0.5) * 20; catG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 12) .attr("cy", edge + scatter) .attr("r", sr() * 2 + 0.3) .attr("fill", col) .attr("opacity", sr() * 0.25 + 0.05); } } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null, bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f2ede3") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#0a0a0a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }43:T692,## Stacked Area Bump Chart — Wobbly Background + Bristle Strands Combines two rendering layers: a soft wobbly filled background per band, and the advanced bristle strand system drawn on top. The background gives each band a solid colour presence while the strands add fibrous texture and depth. **Background layer — wobbly filled shapes:** Each band's background is built from multiple overlapping filled paths, all with slight correlated random walk offsets on their top and bottom edges: - **Solid base fill** — the full band area at low opacity (0.18) with a very small wobble (±5px), giving the band its base colour - **3 wobble variation layers** — additional filled shapes with different amplitudes (6, 10, 8px) and opacities, slightly offset from the true edge, creating a soft irregular boundary like paint pooling at the stroke edge - **3 edge fringe layers per edge** — thin filled bands just outside the top and bottom edges, with increasing amplitude and decreasing opacity outward, simulating ink bleeding beyond the stroke boundary onto the paper **Strand layer** — identical to the Advanced Bristle Strand style: 80 gaussian-distributed strands with correlated wiggle, dry brush breaks, random taper, ink pooling strands, and splatter. **Rendering order:** background fills draw first under `multiply` blend, strands draw on top under their own `multiply` group, so strands darken and enrich the background rather than obscuring it. **Visual result:** the background provides colour mass and soft edges, the strands provide directionality and fibre — together they read more like a loaded brush dragged across paper than either layer does alone.44:T3f34,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#8B1A2A", "#0D4F47", "#A84B1F", "#1B3A52", "#2E6B82", "#7A6108", "#3A5E52", "#1E4020" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); // ── Seeded RNG ──────────────────────────────────────────── const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; // ── Dense x samples ─────────────────────────────────────── const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); // ── Linear interpolation of y0/y1 at any date ──────────── const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; const t = (dateVal - d0) / (d1 - d0); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Background fill per band — wobbly edges ─────────────── const bgG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const rand = makeRng(ci * 3333 + 111); // ── Wobbly edge paths ───────────────────────────────── // Generate a smooth random offset for top and bottom edges // using a correlated random walk, then draw the filled shape const nWobbles = 3; // number of wobble layers per edge for (let w = 0; w < nWobbles; w++) { const randW = makeRng(ci * 4444 + w * 777); const isTop = w < 2; // first two wobbles on top edge, last on bottom const wAmp = [6, 10, 8][w]; // wobble amplitude in px const wOpacity = [0.12, 0.08, 0.1][w]; // Build top and bottom wobbly edge as correlated random walks let wobTop = 0, wobTopV = 0; let wobBot = 0, wobBotV = 0; const topPts = [], botPts = []; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); wobTopV += (randW() - 0.5) * wAmp * 0.3; wobTopV *= 0.75; wobTop += wobTopV; wobTop = Math.max(-wAmp, Math.min(wAmp, wobTop)); wobBotV += (randW() - 0.5) * wAmp * 0.3; wobBotV *= 0.75; wobBot += wobBotV; wobBot = Math.max(-wAmp, Math.min(wAmp, wobBot)); topPts.push([xVal, hi + wobTop + (w === 1 ? wAmp * 1.5 : 0)]); botPts.push([xVal, lo + wobBot - (w === 2 ? wAmp * 1.5 : 0)]); }); // Area between wobbly top and bottom const allPts = topPts.concat([...botPts].reverse()); const pathStr = "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; bgG .append("path") .attr("d", pathStr) .attr("fill", col) .attr("opacity", wOpacity) .attr("stroke", "none"); } // ── Solid background fill — full band, low opacity ───── const topPts = [], botPts = []; let wT = 0, wTV = 0, wB = 0, wBV = 0; const solidRand = makeRng(ci * 2222); xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); wTV += (solidRand() - 0.5) * 3; wTV *= 0.8; wT += wTV; wT = Math.max(-5, Math.min(5, wT)); wBV += (solidRand() - 0.5) * 3; wBV *= 0.8; wB += wBV; wB = Math.max(-5, Math.min(5, wB)); topPts.push([xVal, hi + wT]); botPts.push([xVal, lo + wB]); }); const solidPath = "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; bgG .append("path") .attr("d", solidPath) .attr("fill", col) .attr("opacity", 0.18) .attr("stroke", "none"); // ── Wobbly edge bands — top and bottom independently ─── for (const edgeKey of ["top", "bot"]) { const nEdgeLayers = 3; for (let e = 0; e < nEdgeLayers; e++) { const eRand = makeRng( ci * 6666 + e * 333 + (edgeKey === "top" ? 0 : 500) ); const amp = 4 + e * 5; const opa = 0.1 - e * 0.02; let w1 = 0, w1V = 0, w2 = 0, w2V = 0; const pts1 = [], pts2 = []; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const edge = edgeKey === "top" ? hi : lo; w1V += (eRand() - 0.5) * amp * 0.25; w1V *= 0.78; w1 += w1V; w1 = Math.max(-amp, Math.min(amp, w1)); w2V += (eRand() - 0.5) * amp * 0.25; w2V *= 0.78; w2 += w2V; w2 = Math.max(-amp * 1.5, Math.min(amp * 1.5, w2)); // Two nearby wobbly lines define a thin transparent band pts1.push([xVal, edge + w1]); pts2.push([ xVal, edge + w2 + (edgeKey === "top" ? -amp : amp) * (e + 1) ]); }); const ePath = "M " + pts1.map((p) => p.join(",")).join(" L ") + " L " + [...pts2] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; bgG .append("path") .attr("d", ePath) .attr("fill", col) .attr("opacity", opa) .attr("stroke", "none"); } } } // ── Draw each category ──────────────────────────────────── for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const catG = chartG.append("g").style("mix-blend-mode", "multiply"); const nStrands = 80; for (let s = 0; s < nStrands; s++) { const rand = makeRng(ci * 10000 + s * 137 + 42); // Position within band using gaussian — dense centre, sparse edges const u1 = Math.max(1e-6, rand()); const u2 = rand(); const g = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); const t = Math.max(0.01, Math.min(0.99, 0.5 + g * 0.22)); // Distance from centre — drives opacity and width const dist = Math.abs(t - 0.5) * 2; // 0=centre, 1=edge // Strand base opacity — tapers at edges const baseOpacity = Math.pow(1 - dist, 3) * 0.55 + 0.02; // Stroke width — thick at centre, hairline at edge const sw = Math.pow(1 - dist, 2) * 3.5 + 0.2; // Random taper offsets — strand starts and ends at random x const xStart = rand() * 0.25; // 0..0.25 of total width const xEnd = 1 - rand() * 0.25; // 0.75..1.0 // Wiggle state — correlated random walk let wiggle = (rand() - 0.5) * 4; let wiggleVel = 0; // Dry brush: random break points const nBreaks = Math.floor(rand() * 3); // 0-2 breaks const breakPoints = d3.range(nBreaks).map(() => rand()); let pathD = ""; let inStroke = false; let inBreak = false; let breakEnd = 0; xs.forEach(({ xVal, dateVal, t: xt }, idx) => { // Skip before xStart / after xEnd if (xt < xStart || xt > xEnd) { inStroke = false; return; } // Handle dry brush breaks if (!inBreak && breakPoints.some((bp) => Math.abs(xt - bp) < 0.015)) { inBreak = true; breakEnd = xt + rand() * 0.04 + 0.01; inStroke = false; } if (inBreak && xt > breakEnd) inBreak = false; if (inBreak) { inStroke = false; return; } const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; // pixel height of band (lo > hi in SVG) // Wiggle amplitude scales with band thickness — wider band = more wander const wiggleAmp = bandH * 0.35; // Correlated random walk for wiggle wiggleVel += (rand() - 0.5) * wiggleAmp * 0.15; wiggleVel *= 0.82; // dampen velocity wiggle += wiggleVel; // Pull back toward 0 so strands don't drift out of band wiggle *= 0.93; // Clamp to band const maxW = bandH * 0.45; wiggle = Math.max(-maxW, Math.min(maxW, wiggle)); const baseY = hi + bandH * t; const py = baseY + wiggle; // Taper opacity at strand start/end const taperIn = Math.min(1, (xt - xStart) / 0.08); const taperOut = Math.min(1, (xEnd - xt) / 0.08); const taper = Math.min(taperIn, taperOut); if (!inStroke) { pathD += ` M ${xVal},${py}`; inStroke = true; } else { pathD += ` L ${xVal},${py}`; } }); if (!pathD) continue; catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("opacity", baseOpacity); } // ── Ink pooling: a few very thick, very transparent strands ── for (let p = 0; p < 4; p++) { const rand = makeRng(ci * 5555 + p * 999); const tPos = p < 2 ? rand() * 0.15 : 1 - rand() * 0.15; // near edges let wg = 0, wgV = 0; let pathD = ""; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; wgV += (rand() - 0.5) * bandH * 0.08; wgV *= 0.8; wg += wgV; wg = Math.max(-bandH * 0.1, Math.min(bandH * 0.1, wg)); const py = hi + bandH * tPos + wg; pathD += pathD ? ` L ${xVal},${py}` : ` M ${xVal},${py}`; }); catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", 6) .attr("stroke-linecap", "round") .attr("opacity", 0.06); } // ── Splatter ────────────────────────────────────────────── const sr = makeRng(ci * 8888); for (let d = 0; d < 20; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; const scatter = (sr() - 0.5) * 20; catG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 12) .attr("cy", edge + scatter) .attr("r", sr() * 2 + 0.3) .attr("fill", col) .attr("opacity", sr() * 0.25 + 0.05); } } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null, bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f2ede3") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#0a0a0a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }45:T632,## Stacked Area Bump Chart — Tuned Wobbly Background + Tight Bristle Strands A refined version of the combined background-and-strand approach, with the strand parameters tightened to produce a more controlled, steady-hand brushwork quality. **Key tuning changes from the previous version:** - **Background opacity raised to 0.6** — the solid fill is stronger and more present, so the band reads clearly as a coloured region before the strands are added. Edge fringe layers are reduced to tighter amplitudes (2–6px) so the bleed is subtle rather than diffuse. - **Strand gaussian spread tightened** — standard deviation reduced from 0.22 to 0.15, so strands cluster more tightly around the band centre and the edges are sparser and more delicate. - **Wiggle amplitude reduced** — from 35% to 12% of band height, and max clamp from 45% to 20%. Strands follow the band shape more faithfully rather than wandering, suggesting a steadier brush hand. - **Taper range shortened** — strands now start and end within the middle 76% of the chart width (was 50%), so fewer strands have very short or very long tapers. - **Ink pooling strands thinner** — stroke-width reduced from 6 to 5, opacity from 0.06 to 0.05, keeping the edge darkening subtle. **Visual character:** compared to the more expressive previous version, this reads as a more disciplined brushwork — precise, controlled strokes over a solid colour ground, closer to technical illustration than gestural painting. Better suited to data where readability of individual bands matters as much as aesthetic texture.46:T3128,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#8B1A2A", "#0D4F47", "#A84B1F", "#1B3A52", "#2E6B82", "#7A6108", "#3A5E52", "#1E4020" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; const t = (dateVal - d0) / (d1 - d0); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Background fill per band ────────────────────────────── const bgG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const solidRand = makeRng(ci * 2222); // Solid fill — slight wobble, stronger opacity const topPts = [], botPts = []; let wT = 0, wTV = 0, wB = 0, wBV = 0; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); wTV += (solidRand() - 0.5) * 2; wTV *= 0.8; wT += wTV; wT = Math.max(-4, Math.min(4, wT)); wBV += (solidRand() - 0.5) * 2; wBV *= 0.8; wB += wBV; wB = Math.max(-4, Math.min(4, wB)); topPts.push([xVal, hi + wT]); botPts.push([xVal, lo + wB]); }); bgG .append("path") .attr( "d", "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z" ) .attr("fill", col) .attr("opacity", 0.6) .attr("stroke", "none"); // Wobbly edge bands — top and bottom independently for (const edgeKey of ["top", "bot"]) { const nEdgeLayers = 3; for (let e = 0; e < nEdgeLayers; e++) { const eRand = makeRng( ci * 6666 + e * 333 + (edgeKey === "top" ? 0 : 500) ); const amp = 2 + e * 2; // tighter than before const opa = 0.07 - e * 0.015; let w1 = 0, w1V = 0, w2 = 0, w2V = 0; const pts1 = [], pts2 = []; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const edge = edgeKey === "top" ? hi : lo; w1V += (eRand() - 0.5) * amp * 0.25; w1V *= 0.78; w1 += w1V; w1 = Math.max(-amp, Math.min(amp, w1)); w2V += (eRand() - 0.5) * amp * 0.25; w2V *= 0.78; w2 += w2V; w2 = Math.max(-amp * 1.5, Math.min(amp * 1.5, w2)); pts1.push([xVal, edge + w1]); pts2.push([ xVal, edge + w2 + (edgeKey === "top" ? -amp : amp) * (e + 1) ]); }); bgG .append("path") .attr( "d", "M " + pts1.map((p) => p.join(",")).join(" L ") + " L " + [...pts2] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z" ) .attr("fill", col) .attr("opacity", opa) .attr("stroke", "none"); } } } // ── Bristle strands ─────────────────────────────────────── for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const catG = chartG.append("g").style("mix-blend-mode", "multiply"); const nStrands = 80; for (let s = 0; s < nStrands; s++) { const rand = makeRng(ci * 10000 + s * 137 + 42); // Tighter gaussian — strands cluster more in centre const u1 = Math.max(1e-6, rand()); const u2 = rand(); const g = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); const t = Math.max(0.01, Math.min(0.99, 0.5 + g * 0.15)); // was 0.22 const dist = Math.abs(t - 0.5) * 2; const baseOpacity = Math.pow(1 - dist, 3) * 0.55 + 0.02; const sw = Math.pow(1 - dist, 2) * 3.5 + 0.2; // Shorter taper range const xStart = rand() * 0.12; // was 0.25 const xEnd = 1 - rand() * 0.12; let wiggle = (rand() - 0.5) * 2; let wiggleVel = 0; const nBreaks = Math.floor(rand() * 3); const breakPoints = d3.range(nBreaks).map(() => rand()); let pathD = "", inStroke = false, inBreak = false, breakEnd = 0; xs.forEach(({ xVal, dateVal, t: xt }) => { if (xt < xStart || xt > xEnd) { inStroke = false; return; } if (!inBreak && breakPoints.some((bp) => Math.abs(xt - bp) < 0.015)) { inBreak = true; breakEnd = xt + rand() * 0.04 + 0.01; inStroke = false; } if (inBreak && xt > breakEnd) inBreak = false; if (inBreak) { inStroke = false; return; } const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; // Tighter wiggle amplitude const wiggleAmp = bandH * 0.12; // was 0.35 wiggleVel += (rand() - 0.5) * wiggleAmp * 0.15; wiggleVel *= 0.82; wiggle += wiggleVel; wiggle *= 0.93; const maxW = bandH * 0.2; // was 0.45 wiggle = Math.max(-maxW, Math.min(maxW, wiggle)); const py = hi + bandH * t + wiggle; if (!inStroke) { pathD += ` M ${xVal},${py}`; inStroke = true; } else pathD += ` L ${xVal},${py}`; }); if (!pathD) continue; catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("opacity", baseOpacity); } // Ink pooling — thick transparent strands near edges for (let p = 0; p < 4; p++) { const rand = makeRng(ci * 5555 + p * 999); const tPos = p < 2 ? rand() * 0.12 : 1 - rand() * 0.12; let wg = 0, wgV = 0; let pathD = ""; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; wgV += (rand() - 0.5) * bandH * 0.05; wgV *= 0.8; wg += wgV; wg = Math.max(-bandH * 0.08, Math.min(bandH * 0.08, wg)); const py = hi + bandH * tPos + wg; pathD += pathD ? ` L ${xVal},${py}` : ` M ${xVal},${py}`; }); catG .append("path") .attr("d", pathD) .attr("fill", "none") .attr("stroke", col) .attr("stroke-width", 5) .attr("stroke-linecap", "round") .attr("opacity", 0.05); } // Splatter const sr = makeRng(ci * 8888); for (let d = 0; d < 20; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; const scatter = (sr() - 0.5) * 14; catG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 10) .attr("cy", edge + scatter) .attr("r", sr() * 1.8 + 0.3) .attr("fill", col) .attr("opacity", sr() * 0.2 + 0.04); } } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.6; let bestDate = null, bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 13, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.4 ); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "none") .attr("stroke", "#f2ede3") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.9) .attr("pointer-events", "none") .text(cat); svg .append("text") .attr("x", labelX) .attr("y", labelY + fitSize * 0.35) .attr("text-anchor", "middle") .attr("font-family", "Georgia, serif") .attr("font-weight", "700") .attr("font-size", fitSize) .attr("fill", "#0a0a0a") .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }47:T74a,## Stacked Area Bump Chart — Layered Wobble Areas Replaces bristle strands with 18 overlapping filled area layers per band. Instead of individual line strands, the band emerges from the accumulation of many thin transparent filled shapes, each covering a random slice of the band at a slightly different vertical position. The overall effect resembles watercolour washes laid over each other rather than brushwork. **Layer generation:** each of the 18 layers has a gaussian-distributed centre position within the band and a random half-width (5–50% of band height), so layers range from full-band washes to thin slivers. Opacity scales with both centrality and width — layers near the band centre and covering more of the band are more opaque, naturally producing a denser, darker centre and transparent edges. **Edge wobble:** each layer's top and bottom edges have independent correlated random walks with amplitude scaling at 8% of band height, giving each filled shape slightly irregular boundaries without dramatic distortion. **Smoothstep interpolation:** `interpBand` now uses `t = t²(3 - 2t)` smoothstep rather than linear interpolation between date knots, matching the easing of `d3.curveBumpX`. This eliminates the sharp corners at date boundaries that appeared in earlier versions when strands were sampled at many intermediate x positions. **Labels** are rotated to follow the band's slope at the chosen date, using the angle between the previous and next date midpoints. A blurred ink-bleed layer in the band's colour sits behind dark ink text, both rendered as ``-adjacent `` elements in a rotated group. **Key difference from strand approaches:** no individual line paths at all — the texture is entirely produced by the accumulation of filled shapes, giving a softer, more painterly quality with less directional fibre.48:T31a6,{ const width = 900; const height = 500; const margin = { top: 30, right: 30, bottom: 35, left: 30 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#8B1A2A", "#0D4F47", "#A84B1F", "#1B3A52", "#2E6B82", "#7A6108", "#3A5E52", "#1E4020" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); // ── Smooth band interpolation matching curveBumpX ───────── // curveBumpX uses a cubic smoothstep between control points // with zero tangent at each knot — replicate that here const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; // t in 0..1 between the two dates let t = (dateVal - d0) / (d1 - d0); // Smoothstep — matches the cubic easing of curveBumpX t = t * t * (3 - 2 * t); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Georgia, serif") .style("background", "#f2ede3"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Background fill per band ────────────────────────────── const bgG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const solidRand = makeRng(ci * 2222); // Solid base fill with slight wobble const topPts = [], botPts = []; let wT = 0, wTV = 0, wB = 0, wBV = 0; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); wTV += (solidRand() - 0.5) * 2; wTV *= 0.8; wT += wTV; wT = Math.max(-4, Math.min(4, wT)); wBV += (solidRand() - 0.5) * 2; wBV *= 0.8; wB += wBV; wB = Math.max(-4, Math.min(4, wB)); topPts.push([xVal, hi + wT]); botPts.push([xVal, lo + wB]); }); bgG .append("path") .attr( "d", "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z" ) .attr("fill", col) .attr("opacity", 0.28) .attr("stroke", "none"); // Wobbly edge bands — top and bottom independently for (const edgeKey of ["top", "bot"]) { for (let e = 0; e < 3; e++) { const eRand = makeRng( ci * 6666 + e * 333 + (edgeKey === "top" ? 0 : 500) ); const amp = 2 + e * 2; const opa = 0.07 - e * 0.015; let w1 = 0, w1V = 0, w2 = 0, w2V = 0; const pts1 = [], pts2 = []; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const edge = edgeKey === "top" ? hi : lo; w1V += (eRand() - 0.5) * amp * 0.25; w1V *= 0.78; w1 += w1V; w1 = Math.max(-amp, Math.min(amp, w1)); w2V += (eRand() - 0.5) * amp * 0.25; w2V *= 0.78; w2 += w2V; w2 = Math.max(-amp * 1.5, Math.min(amp * 1.5, w2)); pts1.push([xVal, edge + w1]); pts2.push([ xVal, edge + w2 + (edgeKey === "top" ? -amp : amp) * (e + 1) ]); }); bgG .append("path") .attr( "d", "M " + pts1.map((p) => p.join(",")).join(" L ") + " L " + [...pts2] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z" ) .attr("fill", col) .attr("opacity", opa) .attr("stroke", "none"); } } } // ── Layered wobble areas ────────────────────────────────── for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const catG = chartG.append("g").style("mix-blend-mode", "multiply"); const nLayers = 18; for (let l = 0; l < nLayers; l++) { const rand = makeRng(ci * 10000 + l * 317 + 99); // Gaussian centre position within band const u1 = Math.max(1e-6, rand()); const u2 = rand(); const g = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); const tCentre = Math.max(0.05, Math.min(0.95, 0.5 + g * 0.25)); // Half-width — varies from thin sliver to nearly full band const halfWidth = rand() * 0.45 + 0.05; const tLo = Math.max(0.0, tCentre - halfWidth); const tHi = Math.min(1.0, tCentre + halfWidth); // Opacity — wider and more central = more opaque const distFromCentre = Math.abs(tCentre - 0.5) * 2; const opacity = (Math.pow(1 - distFromCentre, 1.5) * 0.18 + 0.03) * (halfWidth * 2); // Independent wobble for top and bottom edges let w1 = 0, w1V = 0, w2 = 0, w2V = 0; const topPts = [], botPts = []; xs.forEach(({ xVal, dateVal }) => { const { lo, hi } = interpBand(cat, dateVal); const bandH = lo - hi; const wAmp = bandH * 0.08; w1V += (rand() - 0.5) * wAmp * 0.3; w1V *= 0.8; w1 += w1V; w1 = Math.max(-wAmp, Math.min(wAmp, w1)); w2V += (rand() - 0.5) * wAmp * 0.3; w2V *= 0.8; w2 += w2V; w2 = Math.max(-wAmp, Math.min(wAmp, w2)); topPts.push([xVal, hi + bandH * tLo + w1]); botPts.push([xVal, hi + bandH * tHi + w2]); }); catG .append("path") .attr( "d", "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z" ) .attr("fill", col) .attr("stroke", "none") .attr("opacity", opacity); } // Splatter const sr = makeRng(ci * 8888); for (let d = 0; d < 20; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; const scatter = (sr() - 0.5) * 14; catG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 10) .attr("cy", edge + scatter) .attr("r", sr() * 1.8 + 0.3) .attr("fill", col) .attr("opacity", sr() * 0.2 + 0.04); } } // ── Labels ──────────────────────────────────────────────── for (const cat of categories) { const fontSize = 12; const textWidth = cat.length * fontSize * 0.62; let bestDate = null, bestScore = -Infinity; for (const date of dates) { const bPx = y(y0[cat][date]) - y(y1[cat][date]); const xPos = x(date); if ( bPx < fontSize + 6 || xPos - textWidth / 2 < margin.left || xPos + textWidth / 2 > width - margin.right ) continue; if (bPx > bestScore) { bestScore = bPx; bestDate = date; } } if (bestDate === null) continue; const ci = categories.indexOf(cat); const col = color(cat); const labelX = x(bestDate); const labelY = y(midOf(cat, bestDate)); const fitSize = Math.min( 14, (y(y0[cat][bestDate]) - y(y1[cat][bestDate])) * 0.38 ); // ── Rotation — follow band slope at bestDate ────────── const iDate = dates.indexOf(bestDate); const dPrev = dates[Math.max(0, iDate - 1)]; const dNext = dates[Math.min(dates.length - 1, iDate + 1)]; const angle = (Math.atan2( y(midOf(cat, dNext)) - y(midOf(cat, dPrev)), x(dNext) - x(dPrev) ) * 180) / Math.PI; const clampedAngle = Math.max(-18, Math.min(18, angle)); // ── Blur filter for ink bleed ───────────────────────── const blurId = `blur-${ci}`; if (!defs.select(`#${blurId}`).node()) { const bf = defs .append("filter") .attr("id", blurId) .attr("x", "-40%") .attr("y", "-80%") .attr("width", "180%") .attr("height", "260%"); bf.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "3.5"); } const labelG = svg .append("g") .attr( "transform", `translate(${labelX},${labelY}) rotate(${clampedAngle})` ); // Ink bleed — band color, blurred, bleeds into paper labelG .append("text") .attr("y", 0) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", fitSize * 1.2) .attr("fill", col) .attr("opacity", 0.5) .attr("filter", `url(#${blurId})`) .attr("pointer-events", "none") .text(cat); // Dark ink text on top labelG .append("text") .attr("y", 0) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", fitSize) .attr("fill", "#120800") .attr("opacity", 0.88) .attr("pointer-events", "none") .text(cat); } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a7060") .attr("font-size", 11) .attr("font-family", "Georgia, serif") ); return svg.node(); }49:T812,## Stacked Area Bump Chart — Watercolour Wash + Ink Linework The watercolour rendering approach: bands are built from multiple overlapping filled wash layers through a bloom filter, with thin ink lines tracing each band edge on top. This is the core visual style from which the more elaborate versions in this notebook were developed. **Wash layers — 4 concentric passes per band:** Each band is painted from outside in, building up opacity toward the centre like successive watercolour washes: - **Base wash** — full band extent, very light (0.12 opacity), through bloom filter - **Second wash** — inset 8% from each edge, slightly more opaque (0.14) - **Third wash** — inset 18%, more opaque (0.16) - **Centre wash** — inset 32%, most opaque (0.18), no filter so it reads as the densest pigment deposit **Bloom filter** (`wc{i}`) — per category `feGaussianBlur` → `feMorphology erode` → `feComposite` chain. The blur spreads the edge, erode pulls it back in, leaving a slightly irregular boundary that reads as dried pigment. **Edge bloom** — 3 thin filled bands just outside each edge at decreasing opacity (0.14 → 0.08 → 0.05), simulating pigment concentrating at the drying watercolour boundary. **Random drying patches** — 5 irregular wash patches per category at random vertical positions within the band, simulating uneven drying. **Ink linework** — top and bottom edges traced as thin dark lines (`#1a0a00`, 0.7px) with a slight wobble. A third randomly placed dashed line inside the band suggests form beneath the wash. **Splatter** — dark ink dots near band edges rather than coloured splatter, distinguishing this from the bristle-strand versions. **Labels** use SVG `` so text follows the actual curve of the mid-path between the ink edge lines. Two passes — a blurred colour bleed and a dark ink text — render the label as if written onto the painted surface. **Edge value labels** show the data value at first and last date, with de-collided placement and a short connector tick to the band edge.4a:T3d2c,{ const width = 900; const height = 500; const margin = { top: 40, right: 70, bottom: 35, left: 70 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#c0392b", "#16a085", "#d35400", "#2471a3", "#7fb3d3", "#ca8a04", "#1e8449", "#6c3483" ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; let t = (dateVal - d0) / (d1 - d0); t = t * t * (3 - 2 * t); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; const makePath = (topPts, botPts) => "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; const wobblePath = (cat, edgeFn, amp, seed) => { const rand = makeRng(seed); let w = 0, wV = 0; return xs.map(({ xVal, dateVal }) => { const band = interpBand(cat, dateVal); wV += (rand() - 0.5) * amp * 0.3; wV *= 0.78; w += wV; w = Math.max(-amp, Math.min(amp, w)); return [xVal, edgeFn(band) + w]; }); }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Palatino, Georgia, serif") .style("background", "#f5f0e8"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); categories.forEach((cat, i) => { const f = defs .append("filter") .attr("id", `wc${i}`) .attr("x", "-8%") .attr("y", "-15%") .attr("width", "116%") .attr("height", "130%"); f.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.5") .attr("result", "blur"); f.append("feMorphology") .attr("in", "blur") .attr("operator", "erode") .attr("radius", "0.8") .attr("result", "eroded"); f.append("feComposite") .attr("in", "SourceGraphic") .attr("in2", "eroded") .attr("operator", "over"); }); // ── Watercolour washes ──────────────────────────────────── const washG = chartG.append("g").style("mix-blend-mode", "multiply"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi, 3, ci * 1111), wobblePath(cat, (b) => b.lo, 3, ci * 2222) ) ) .attr("fill", col) .attr("opacity", 0.12) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.08, 4, ci * 3333), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.08, 4, ci * 4444) ) ) .attr("fill", col) .attr("opacity", 0.14) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.18, 3, ci * 5555), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.18, 3, ci * 6666) ) ) .attr("fill", col) .attr("opacity", 0.16) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.32, 2, ci * 7777), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.32, 2, ci * 8888) ) ) .attr("fill", col) .attr("opacity", 0.18) .attr("stroke", "none"); for (let e = 0; e < 3; e++) { const eAmp = 2 + e * 1.5, eOpa = 0.14 - e * 0.03; washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi - e * 2, eAmp, ci * 9000 + e * 100), wobblePath(cat, (b) => b.hi + 4 + e * 3, eAmp, ci * 9001 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.lo - 4 - e * 3, eAmp, ci * 9100 + e * 100), wobblePath(cat, (b) => b.lo + e * 2, eAmp, ci * 9101 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); } const patchRng = makeRng(ci * 3141 + 59); for (let p = 0; p < 5; p++) { const tLo = patchRng() * 0.6; const tHi = tLo + patchRng() * 0.35 + 0.05; washG .append("path") .attr( "d", makePath( wobblePath( cat, (b) => b.hi + (b.lo - b.hi) * tLo, 4, ci * 1000 + p ), wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * tHi, 4, ci * 2000 + p) ) ) .attr("fill", col) .attr("opacity", patchRng() * 0.1 + 0.04) .attr("stroke", "none"); } } // ── Ink linework ────────────────────────────────────────── const inkG = chartG.append("g"); const mkLine = (pts) => "M " + pts.map((p) => p.join(",")).join(" L "); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const innerRng = makeRng(ci * 5050); const tInner = 0.2 + innerRng() * 0.6; inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.hi, 2.5, ci * 1313))) .attr("fill", "none") .attr("stroke", "#1a0a00") .attr("stroke-width", 0.7) .attr("opacity", 0.35) .attr("stroke-linecap", "round"); inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.lo, 2.5, ci * 1414))) .attr("fill", "none") .attr("stroke", "#1a0a00") .attr("stroke-width", 0.7) .attr("opacity", 0.35) .attr("stroke-linecap", "round"); inkG .append("path") .attr( "d", mkLine( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * tInner, 3, ci * 5151) ) ) .attr("fill", "none") .attr("stroke", "#1a0a00") .attr("stroke-width", 0.3) .attr("stroke-dasharray", `${4 + innerRng() * 8},${6 + innerRng() * 12}`) .attr("opacity", 0.15) .attr("stroke-linecap", "round"); } // ── Ink splatter ────────────────────────────────────────── const splatterG = chartG.append("g"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const sr = makeRng(ci * 8888); for (let d = 0; d < 25; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; splatterG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 12) .attr("cy", edge + (sr() - 0.5) * 18) .attr("r", sr() * 1.5 + 0.2) .attr("fill", "#1a0a00") .attr("opacity", sr() * 0.18 + 0.03); } } // ── Inline series labels via textPath ───────────────────── for (const cat of categories) { const ci = categories.indexOf(cat); const col = color(cat); const fontSize = 11; const topWobble = wobblePath(cat, (b) => b.hi, 2.5, ci * 1313); const botWobble = wobblePath(cat, (b) => b.lo, 2.5, ci * 1414); const midPath = topWobble.map(([tx, ty], i) => ({ xVal: tx, mid: (ty + botWobble[i][1]) / 2, bandH: Math.abs(botWobble[i][1] - ty) })); let bestIdx = -1, bestScore = -Infinity; midPath.forEach(({ xVal, bandH }, idx) => { const textW = cat.length * fontSize * 0.62; if ( bandH < fontSize + 4 || xVal - textW / 2 < margin.left || xVal + textW / 2 > width - margin.right ) return; if (bandH > bestScore) { bestScore = bandH; bestIdx = idx; } }); if (bestIdx < 0) continue; const fitSize = Math.min(13, bestScore * 0.38); const textW = cat.length * fitSize * 0.62; const xCentre = midPath[bestIdx].xVal; const xStart = xCentre - textW / 2 - 10; const xEnd = xCentre + textW / 2 + 10; const subPath = midPath.filter((p) => p.xVal >= xStart && p.xVal <= xEnd); if (subPath.length < 2) continue; const pathStr = "M " + subPath.map((p) => `${p.xVal},${p.mid}`).join(" L "); const pathId = `lp-${ci}`; defs.append("path").attr("id", pathId).attr("d", pathStr); const blurId = `blur-${ci}`; if (!defs.select(`#${blurId}`).node()) { const bf = defs .append("filter") .attr("id", blurId) .attr("x", "-40%") .attr("y", "-80%") .attr("width", "180%") .attr("height", "260%"); bf.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "3.5"); } // Ink bleed layer svg .append("text") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", fitSize * 1.2) .attr("fill", col) .attr("opacity", 0.45) .attr("filter", `url(#${blurId})`) .attr("pointer-events", "none") .append("textPath") .attr("href", `#${pathId}`) .attr("startOffset", "50%") .attr("text-anchor", "middle") .text(cat); // Dark ink text svg .append("text") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", fitSize) .attr("fill", "#1a0a00") .attr("opacity", 0.65) .attr("pointer-events", "none") .append("textPath") .attr("href", `#${pathId}`) .attr("startOffset", "50%") .attr("text-anchor", "middle") .text(cat); } // ── Start / end value labels with collision detection ────── const minGap = 11; const xOffAmp = 8; const tickLen = 12; const buildLabels = (side) => { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; return [...categories] .map((cat) => { const ci = categories.indexOf(cat); const rng = makeRng(ci * (isLeft ? 1111 : 2222) + 777); return { cat, val: valueOf(cat, dateRef), yPos: y(midOf(cat, dateRef)), xOff: (rng() - 0.5) * xOffAmp, ci }; }) .sort((a, b) => d3.ascending(a.yPos, b.yPos)); }; const deCollide = (labels) => { let moved = true; let iter = 0; while (moved && iter < 200) { moved = false; iter++; for (let i = 1; i < labels.length; i++) { const gap = labels[i].yPos - labels[i - 1].yPos; if (gap < minGap) { const push = (minGap - gap) / 2; labels[i - 1].yPos -= push; labels[i].yPos += push; moved = true; } } } return labels; }; const edgeLabelG = svg.append("g"); for (const side of ["left", "right"]) { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; const labels = deCollide(buildLabels(side)); for (const { cat, val, yPos, xOff, ci } of labels) { const col = color(cat); const xEdge = isLeft ? margin.left : width - margin.right; const xTick = isLeft ? xEdge - tickLen : xEdge + tickLen; const xLabel = isLeft ? xTick - 4 : xTick + 4; const yBand = y(midOf(cat, dateRef)); const yLabel = yPos + xOff * 0.3; edgeLabelG .append("line") .attr("x1", xEdge) .attr("y1", yBand) .attr("x2", xTick) .attr("y2", yLabel) .attr("stroke", col) .attr("stroke-width", 0.7) .attr("stroke-linecap", "round") .attr("opacity", 0.45); edgeLabelG .append("text") .attr("x", xLabel) .attr("y", yLabel + 3) .attr("text-anchor", isLeft ? "end" : "start") .attr("font-family", "Palatino, Georgia, serif") .attr("font-size", 10) .attr("font-weight", "600") .attr("fill", col) .attr("opacity", 0.82) .text(val); } } // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#7a6a55") .attr("font-size", 11) .attr("font-family", "Palatino, Georgia, serif") ); return svg.node(); }4b:T679,## Stacked Area Bump Chart — Watercolour Wash, Scratch Texture + Annotations Extends the watercolour wash approach with a full chart layout: retro scratch texture background, watercolour legend swatches, de-collided edge value labels, and hand-drawn ink annotations marking key rank crossovers and trends. **Scratch texture** — 620 procedurally generated white marks drawn beneath all chart content: long curved bezier scratches, short speckle lines, and dot clusters, all seeded for reproducibility. **Watercolour washes** — four concentric filled layers per band built outside-in through a per-category bloom filter (`feGaussianBlur` → `feMorphology erode` → `feComposite`). Vertical opacity gradient per layer — transparent at edges, dense at centre. Three edge bloom fringes and five random drying patches per band. `screen` blend mode. **White ink edge lines** — soft white wobble lines separate adjacent bands rather than dark outlines. **Splatter** — coloured ink dots near band edges, 25 per category, seeded per category. **Legend** — watercolour blob swatches in the top margin, each a procedurally generated wobbly polygon through blur and bloom filters with a thin ink outline. **Edge value labels** — left and right margin labels in category colour, de-collided with a capped iterative push algorithm (max 200 passes), with short organic connector ticks. **Annotations** — hand-drawn ink style: variable-pressure ellipse loops around crossover zones, curved bezier arrows with arrowheads, and rotated italic text. Crossover events detected automatically by comparing band midpoint positions between adjacent dates.4c:T538a,{ const width = 900; const height = 500; const margin = { top: 100, right: 80, bottom: 35, left: 70 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#C8392B", // deep red — R&B/Hip-Hop "#E8871A", // burnt amber — Pop "#4A8B3F", // olive green — Rock "#2471A3", // denim blue — Country "#D4A017", // mustard yellow — Latin "#7B3F8C", // grape purple — Electronic/Dance "#01928B", // retro teal — Classical/Jazz "#C0541A" // terracotta — K-Pop ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; let t = (dateVal - d0) / (d1 - d0); t = t * t * (3 - 2 * t); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; const makePath = (topPts, botPts) => "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; const wobblePath = (cat, edgeFn, amp, seed) => { const rand = makeRng(seed); let w = 0, wV = 0; return xs.map(({ xVal, dateVal }) => { const band = interpBand(cat, dateVal); wV += (rand() - 0.5) * amp * 0.3; wV *= 0.78; w += wV; w = Math.max(-amp, Math.min(amp, w)); return [xVal, edgeFn(band) + w]; }); }; // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Palatino, Georgia, serif") .style("border-radius", "16px"); const defs = svg.append("defs"); // ── Background — warm aged cream ────────────────────────── svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fcfaf7"); // ── Scratches — white irregular marks over whole surface ── const scratchG = svg.append("g"); const scrRng = makeRng(42); // Long thin diagonal scratches for (let i = 0; i < 120; i++) { const sx = scrRng() * width; const sy = scrRng() * height; const len = scrRng() * 80 + 10; const ang = (scrRng() - 0.5) * 0.6; // mostly horizontal const ex = sx + Math.cos(ang) * len; const ey = sy + Math.sin(ang) * len; const opa = scrRng() * 0.18 + 0.04; const sw = scrRng() * 1.2 + 0.2; // Slight curve via quadratic bezier const mx = (sx + ex) / 2 + (scrRng() - 0.5) * 8; const my = (sy + ey) / 2 + (scrRng() - 0.5) * 8; scratchG .append("path") .attr("d", `M${sx},${sy} Q${mx},${my} ${ex},${ey}`) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("opacity", opa); } // Short speckle scratches for (let i = 0; i < 200; i++) { const sx = scrRng() * width; const sy = scrRng() * height; const len = scrRng() * 12 + 2; const ang = scrRng() * Math.PI * 2; scratchG .append("line") .attr("x1", sx) .attr("y1", sy) .attr("x2", sx + Math.cos(ang) * len) .attr("y2", sy + Math.sin(ang) * len) .attr("stroke", "#ffffff") .attr("stroke-width", scrRng() * 0.8 + 0.2) .attr("stroke-linecap", "round") .attr("opacity", scrRng() * 0.22 + 0.03); } // Speckle dots for (let i = 0; i < 300; i++) { scratchG .append("circle") .attr("cx", scrRng() * width) .attr("cy", scrRng() * height) .attr("r", scrRng() * 1.5 + 0.2) .attr("fill", "#ffffff") .attr("opacity", scrRng() * 0.2 + 0.02); } // Chart clip defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Per-category gradient + bloom filter ────────────────── categories.forEach((cat, i) => { const col = color(cat); const gidBB = `bandgrad-bb-${i}`; const grad = defs .append("linearGradient") .attr("id", gidBB) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); grad .append("stop") .attr("offset", "0%") .attr("stop-color", col) .attr("stop-opacity", 0.05); grad .append("stop") .attr("offset", "25%") .attr("stop-color", col) .attr("stop-opacity", 0.6); grad .append("stop") .attr("offset", "50%") .attr("stop-color", col) .attr("stop-opacity", 0.85); grad .append("stop") .attr("offset", "75%") .attr("stop-color", col) .attr("stop-opacity", 0.6); grad .append("stop") .attr("offset", "100%") .attr("stop-color", col) .attr("stop-opacity", 0.05); const f = defs .append("filter") .attr("id", `wc${i}`) .attr("x", "-8%") .attr("y", "-15%") .attr("width", "116%") .attr("height", "130%"); f.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.5") .attr("result", "blur"); f.append("feMorphology") .attr("in", "blur") .attr("operator", "erode") .attr("radius", "0.8") .attr("result", "eroded"); f.append("feComposite") .attr("in", "SourceGraphic") .attr("in2", "eroded") .attr("operator", "over"); }); // ── Watercolour washes ──────────────────────────────────── const washG = chartG.append("g").style("mix-blend-mode", "screen"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const gid = `bandgrad-bb-${ci}`; washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi, 3, ci * 1111), wobblePath(cat, (b) => b.lo, 3, ci * 2222) ) ) .attr("fill", `url(#${gid})`) .attr("opacity", 0.7) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.08, 4, ci * 3333), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.08, 4, ci * 4444) ) ) .attr("fill", `url(#${gid})`) .attr("opacity", 0.65) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.18, 3, ci * 5555), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.18, 3, ci * 6666) ) ) .attr("fill", col) .attr("opacity", 0.45) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.32, 2, ci * 7777), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.32, 2, ci * 8888) ) ) .attr("fill", col) .attr("opacity", 0.4) .attr("stroke", "none"); for (let e = 0; e < 3; e++) { const eAmp = 2 + e * 1.5, eOpa = 0.32 - e * 0.07; washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi - e * 2, eAmp, ci * 9000 + e * 100), wobblePath(cat, (b) => b.hi + 4 + e * 3, eAmp, ci * 9001 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.lo - 4 - e * 3, eAmp, ci * 9100 + e * 100), wobblePath(cat, (b) => b.lo + e * 2, eAmp, ci * 9101 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); } const patchRng = makeRng(ci * 3141 + 59); for (let p = 0; p < 5; p++) { const tLo = patchRng() * 0.6; const tHi = tLo + patchRng() * 0.35 + 0.05; washG .append("path") .attr( "d", makePath( wobblePath( cat, (b) => b.hi + (b.lo - b.hi) * tLo, 4, ci * 1000 + p ), wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * tHi, 4, ci * 2000 + p) ) ) .attr("fill", col) .attr("opacity", patchRng() * 0.22 + 0.1) .attr("stroke", "none"); } } // ── Ink linework ────────────────────────────────────────── const inkG = chartG.append("g"); const mkLine = (pts) => "M " + pts.map((p) => p.join(",")).join(" L "); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const innerRng = makeRng(ci * 5050); const tInner = 0.2 + innerRng() * 0.6; inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.hi, 1.5, ci * 1313))) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("opacity", 0.3) .attr("stroke-linecap", "round"); inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.lo, 1.5, ci * 1414))) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("opacity", 0.3) .attr("stroke-linecap", "round"); } // ── Ink splatter ────────────────────────────────────────── const splatterG = chartG.append("g"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const sr = makeRng(ci * 8888); for (let d = 0; d < 25; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; splatterG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 12) .attr("cy", edge + (sr() - 0.5) * 18) .attr("r", sr() * 1.5 + 0.2) .attr("fill", col) .attr("opacity", sr() * 0.18 + 0.04); } } // ── Edge value labels ───────────────────────────────────── const minGap = 13; const xOffAmp = 6; const tickLen = 10; const buildLabels = (side) => { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; return [...categories] .map((cat) => { const ci = categories.indexOf(cat); const rng = makeRng(ci * (isLeft ? 1111 : 2222) + 777); return { cat, val: valueOf(cat, dateRef), yPos: y(midOf(cat, dateRef)), xOff: (rng() - 0.5) * xOffAmp, ci }; }) .sort((a, b) => d3.ascending(a.yPos, b.yPos)); }; const deCollide = (labels) => { let moved = true; let iter = 0; while (moved && iter < 200) { moved = false; iter++; for (let i = 1; i < labels.length; i++) { const gap = labels[i].yPos - labels[i - 1].yPos; if (gap < minGap) { const push = (minGap - gap) / 2; labels[i - 1].yPos -= push; labels[i].yPos += push; moved = true; } } } return labels; }; const edgeLabelG = svg.append("g"); for (const side of ["left", "right"]) { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; const labels = deCollide(buildLabels(side)); for (const { cat, val, yPos, xOff, ci } of labels) { const col = color(cat); const xEdge = isLeft ? margin.left : width - margin.right; const xTick = isLeft ? xEdge - tickLen : xEdge + tickLen; const xLabel = isLeft ? xTick - 4 : xTick + 4; const yBand = y(midOf(cat, dateRef)); const yLabel = yPos + xOff * 0.3; edgeLabelG .append("line") .attr("x1", xEdge) .attr("y1", yBand) .attr("x2", xTick) .attr("y2", yLabel) .attr("stroke", col) .attr("stroke-width", 0.7) .attr("stroke-linecap", "round") .attr("opacity", 0.6); edgeLabelG .append("text") .attr("x", xLabel) .attr("y", yLabel + 3) .attr("text-anchor", isLeft ? "end" : "start") .attr("font-family", "Palatino, Georgia, serif") .attr("font-size", 10) .attr("font-weight", "600") .attr("fill", col) .attr("opacity", 0.88) .text(`$${val}M`); } } // ── Legend — watercolour blob swatches ──────────────────── // Each swatch is a tiny wobbly filled shape, like a dab of paint const legendG = svg.append("g"); const nCats = categories.length; const legItemW = (width - margin.left - margin.right) / nCats; const legY = margin.top - 18; const legBlurId = "leg-blur"; const lbf = defs .append("filter") .attr("id", legBlurId) .attr("x", "-50%") .attr("y", "-80%") .attr("width", "200%") .attr("height", "260%"); lbf .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.8"); // Bloom effect for swatches const legWcId = "leg-wc"; const lwc = defs .append("filter") .attr("id", legWcId) .attr("x", "-15%") .attr("y", "-30%") .attr("width", "130%") .attr("height", "160%"); lwc .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.2") .attr("result", "blur"); lwc .append("feMorphology") .attr("in", "blur") .attr("operator", "erode") .attr("radius", "0.5") .attr("result", "eroded"); lwc .append("feComposite") .attr("in", "SourceGraphic") .attr("in2", "eroded") .attr("operator", "over"); categories.forEach((cat, i) => { const col = color(cat); const legX = margin.left + i * legItemW + legItemW / 2; const rng = makeRng(i * 555 + 77); // Build a tiny wobbly blob path — like a small brush dab const blobW = 10, blobH = 7; const nPts = 8; const blobPts = d3.range(nPts).map((j) => { const ang = (j / nPts) * Math.PI * 2; const rx = blobW / 2 + (rng() - 0.5) * 3; const ry = blobH / 2 + (rng() - 0.5) * 2; return [ legX + Math.cos(ang) * rx + (rng() - 0.5) * 1.5, legY - 10 + Math.sin(ang) * ry + (rng() - 0.5) * 1.5 ]; }); const blobPath = "M " + blobPts.map((p) => p.join(",")).join(" L ") + " Z"; // Blurred wash layer legendG .append("path") .attr("d", blobPath) .attr("fill", col) .attr("opacity", 0.35) .attr("filter", `url(#${legBlurId})`); // Solid bloom layer legendG .append("path") .attr("d", blobPath) .attr("fill", col) .attr("opacity", 0.75) .attr("filter", `url(#${legWcId})`); // Thin ink outline on blob legendG .append("path") .attr("d", blobPath) .attr("fill", "none") .attr("stroke", "#2a1005") .attr("stroke-width", 0.4) .attr("opacity", 0.3); // Label text — dark ink, small legendG .append("text") .attr("x", legX) .attr("y", legY + 2) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 8.5) .attr("font-weight", "600") .attr("fill", col) .attr("opacity", 0.9) .text(cat); }); // ── Title ───────────────────────────────────────────────── const title = "Music Streaming by Genre"; const subtitle = "US Estimated Streaming Revenue 2010 – 2023 · $M"; const titleX = width / 2; const titleY = 32; const titleSize = 24; const titleCol = "#3a1f08"; svg .append("text") .attr("x", titleX) .attr("y", titleY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", titleSize) .attr("fill", "none") .attr("stroke", titleCol) .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.4) .attr("pointer-events", "none") .text(title); svg .append("text") .attr("x", titleX) .attr("y", titleY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", titleSize) .attr("fill", titleCol) .attr("opacity", 0.88) .attr("pointer-events", "none") .text(title); // ── Subtitle ────────────────────────────────────────────── const subBlurId = "sub-blur"; const sbf = defs .append("filter") .attr("id", subBlurId) .attr("x", "-20%") .attr("y", "-80%") .attr("width", "140%") .attr("height", "260%"); sbf .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "2"); const subCol = "#6b3a18"; const subY = titleY + 18; svg .append("text") .attr("x", titleX) .attr("y", subY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 10) .attr("fill", subCol) .attr("opacity", 0.35) .attr("filter", `url(#${subBlurId})`) .attr("pointer-events", "none") .text(subtitle); svg .append("text") .attr("x", titleX) .attr("y", subY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 10) .attr("fill", subCol) .attr("opacity", 0.72) .attr("pointer-events", "none") .text(subtitle); // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#4a2a0a") .attr("font-size", 11) .attr("font-family", "Palatino, Georgia, serif") ); return svg.node(); }4d:T7d6,## Stacked Area Bump Chart — Watercolour Wash, Scratch Texture, Hand-Drawn Annotations Extends the watercolour wash approach with a full production layout: scratch texture background, top-margin legend, de-collided edge value labels, title and subtitle, and automatically detected hand-drawn ink annotations. **Scratch texture** — 620 procedurally generated white marks drawn beneath all chart content: 120 long curved bezier scratches, 200 short speckle lines, and 300 dot clusters. All seeded for reproducibility. **Watercolour washes** — four concentric filled layers per band built outside-in through a per-category bloom filter (`feGaussianBlur` → `feMorphology erode` → `feComposite`). Vertical opacity gradient per layer — transparent at edges, dense at centre. Three edge bloom fringes and five random drying patches per band. `screen` blend mode. **White ink edge lines** — soft white wobble lines (2px, 0.3 opacity) separate adjacent bands. **Splatter** — coloured ink dots near band edges, 25 per category, seeded per category. **Legend** — watercolour blob swatches in the top margin. Each swatch is a procedurally generated 8-point polygon through blur and bloom filters with a thin ink outline. **Edge value labels** — left and right margin labels in category colour, de-collided with a capped iterative push algorithm (max 200 passes), with short organic connector ticks. **Hand-drawn annotations** — automatically detected from data: top 3 rank crossovers by combined band size, fastest growing category, biggest decliner. Each crossover marked with a variable-pressure ellipse loop (smooth mathematically clean ellipse with overshoot, optional double pass, gaussian pressure peak) and a variable-pressure bezier arrow pointing from text in clear space into the crossover zone. Annotation text is bold, slightly rotated, with per-line x-jitter for a hand-written feel. **Title** rendered as stroke outline + filled layer. Subtitle with blurred ink-bleed pass.4e:T7440,{ const width = 900; const height = 500; const margin = { top: 100, right: 80, bottom: 35, left: 70 }; const categories = [...new Set(data.map((d) => d.category))]; const dates = [...new Set(data.map((d) => d.date))].sort(d3.ascending); const valueOf = (cat, date) => data.find((d) => d.category === cat && d.date === date)?.value ?? 0; const orderAt = {}; for (const date of dates) { orderAt[date] = [...categories].sort((a, b) => d3.descending(valueOf(a, date), valueOf(b, date)) ); } const y0 = {}, y1 = {}; for (const cat of categories) { y0[cat] = {}; y1[cat] = {}; } for (const date of dates) { const total = d3.sum(categories, (c) => valueOf(c, date)); const offset = total / 2; let cum = 0; for (const cat of orderAt[date]) { const v = valueOf(cat, date); y0[cat][date] = cum - offset; y1[cat][date] = cum + v - offset; cum += v; } } const midOf = (cat, date) => (y0[cat][date] + y1[cat][date]) / 2; const x = d3 .scaleLinear() .domain(d3.extent(dates)) .range([margin.left, width - margin.right]); const maxHalf = d3.max( dates, (date) => d3.sum(categories, (c) => valueOf(c, date)) / 2 ); const y = d3 .scaleLinear() .domain([-maxHalf, maxHalf]) .range([height - margin.bottom, margin.top]); const palette = [ "#C8392B", // deep red — R&B/Hip-Hop "#E8871A", // burnt amber — Pop "#4A8B3F", // olive green — Rock "#2471A3", // denim blue — Country "#D4A017", // mustard yellow — Latin "#7B3F8C", // grape purple — Electronic/Dance "#01928B", // retro teal — Classical/Jazz "#C0541A" // terracotta — K-Pop ]; const color = d3.scaleOrdinal().domain(categories).range(palette); const avgValue = (cat) => d3.mean(dates, (date) => valueOf(cat, date)); const drawOrder = [...categories].sort((a, b) => d3.descending(avgValue(a), avgValue(b)) ); const makeRng = (seed) => { let s = seed % 2147483647; if (s <= 0) s += 2147483646; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }; const nSamples = 200; const xs = d3.range(nSamples).map((i) => { const t = i / (nSamples - 1); const xVal = margin.left + t * (width - margin.left - margin.right); const dateVal = x.invert(xVal); return { xVal, dateVal, t }; }); const interpBand = (cat, dateVal) => { const i1 = dates.findIndex((d) => d >= dateVal); if (i1 <= 0) return { lo: y(y0[cat][dates[0]]), hi: y(y1[cat][dates[0]]) }; if (i1 >= dates.length) { const last = dates[dates.length - 1]; return { lo: y(y0[cat][last]), hi: y(y1[cat][last]) }; } const d0 = dates[i1 - 1], d1 = dates[i1]; let t = (dateVal - d0) / (d1 - d0); t = t * t * (3 - 2 * t); return { lo: y(y0[cat][d0]) * (1 - t) + y(y0[cat][d1]) * t, hi: y(y1[cat][d0]) * (1 - t) + y(y1[cat][d1]) * t }; }; const makePath = (topPts, botPts) => "M " + topPts.map((p) => p.join(",")).join(" L ") + " L " + [...botPts] .reverse() .map((p) => p.join(",")) .join(" L ") + " Z"; const wobblePath = (cat, edgeFn, amp, seed) => { const rand = makeRng(seed); let w = 0, wV = 0; return xs.map(({ xVal, dateVal }) => { const band = interpBand(cat, dateVal); wV += (rand() - 0.5) * amp * 0.3; wV *= 0.78; w += wV; w = Math.max(-amp, Math.min(amp, w)); return [xVal, edgeFn(band) + w]; }); }; // ── SVG ─────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Palatino, Georgia, serif"); const defs = svg.append("defs"); // ── Background — warm aged cream ────────────────────────── svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fcfaf7"); // ── Scratches — white irregular marks over whole surface ── const scratchG = svg.append("g"); const scrRng = makeRng(42); // Long thin diagonal scratches for (let i = 0; i < 120; i++) { const sx = scrRng() * width; const sy = scrRng() * height; const len = scrRng() * 80 + 10; const ang = (scrRng() - 0.5) * 0.6; // mostly horizontal const ex = sx + Math.cos(ang) * len; const ey = sy + Math.sin(ang) * len; const opa = scrRng() * 0.18 + 0.04; const sw = scrRng() * 1.2 + 0.2; // Slight curve via quadratic bezier const mx = (sx + ex) / 2 + (scrRng() - 0.5) * 8; const my = (sy + ey) / 2 + (scrRng() - 0.5) * 8; scratchG .append("path") .attr("d", `M${sx},${sy} Q${mx},${my} ${ex},${ey}`) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", sw) .attr("stroke-linecap", "round") .attr("opacity", opa); } // Short speckle scratches for (let i = 0; i < 200; i++) { const sx = scrRng() * width; const sy = scrRng() * height; const len = scrRng() * 12 + 2; const ang = scrRng() * Math.PI * 2; scratchG .append("line") .attr("x1", sx) .attr("y1", sy) .attr("x2", sx + Math.cos(ang) * len) .attr("y2", sy + Math.sin(ang) * len) .attr("stroke", "#ffffff") .attr("stroke-width", scrRng() * 0.8 + 0.2) .attr("stroke-linecap", "round") .attr("opacity", scrRng() * 0.22 + 0.03); } // Speckle dots for (let i = 0; i < 300; i++) { scratchG .append("circle") .attr("cx", scrRng() * width) .attr("cy", scrRng() * height) .attr("r", scrRng() * 1.5 + 0.2) .attr("fill", "#ffffff") .attr("opacity", scrRng() * 0.2 + 0.02); } // Chart clip defs .append("clipPath") .attr("id", "cc") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const chartG = svg.append("g").attr("clip-path", "url(#cc)"); // ── Per-category gradient + bloom filter ────────────────── categories.forEach((cat, i) => { const col = color(cat); const gidBB = `bandgrad-bb-${i}`; const grad = defs .append("linearGradient") .attr("id", gidBB) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); grad .append("stop") .attr("offset", "0%") .attr("stop-color", col) .attr("stop-opacity", 0.05); grad .append("stop") .attr("offset", "25%") .attr("stop-color", col) .attr("stop-opacity", 0.6); grad .append("stop") .attr("offset", "50%") .attr("stop-color", col) .attr("stop-opacity", 0.85); grad .append("stop") .attr("offset", "75%") .attr("stop-color", col) .attr("stop-opacity", 0.6); grad .append("stop") .attr("offset", "100%") .attr("stop-color", col) .attr("stop-opacity", 0.05); const f = defs .append("filter") .attr("id", `wc${i}`) .attr("x", "-8%") .attr("y", "-15%") .attr("width", "116%") .attr("height", "130%"); f.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.5") .attr("result", "blur"); f.append("feMorphology") .attr("in", "blur") .attr("operator", "erode") .attr("radius", "0.8") .attr("result", "eroded"); f.append("feComposite") .attr("in", "SourceGraphic") .attr("in2", "eroded") .attr("operator", "over"); }); // ── Watercolour washes ──────────────────────────────────── const washG = chartG.append("g").style("mix-blend-mode", "screen"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const gid = `bandgrad-bb-${ci}`; washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi, 3, ci * 1111), wobblePath(cat, (b) => b.lo, 3, ci * 2222) ) ) .attr("fill", `url(#${gid})`) .attr("opacity", 0.7) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.08, 4, ci * 3333), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.08, 4, ci * 4444) ) ) .attr("fill", `url(#${gid})`) .attr("opacity", 0.65) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.18, 3, ci * 5555), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.18, 3, ci * 6666) ) ) .attr("fill", col) .attr("opacity", 0.45) .attr("stroke", "none") .attr("filter", `url(#wc${ci})`); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * 0.32, 2, ci * 7777), wobblePath(cat, (b) => b.lo - (b.lo - b.hi) * 0.32, 2, ci * 8888) ) ) .attr("fill", col) .attr("opacity", 0.4) .attr("stroke", "none"); for (let e = 0; e < 3; e++) { const eAmp = 2 + e * 1.5, eOpa = 0.32 - e * 0.07; washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.hi - e * 2, eAmp, ci * 9000 + e * 100), wobblePath(cat, (b) => b.hi + 4 + e * 3, eAmp, ci * 9001 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); washG .append("path") .attr( "d", makePath( wobblePath(cat, (b) => b.lo - 4 - e * 3, eAmp, ci * 9100 + e * 100), wobblePath(cat, (b) => b.lo + e * 2, eAmp, ci * 9101 + e * 100) ) ) .attr("fill", col) .attr("opacity", eOpa) .attr("stroke", "none"); } const patchRng = makeRng(ci * 3141 + 59); for (let p = 0; p < 5; p++) { const tLo = patchRng() * 0.6; const tHi = tLo + patchRng() * 0.35 + 0.05; washG .append("path") .attr( "d", makePath( wobblePath( cat, (b) => b.hi + (b.lo - b.hi) * tLo, 4, ci * 1000 + p ), wobblePath(cat, (b) => b.hi + (b.lo - b.hi) * tHi, 4, ci * 2000 + p) ) ) .attr("fill", col) .attr("opacity", patchRng() * 0.22 + 0.1) .attr("stroke", "none"); } } // ── Ink linework ────────────────────────────────────────── const inkG = chartG.append("g"); const mkLine = (pts) => "M " + pts.map((p) => p.join(",")).join(" L "); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const innerRng = makeRng(ci * 5050); const tInner = 0.2 + innerRng() * 0.6; inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.hi, 1.5, ci * 1313))) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("opacity", 0.3) .attr("stroke-linecap", "round"); inkG .append("path") .attr("d", mkLine(wobblePath(cat, (b) => b.lo, 1.5, ci * 1414))) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("opacity", 0.3) .attr("stroke-linecap", "round"); } // ── Ink splatter ────────────────────────────────────────── const splatterG = chartG.append("g"); for (const cat of drawOrder) { const ci = categories.indexOf(cat); const col = color(cat); const sr = makeRng(ci * 8888); for (let d = 0; d < 25; d++) { const si = Math.floor(sr() * xs.length) % xs.length; const pt = xs[si]; if (!pt) continue; const { xVal, dateVal } = pt; const { lo, hi } = interpBand(cat, dateVal); const edge = sr() > 0.5 ? hi : lo; splatterG .append("circle") .attr("cx", xVal + (sr() - 0.5) * 12) .attr("cy", edge + (sr() - 0.5) * 18) .attr("r", sr() * 1.5 + 0.2) .attr("fill", col) .attr("opacity", sr() * 0.18 + 0.04); } } // ── Edge value labels ───────────────────────────────────── const minGap = 13; const xOffAmp = 6; const tickLen = 10; const buildLabels = (side) => { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; return [...categories] .map((cat) => { const ci = categories.indexOf(cat); const rng = makeRng(ci * (isLeft ? 1111 : 2222) + 777); return { cat, val: valueOf(cat, dateRef), yPos: y(midOf(cat, dateRef)), xOff: (rng() - 0.5) * xOffAmp, ci }; }) .sort((a, b) => d3.ascending(a.yPos, b.yPos)); }; const deCollide = (labels) => { let moved = true; let iter = 0; while (moved && iter < 200) { moved = false; iter++; for (let i = 1; i < labels.length; i++) { const gap = labels[i].yPos - labels[i - 1].yPos; if (gap < minGap) { const push = (minGap - gap) / 2; labels[i - 1].yPos -= push; labels[i].yPos += push; moved = true; } } } return labels; }; const edgeLabelG = svg.append("g"); for (const side of ["left", "right"]) { const isLeft = side === "left"; const dateRef = isLeft ? dates[0] : dates[dates.length - 1]; const labels = deCollide(buildLabels(side)); for (const { cat, val, yPos, xOff, ci } of labels) { const col = color(cat); const xEdge = isLeft ? margin.left : width - margin.right; const xTick = isLeft ? xEdge - tickLen : xEdge + tickLen; const xLabel = isLeft ? xTick - 4 : xTick + 4; const yBand = y(midOf(cat, dateRef)); const yLabel = yPos + xOff * 0.3; edgeLabelG .append("line") .attr("x1", xEdge) .attr("y1", yBand) .attr("x2", xTick) .attr("y2", yLabel) .attr("stroke", col) .attr("stroke-width", 0.7) .attr("stroke-linecap", "round") .attr("opacity", 0.6); edgeLabelG .append("text") .attr("x", xLabel) .attr("y", yLabel + 3) .attr("text-anchor", isLeft ? "end" : "start") .attr("font-family", "Palatino, Georgia, serif") .attr("font-size", 10) .attr("font-weight", "600") .attr("fill", col) .attr("opacity", 0.88) .text(`$${val}M`); } } // ── Legend — watercolour blob swatches ──────────────────── // Each swatch is a tiny wobbly filled shape, like a dab of paint const legendG = svg.append("g"); const nCats = categories.length; const legItemW = (width - margin.left - margin.right) / nCats; const legY = margin.top - 18; const legBlurId = "leg-blur"; const lbf = defs .append("filter") .attr("id", legBlurId) .attr("x", "-50%") .attr("y", "-80%") .attr("width", "200%") .attr("height", "260%"); lbf .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.8"); // Bloom effect for swatches const legWcId = "leg-wc"; const lwc = defs .append("filter") .attr("id", legWcId) .attr("x", "-15%") .attr("y", "-30%") .attr("width", "130%") .attr("height", "160%"); lwc .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "1.2") .attr("result", "blur"); lwc .append("feMorphology") .attr("in", "blur") .attr("operator", "erode") .attr("radius", "0.5") .attr("result", "eroded"); lwc .append("feComposite") .attr("in", "SourceGraphic") .attr("in2", "eroded") .attr("operator", "over"); categories.forEach((cat, i) => { const col = color(cat); const legX = margin.left + i * legItemW + legItemW / 2; const rng = makeRng(i * 555 + 77); // Build a tiny wobbly blob path — like a small brush dab const blobW = 10, blobH = 7; const nPts = 8; const blobPts = d3.range(nPts).map((j) => { const ang = (j / nPts) * Math.PI * 2; const rx = blobW / 2 + (rng() - 0.5) * 3; const ry = blobH / 2 + (rng() - 0.5) * 2; return [ legX + Math.cos(ang) * rx + (rng() - 0.5) * 1.5, legY - 10 + Math.sin(ang) * ry + (rng() - 0.5) * 1.5 ]; }); const blobPath = "M " + blobPts.map((p) => p.join(",")).join(" L ") + " Z"; // Blurred wash layer legendG .append("path") .attr("d", blobPath) .attr("fill", col) .attr("opacity", 0.35) .attr("filter", `url(#${legBlurId})`); // Solid bloom layer legendG .append("path") .attr("d", blobPath) .attr("fill", col) .attr("opacity", 0.75) .attr("filter", `url(#${legWcId})`); // Thin ink outline on blob legendG .append("path") .attr("d", blobPath) .attr("fill", "none") .attr("stroke", "#2a1005") .attr("stroke-width", 0.4) .attr("opacity", 0.3); // Label text — dark ink, small legendG .append("text") .attr("x", legX) .attr("y", legY + 2) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 8.5) .attr("font-weight", "600") .attr("fill", col) .attr("opacity", 0.9) .text(cat); }); // ── Title ───────────────────────────────────────────────── const title = "Music Streaming by Genre"; const subtitle = "US Estimated Streaming Revenue 2010 – 2023 · $M"; const titleX = width / 2; const titleY = 32; const titleSize = 24; const titleCol = "#3a1f08"; svg .append("text") .attr("x", titleX) .attr("y", titleY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", titleSize) .attr("fill", "none") .attr("stroke", titleCol) .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.4) .attr("pointer-events", "none") .text(title); svg .append("text") .attr("x", titleX) .attr("y", titleY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "900") .attr("font-size", titleSize) .attr("fill", titleCol) .attr("opacity", 0.88) .attr("pointer-events", "none") .text(title); // ── Subtitle ────────────────────────────────────────────── const subBlurId = "sub-blur"; const sbf = defs .append("filter") .attr("id", subBlurId) .attr("x", "-20%") .attr("y", "-80%") .attr("width", "140%") .attr("height", "260%"); sbf .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "2"); const subCol = "#6b3a18"; const subY = titleY + 18; svg .append("text") .attr("x", titleX) .attr("y", subY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 10) .attr("fill", subCol) .attr("opacity", 0.35) .attr("filter", `url(#${subBlurId})`) .attr("pointer-events", "none") .text(subtitle); svg .append("text") .attr("x", titleX) .attr("y", subY) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-style", "italic") .attr("font-size", 10) .attr("fill", subCol) .attr("opacity", 0.72) .attr("pointer-events", "none") .text(subtitle); // ── X Axis ──────────────────────────────────────────────── svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(dates).tickFormat(d3.format("d"))) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick text") .attr("fill", "#4a2a0a") .attr("font-size", 11) .attr("font-family", "Palatino, Georgia, serif") ); // ── Annotations ─────────────────────────────────────────── // ── Annotations ─────────────────────────────────────────── const annoG = svg.append("g"); const inkCol = "#1a0800"; const wobblyArrow = (x1, y1, x2, y2, seed) => { const rng = makeRng(seed); const cx = (x1 + x2) / 2 + (rng() - 0.5) * 25; const cy = (y1 + y2) / 2 + (rng() - 0.5) * 25; const nSeg = 20; // Sample points along the quadratic bezier const pts = d3.range(nSeg + 1).map((t) => { t = t / nSeg; return [ (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * cx + t * t * x2, (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cy + t * t * y2 ]; }); // Draw as segments with variable width — pressure curve // thin → thick → thin, with small random variation for (let i = 0; i < pts.length - 1; i++) { const t = i / (pts.length - 2); const press = Math.sin(t * Math.PI); // 0→1→0 pressure curve const jitter = 1 + (rng() - 0.5) * 0.3; const sw = (0.4 + press * 1.6) * jitter; const opacity = 0.7 + press * 0.3; annoG .append("line") .attr("x1", pts[i][0]) .attr("y1", pts[i][1]) .attr("x2", pts[i + 1][0]) .attr("y2", pts[i + 1][1]) .attr("stroke", inkCol) .attr("stroke-width", sw) .attr("opacity", opacity) .attr("stroke-linecap", "round"); } // Arrowhead at end — thin, like pen lifting off paper const last = pts[pts.length - 1]; const prev = pts[pts.length - 3]; const ang = Math.atan2(last[1] - prev[1], last[0] - prev[0]); const al = 8, aw = 3; const ax1 = last[0] - al * Math.cos(ang) + aw * Math.sin(ang); const ay1 = last[1] - al * Math.sin(ang) - aw * Math.cos(ang); const ax2 = last[0] - al * Math.cos(ang) - aw * Math.sin(ang); const ay2 = last[1] - al * Math.sin(ang) + aw * Math.cos(ang); annoG .append("path") .attr("d", `M${ax1},${ay1} L${last[0]},${last[1]} L${ax2},${ay2}`) .attr("fill", "none") .attr("stroke", inkCol) .attr("stroke-width", 0.9) .attr("opacity", 0.85) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); }; const wobblyLoop = (cx, cy, rx, ry, seed) => { const rng = makeRng(seed); const nPts = 60; const rotOff = (rng() - 0.5) * 0.8; // more rotation variety const over = 0.04 + rng() * 0.18; // 4–22% overshoot, more range const under = rng() > 0.4 // sometimes starts late too ? 0.02 + rng() * 0.08 : 0; const passes = rng() > 0.65 ? 2 : 1; // 35% chance of double pass const tiltX = 1 + (rng() - 0.5) * 0.25; // slightly squash/stretch x const tiltY = 1 + (rng() - 0.5) * 0.25; // slightly squash/stretch y for (let pass = 0; pass < passes; pass++) { const passRng = makeRng(seed + pass * 999 + 1); // Each pass slightly offset — pen doesn't land same place twice const offX = pass * (passRng() - 0.5) * 5; const offY = pass * (passRng() - 0.5) * 4; // Each pass has its own overshoot const passOver = over * (0.7 + passRng() * 0.6); const startFrac = under; const endFrac = 1 + passOver; const total = nPts * (endFrac - startFrac); const pts = d3.range(Math.ceil(total) + 1).map((i) => { const t = (i / nPts + startFrac) * Math.PI * 2 + rotOff; return [ cx + Math.cos(t) * rx * tiltX + offX, cy + Math.sin(t) * ry * tiltY + offY ]; }); // Pressure peaks — vary where in the stroke pressure is highest const pressCenter = 0.35 + passRng() * 0.3; // 35–65% along stroke const pressWidth = 0.3 + passRng() * 0.3; // how quickly it ramps for (let i = 0; i < pts.length - 1; i++) { const t = i / (pts.length - 2); const tIn = Math.min(1, t / (0.08 + passRng() * 0.1)); const tOut = Math.min(1, (1 - t) / (0.06 + passRng() * 0.1)); // Gaussian-ish pressure peak at pressCenter const gauss = Math.exp(-Math.pow((t - pressCenter) / pressWidth, 2)); const press = Math.min(tIn, tOut) * (0.4 + gauss * 0.6); const jitter = 1 + (passRng() - 0.5) * 0.2; const sw = (0.2 + press * 1.2) * jitter; const opa = 0.35 + press * 0.6; annoG .append("line") .attr("x1", pts[i][0]) .attr("y1", pts[i][1]) .attr("x2", pts[i + 1][0]) .attr("y2", pts[i + 1][1]) .attr("stroke", inkCol) .attr("stroke-width", sw) .attr("opacity", opa) .attr("stroke-linecap", "round"); } } }; // Text only — placed in clear space, no box, no underline const annotate = (tx, ty, lines, seed, fontSize = 13) => { const rng = makeRng(seed); const rot = (rng() - 0.5) * 8; // more rotation = more hand-written const lineH = fontSize + 4; const g = annoG.append("g").attr("transform", `rotate(${rot},${tx},${ty})`); lines.forEach((line, i) => { const rng2 = makeRng(seed + i * 111); g.append("text") .attr("x", tx + (rng2() - 0.5) * 3) .attr("y", ty + i * lineH) .attr("text-anchor", "middle") .attr("font-family", "Palatino, Georgia, serif") .attr("font-weight", "700") .attr("font-size", fontSize) .attr("fill", inkCol) .attr("opacity", 1) .text(line); }); }; // ── Crossovers ──────────────────────────────────────────── const crossovers = []; for (let di = 0; di < dates.length - 1; di++) { const d0 = dates[di], d1 = dates[di + 1]; for (let a = 0; a < categories.length; a++) { for (let b = a + 1; b < categories.length; b++) { const ca = categories[a], cb = categories[b]; const ma0 = midOf(ca, d0), mb0 = midOf(cb, d0); const ma1 = midOf(ca, d1), mb1 = midOf(cb, d1); if ((ma0 - mb0) * (ma1 - mb1) < 0) { crossovers.push({ ca, cb, d0, d1, xc: (x(d0) + x(d1)) / 2, yc: y( (midOf(ca, d0) + midOf(ca, d1) + midOf(cb, d0) + midOf(cb, d1)) / 4 ) }); } } } } const topCrossovers = crossovers .map((c) => ({ ...c, score: valueOf(c.ca, c.d0) + valueOf(c.cb, c.d0) + valueOf(c.ca, c.d1) + valueOf(c.cb, c.d1) })) .sort((a, b) => d3.descending(a.score, b.score)) .slice(0, 3); // Place annotation text well above the chart, arrow down into crossover topCrossovers.forEach((c, i) => { const textX = c.xc + [-40, 20, -30][i]; const textY = margin.top + [8, 20, 35][i]; // in the top margin area wobblyLoop(c.xc, c.yc, 38, 22, i * 3333 + 1); wobblyArrow(textX, textY + 24, c.xc, c.yc - 24, i * 7777); annotate(textX, textY, [`${c.ca}`, `overtakes ${c.cb}`], i * 9999 + 2, 11); }); // Fastest riser — text below chart in bottom margin let riserCat = null, riserGrowth = -Infinity; for (const cat of categories) { const growth = valueOf(cat, dates[dates.length - 1]) - valueOf(cat, dates[0]); if (growth > riserGrowth) { riserGrowth = growth; riserCat = cat; } } if (riserCat) { const midDate = dates[Math.floor(dates.length / 2)]; const rx = x(midDate), ry = y(midOf(riserCat, midDate)); // Arrow from below band up into it wobblyArrow(rx, ry + 55, rx, ry + 8, 6001); annotate(rx, ry + 72, ["Fastest", "growing"], 6002, 11); } // Biggest decliner let declinerCat = null, declinerDrop = Infinity; for (const cat of categories) { const change = valueOf(cat, dates[dates.length - 1]) - valueOf(cat, dates[0]); if (change < declinerDrop) { declinerDrop = change; declinerCat = cat; } } if (declinerCat) { const midDate = dates[Math.floor(dates.length * 0.55)]; const dx = x(midDate), dy = y(midOf(declinerCat, midDate)); wobblyArrow(dx + 60, dy - 45, dx + 4, dy - 6, 7001); annotate(dx + 72, dy - 55, [declinerCat, "in decline"], 7002, 11); } return svg.node(); }4f:[] 2d:{"id":"b048f6c4d7ce046e","slug":null,"title":"Area bump chart experimentation (plain to watercolour)","thumbnail":"17490581d36d6d5ac92a19849bd7b03a28485cf410a7ae9a3b57f033e0a6d80e","access_level":"public","create_time":"$D2026-04-04T14:37:19.720Z","update_time":"$D2026-07-08T13:32:32.890Z","view_time":null,"first_public_time":"$D2026-07-08T12:35:18.615Z","fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":287,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"},{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Area bump chart experimentation (plain to watercolour)","cells":[{"id":0,"value":"# Area bump chart experimentation (plain to watercolour)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":253,"value":"Some random data that has been generated/fetched using an LLM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"## Normalised Stacked Area Chart\n\nA 100% stacked area chart showing the relative share of each category over time. All values are normalised to proportions per date, so the chart always fills the full height. The stack order is fixed — categories do not reorder over time. Use this to compare how the *relative composition* changes, not absolute magnitudes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"## Area Bump Chart — Separate Rank Slots\n\nEach category occupies a dedicated horizontal slot, positioned by its rank at each date (rank 1 at the top). Band thickness within the slot is proportional to the category's share of the total value at that date. As rankings change over time, bands move between slots with smooth `curveBumpX` transitions.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"## Stacked Area Bump Chart — Normalised\n\nA stacked area chart where the stack order updates at each date based on ranking — the highest-value category sits at the top, lowest at the bottom. Bands reorder over time with smooth `curveBumpX` transitions, creating the flowing crossover motion characteristic of a bump chart.\n\nNote: values are still normalised to proportions (the stack always fills 100% height), so this shows relative share rather than absolute magnitude. Labels appear on both left and right edges at each band's starting and ending position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"## Stacked Area Bump Chart — Absolute Values\n\nA stacked area chart where bands are ordered by rank at each date and stacked using **raw values** rather than normalised proportions. The total stack height therefore grows and shrinks over time, reflecting changes in absolute magnitude. The highest-value category sits at the top, lowest at the bottom, and the order updates at each date with smooth `curveBumpX` transitions.\n\nThe y-axis shows absolute values. Band thickness encodes true magnitude — a wider band means a larger value, not just a larger share.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"## Stacked Area Bump Chart — Largest Band at Bottom\n\nSame as the previous chart but with the sort order reversed — the largest-value category is now anchored at the bottom of the stack, smallest at the top. This mirrors the conventional reading direction of stacked charts, where the most dominant category forms a stable baseline and smaller categories weave above it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"## Stacked Area Bump Chart — Stream Graph (Silhouette Offset)\n\nThe stack is centred vertically using a silhouette offset — each date's total is halved and subtracted from all y values, so the stream grows outward from the middle rather than up from a baseline. This gives the chart its characteristic flowing, organic shape.\n\nThe data is reshaped into wide format (one object per date) before stacking. The rank order still updates per date, so bands reorder over time. Because `d3.stack()` requires a fixed key order, the silhouette offset is applied manually rather than via `d3.stackOffsetSilhouette`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"## Stacked Area Bump Chart — Aesthetic Pass\n\nSilhouette-offset stream with improved visual styling: a custom 8-color palette with better contrast between adjacent bands, fully opaque fills with a thin off-white stroke to separate neighbors, inline labels at each band's widest point, and right-side labels only — sorted by vertical position and de-collided with a minimum gap nudge, each with a small color dot connector. Background is off-white `#fafafa`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"## Stacked Area Bump Chart — Multiply Blend Mode\n\nAdds `mix-blend-mode: multiply` to the band group, so overlapping and crossing bands blend together like transparent ink — where two bands cross, their colors multiply to produce a richer, darker tone. Opacity is set to 0.75 to make the blending visible. Labels are rendered outside the blend group so they remain crisp white. Tick","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":40,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"## Stacked Area Bump Chart — Per-Segment Z-Order Weave\n\nInstead of drawing each band as a single continuous path, the chart is drawn **segment by segment** between adjacent dates. At each segment, bands are sorted by their direction of travel — falling bands (midpoint moving down) are drawn first (behind), rising bands (midpoint moving up) are drawn last (on top). The result is a weave effect where bands that are gaining rank always appear to cross *over* bands that are losing rank, like threads passing over and under each other.\n\nEach segment gets its own `mix-blend-mode: multiply` group, so blending remains local to each crossing. Strokes are removed to eliminate the seam lines that would otherwise appear at segment boundaries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"## Stacked Area Bump Chart — Weave with Clipped Outlines\n\nPer-segment z-order sorting with smooth white outlines along each band's top and bottom edges.\n\n**Weave effect:** The chart is drawn segment by segment between adjacent dates. At each segment, bands are sorted by their direction of travel — falling bands drawn first (behind), rising bands drawn last (on top) — so crossing bands always weave over and under each other correctly.\n\n**Outlines without seams:** Each band's top and bottom edges are drawn as full-series `d3.line()` paths (spanning all dates) so the curve is perfectly continuous. A `clipPath` rect constrains each outline to its segment's x range, keeping the out","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"## Stacked Area Bump Chart\n\nFull-width silhouette stream with per-segment z-order weaving, multiply blend mode, clipped outlines, and fitted inline labels.\n\n**Labels** are placed at the widest point of each band where the full text fits horizontally within the chart bounds. A thin black halo with white fill ensures legibility against any band color or blend. Bands too narrow to fit their label are unlabelled.\n\n**Weave** is achieved by splitting each band into segments between adjacent dates and sorting draw order per segment — rising bands on top, falling bands behind — so crossings always read as one band passing over another.\n\n**Outlines** trace each band's top and bottom edges as continuous full-series lines, clipped per segment to avoid seams, drawn outside the blend group so they stay white.\n\n**Blend mode** `multiply` at 0.75 opacity produces rich darker tones where bands overlap, rewarding the viewer for following individual bands through the crossings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":113,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":130,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":136,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":146,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":187,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":228,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W4f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"