27:null 28:["$","title",null,{"children":"Streamgraph | Lea | Observable"}] 2d:Tf4a,chart = { // 1. Setup Dimensions const width = 928; const height = 400; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 50; // 2. Data Preparation const keys = d3.union(eu_banks_n12_long.map(d => d.Sheet_Name)); const groupedData = d3.index(eu_banks_n12_long, d => d.Date, d => d.Sheet_Name); const series = d3.stack() .offset(d3.stackOffsetSilhouette) .order(d3.stackOrderInsideOut) .keys(keys) .value(([, D], key) => D.get(key).Value) (groupedData); // 3. Scales const x = d3.scaleUtc() .domain(d3.extent(eu_banks_n12_long, d => d.Date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(series.flat(2))) .rangeRound([height - marginBottom, marginTop]); // COHESIVE COLOR SCHEME: d3.interpolateGnBu or d3.interpolateViridis const color = d3.scaleOrdinal() .domain(keys) .range(d3.quantize(t => d3.interpolateGnBu(t * 0.8 + 0.1), keys.size)); const area = d3.area() .x(d => x(d.data[0])) .y0(d => y(d[0])) .y1(d => y(d[1])); // 4. SVG Container const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); // 5. Tooltip Element (Hidden by default) const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("background", "rgba(255, 255, 255, 0.95)") .style("border", "1px solid #ccc") .style("padding", "8px") .style("border-radius", "4px") .style("pointer-events", "none") .style("font-size", "12px") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)") .style("visibility", "hidden"); // 6. Drawing Paths const paths = svg.append("g") .selectAll("path") .data(series) .join("path") .attr("fill", d => color(d.key)) .attr("stroke", "white") // WHITE BORDER .attr("stroke-width", "0.5px") // BORDER THICKNESS .attr("d", area) .on("mouseover", function() { d3.select(this).attr("stroke-width", "1.5px"); tooltip.style("visibility", "visible"); }) .on("mousemove", function(event, d) { // Find the data point closest to the mouse x-position const mouseX = d3.pointer(event)[0]; const date = x.invert(mouseX); const bisect = d3.bisector(d => d.Date).left; // Use the original long data to find the specific value const bankName = d.key; const bankData = eu_banks_n12_long.filter(item => item.Sheet_Name === bankName); const i = bisect(bankData, date); const dPoint = bankData[i] || bankData[bankData.length - 1]; tooltip .html(` ${dPoint.Sheet_Name}
Date: ${d3.utcFormat("%Y %Q")(dPoint.Date)}
VAR Backtesting: ${dPoint.Value.toLocaleString()} `) .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseleave", function() { d3.select(this).attr("stroke-width", "0.5px"); tooltip.style("visibility", "hidden"); }); // 7. Axes svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 80).tickFormat(d => Math.abs(d).toLocaleString())) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ VAR Backtesting Value")); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); return Object.assign(svg.node(), {scales: {color}}); }2e:[{"id":"bbdea9a196902225588e102008171e52ec8b0ea8ebfe2259904f5cdaf3d466f9dc369ff73c1ec7d76c0ad076a2b5f405fd6aba03a0c88243b16f15ef9122b4c1","href":"https://static.observableusercontent.com/files/bbdea9a196902225588e102008171e52ec8b0ea8ebfe2259904f5cdaf3d466f9dc369ff73c1ec7d76c0ad076a2b5f405fd6aba03a0c88243b16f15ef9122b4c1","name":"a12_ready.csv","type":"text/csv","lastModified":1768481590682.238,"size":2461},{"id":"16caf2a6c0e7f6df372298ea89b26805d93f06be4c3ac253a2af7dede27cbb0e5058a4a96188eb60734afd180cc0ce16cd4186192572286bae4928689e15a33c","href":"https://static.observableusercontent.com/files/16caf2a6c0e7f6df372298ea89b26805d93f06be4c3ac253a2af7dede27cbb0e5058a4a96188eb60734afd180cc0ce16cd4186192572286bae4928689e15a33c","name":"EU_Banks_N12_Long.csv","type":"text/csv","lastModified":1768481664714.115,"size":27726},{"id":"b1c47101e18a61aee00d76e2fedab030f5f4caa882d6e3b70894b6559d5b790425363e5efdb440a9510eeb6968aa5b93dfffbe2c805b28a35798debb5e6e91ec","href":"https://static.observableusercontent.com/files/b1c47101e18a61aee00d76e2fedab030f5f4caa882d6e3b70894b6559d5b790425363e5efdb440a9510eeb6968aa5b93dfffbe2c805b28a35798debb5e6e91ec","name":"EU_Banks_A12_Long.csv","type":"text/csv","lastModified":1768481664712.302,"size":27714},{"id":"76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","href":"https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","name":"unemployment.csv","type":"text/csv","lastModified":1768481580815.047,"size":53919},{"id":"016c788eac77f5693d2144ca7e9abcb8736eddc4ce5066dc1131ca68a77ee6dcd417003621453b71cd6992283e68642b50a2098fbad3904be02dbd9d003e7c89","href":"https://static.observableusercontent.com/files/016c788eac77f5693d2144ca7e9abcb8736eddc4ce5066dc1131ca68a77ee6dcd417003621453b71cd6992283e68642b50a2098fbad3904be02dbd9d003e7c89","name":"n12_ready.csv","type":"text/csv","lastModified":1768481590680.552,"size":3382}] 2b:{"id":"9efad9e00352d848","slug":null,"title":"Streamgraph","thumbnail":"0b81810b02fca663987ccc70afebf55f363e4391fe48893ed5955001ad679b91","access_level":"public","create_time":"$D2026-01-15T12:53:00.815Z","update_time":"$D2026-01-15T13:02:36.132Z","view_time":null,"first_public_time":"$D2026-01-15T13:04:00.612Z","has_unpublished_edits":null,"fork":{"id":"0529cbec8d1f78b6","slug":"streamgraph/2","title":"Streamgraph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024"},"version":697,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null}],"members":[{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Streamgraph","cells":[{"id":0,"value":"

Streamgraph

D3 › Gallery

\n\n# Streamgraph\n\nThis stacked area chart shows unemployed persons by industry, 2000–2010. Compare to a [zero-baseline stacked area](/@d3/stacked-area-chart/2) and [normalized stacked area](/@d3/normalized-stacked-area-chart/2). Data: [BLS](https://www.bls.gov/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"key = Swatches(chart.scales.color, {columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"unemployment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"Using [Observable Plot](https://observablehq.com/plot)’s concise API, you can create a similar chart with an [area mark](https://observablehq.com/plot/marks/area). See the [Plot: Wiggle streamgraph](https://observablehq.com/@observablehq/plot-stack-offset) example notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"Plot.plot({\n marginLeft: 60,\n y: {grid: true},\n color: {legend: true, columns: 6},\n marks: [\n Plot.areaY(eu_banks_n12_long, {x: \"Date\", y: \"Value\", fill: \"Sheet_Name\", offset: \"silhouette\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"eu_banks_a12_long = await FileAttachment(\"EU_Banks_A12_Long.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"eu_banks_a12_long","database":"$undefined"},{"id":681,"value":"eu_banks_n12_long = await FileAttachment(\"EU_Banks_N12_Long.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"eu_banks_n12_long","database":"$undefined"},{"id":677,"value":"a12_ready = await FileAttachment(\"a12_ready.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"a12_ready","database":"$undefined"},{"id":678,"value":"n12_ready = await FileAttachment(\"n12_ready.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"n12_ready","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"