2c:null 2d:["$","title",null,{"children":"Stacked area chart | CSE442 | Observable"}] 32:Tc88,chart = { // Specify the chart’s dimensions. let width = chartWidth; const height = 500; const marginTop = 10; const marginRight = 10; const marginBottom = 20; const marginLeft = 40; // let activeKey = null; // Determine the series that need to be stacked. const series = d3.stack() .keys(d3.union(filtered_data.map(d => d.industry))) // distinct series keys, in input order .value(([, D], key) => D.get(key).unemployed) // get value for each series key and stack (d3.index(filtered_data, d => d.date, d => d.industry)); // group by stack then series key // Prepare the scales for positional and color encodings. const x = d3.scaleUtc() .domain(d3.extent(filtered_data, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([height - marginBottom, marginTop]); const color = d3.scaleOrdinal() .domain(Array.from(new Set(data.map(d => d.industry)))) // all industries .range(d3.schemePaired); // Construct an area shape. const area = d3.area() .x(d => x(d.data[0])) .y0(d => y(d[0])) .y1(d => y(d[1])); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const tooltip = new Tooltip(x, y); // Add the y-axis svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 80)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Unemployed persons")); // Add the stacked areas const paths = svg.append("g") .selectAll("path") .data(series) .join("path") .attr("fill", d => color(d.key)) .attr("d", area) .attr("cursor", "pointer"); paths .on("mousemove", (event, d) => { const [xm, ym] = d3.pointer(event); const date = x.invert(xm); tooltip.show({ x: xm, y: ym, date }, d.key); }) .on("mouseout", () => tooltip.hide()) .on("click", function(event, d) { event.stopPropagation(); if (mutable activeKey === d.key) { mutable activeKey = null; // width = 1000; // x.range([marginLeft, width - marginRight]); // paths.transition().duration(500) // .attr("d", area) // .attr("opacity", 1); // return; } else { mutable activeKey = d.key; } // paths.transition().duration(500) // .attr("opacity", p => (p.key === d.key ? 1 : 0.15)); }); // Add the x-axis svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); svg.append(() => tooltip.node); // Return the chart with color scale as property return Object.assign(svg.node(), { scales: { color } }); } 33:T92b,// viewof chart = { // const width = 928; // const height = 500; // const margin = {top: 10, right: 10, bottom: 20, left: 40}; // // Persistent SVG (Observable reuses this between updates) // const svg = d3.select(DOM.svg(width, height)) // .attr("viewBox", [0, 0, width, height]) // .attr("style", "max-width: 100%; height: auto;"); // // Container group (only appended once) // let g = svg.select("g"); // if (g.empty()) { // g = svg.append("g"); // g.append("g").attr("class", "x-axis") // .attr("transform", `translate(0,${height - margin.bottom})`); // g.append("g").attr("class", "y-axis") // .attr("transform", `translate(${margin.left},0)`); // } // // Compute stacked data // const series = d3.stack() // .keys(d3.union(filtered_data.map(d => d.industry))) // .value(([, D], key) => D.get(key)?.unemployed ?? 0) // (d3.index(filtered_data, d => d.date, d => d.industry)); // const x = d3.scaleUtc() // .domain(d3.extent(filtered_data, d => d.date)) // .range([margin.left, width - margin.right]); // const y = d3.scaleLinear() // .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) // .rangeRound([height - margin.bottom, margin.top]); // const color = d3.scaleOrdinal() // .domain(series.map(d => d.key)) // .range(d3.schemeTableau10); // const area = d3.area() // .x(d => x(d.data[0])) // .y0(d => y(d[0])) // .y1(d => y(d[1])); // // JOIN paths // const paths = g.selectAll("path") // .data(series, d => d.key); // paths.join( // enter => enter.append("path") // .attr("fill", d => color(d.key)) // .attr("d", area) // .attr("opacity", 0) // .call(enter => enter.transition().duration(800) // .attr("opacity", 1)), // update => update.transition().duration(800) // .attr("fill", d => color(d.key)) // .attr("d", area), // exit => exit.transition().duration(600) // .attr("opacity", 0) // .remove() // ); // // Update axes with animation // g.select(".x-axis") // .transition().duration(800) // .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // g.select(".y-axis") // .transition().duration(800) // .call(d3.axisLeft(y)); // return svg.node(); // } 34:[{"id":"76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","href":"https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","name":"unemployment.csv","type":"text/csv","lastModified":1762103551838.112,"size":53919},{"id":"6ac1a37a343d594eb404cb6d246f718e3b62668d0c8f746e39eb0d6ba37b6e5397ff872654d6f7bd36954960f930629760ba276735af2ab7caa92f89c9c75458","href":"https://static.observableusercontent.com/files/6ac1a37a343d594eb404cb6d246f718e3b62668d0c8f746e39eb0d6ba37b6e5397ff872654d6f7bd36954960f930629760ba276735af2ab7caa92f89c9c75458","name":"genesCitePerYear.csv","type":"text/csv","lastModified":1762155137291.614,"size":7549},{"id":"cd81dd73002b46d175364bd476b00d47e77ab8ebff75aa8a415c8c81347bcff959f7a68049e3b0ae860d0086cde20ddf433e68743b62f599eb3b1a0f9f26760d","href":"https://static.observableusercontent.com/files/cd81dd73002b46d175364bd476b00d47e77ab8ebff75aa8a415c8c81347bcff959f7a68049e3b0ae860d0086cde20ddf433e68743b62f599eb3b1a0f9f26760d","name":"gene2pubmed_filtered.csv","type":"text/csv","lastModified":1762152787068.471,"size":412348},{"id":"6c74c8c3c00eabd696520f8a4fb93dad6ae0e5a0576d9eddf78974e609b45ce6cb810970c5c3c512b5babe4f1582b2cc072680940a0fa67ccc895d2c4294676d","href":"https://static.observableusercontent.com/files/6c74c8c3c00eabd696520f8a4fb93dad6ae0e5a0576d9eddf78974e609b45ce6cb810970c5c3c512b5babe4f1582b2cc072680940a0fa67ccc895d2c4294676d","name":"genes.csv","type":"text/csv","lastModified":1762154758429.329,"size":11536},{"id":"6160a284b30a91965dd765b12206c1ff650cf4dcfb6b1d71ce54ee9945e6d6774bb5a3620d72379456c41f6a67f39815facb740914f67ffa22a90800460a9f6b","href":"https://static.observableusercontent.com/files/6160a284b30a91965dd765b12206c1ff650cf4dcfb6b1d71ce54ee9945e6d6774bb5a3620d72379456c41f6a67f39815facb740914f67ffa22a90800460a9f6b","name":"genesCitePerYear (1).csv","type":"text/csv","lastModified":1762155699834.692,"size":3736}] 30:{"id":"24cd876bc993f0c5","slug":null,"title":"Stacked area chart","thumbnail":"c60294a53a59f642534f74bb6e64c42a21d9fd0747ba8ba5d1c6d841d9029aab","access_level":"public","create_time":"$D2025-11-02T17:12:31.838Z","update_time":"$D2025-11-03T16:01:39.539Z","view_time":null,"first_public_time":"$D2025-11-02T23:45:03.633Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1447f9e0fdd1705a","login":"cse442-work","name":"CSE442","avatar_url":"https://avatars-next.observableusercontent.com/c3b726818c46182a412d098c8545fe75bfdaea5c85f719db0e6f746578a6a032","tier":"starter_2024","bio":""},"version":910,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"705454616febf39d","login":"tanya-naveen","name":"Tanya Naveen","avatar_url":"https://avatars-next.observableusercontent.com/2b7d6714fd40d09d7659d6aa635f09455bd0290dedc30fc726924dcab5fe9b66","tier":null,"bio":""}],"members":[{"type":"team","id":"1447f9e0fdd1705a","login":"cse442-work","name":"CSE442","avatar_url":"https://avatars-next.observableusercontent.com/c3b726818c46182a412d098c8545fe75bfdaea5c85f719db0e6f746578a6a032","tier":"starter_2024","role":"editor"},{"type":"individual","id":"705454616febf39d","login":"tanya-naveen","name":"Tanya Naveen","avatar_url":"https://avatars-next.observableusercontent.com/2b7d6714fd40d09d7659d6aa635f09455bd0290dedc30fc726924dcab5fe9b66","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Stacked area chart","cells":[{"id":0,"value":"

Stacked area chart

D3 › Gallery

\n\n# Stacked area chart - Observable Implementation\n\nThis chart shows unemployed persons by industry, 2000–2010. Compare to a [streamgraph](/@d3/streamgraph/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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"// scatter = {\n// if (activeKey === null) return html`

No industry selected

`;\n\n// const filtered = data.filter(d => d.industry === activeKey);\n\n// return Plot.plot({\n// grid: true,\n// marks: [\n// Plot.dot(filtered, {x: \"date\", y: \"unemployed\", fill: \"steelblue\"})\n// ],\n// marginLeft: 60,\n// marginBottom: 40,\n// height: 300,\n// width: 400,\n// x: {label: \"Date\"},\n// y: {label: \"Unemployed\"},\n// title: activeKey,\n// transition: {duration: 800}\n// });\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"class Tooltip {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n\n this.formatDate = d3.timeFormat(\"%Y\"); // show only year\n\n this._text = htl.svg``;\n this.node = htl.svg`\n \n ${this._text}\n `;\n }\n\n show(d, industry) {\n this.node.removeAttribute(\"display\");\n\n // position tooltip\n const tx = this.x(d.date);\n const ty = this.y.range()[0] - 10; // put it above bottom axis\n this.node.setAttribute(\"transform\", `translate(${d.x},${d.y})`);\n\n // set label text\n this._text.textContent = `${industry}, ${this.formatDate(d.date)}`;\n }\n\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"viewof search = Inputs.search(data, {\n placeholder: \"Search industry\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"mutable activeKey = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"filtered_data = {\n let result = data;\n\n // If user typed something\n if (search != null && search.length > 0) {\n result = search\n }\n\n // If user clicked something\n if (activeKey !== null) {\n result = result.filter(d => d.industry === activeKey);\n } else {\n result = data;\n }\n\n // result = result.map(d => ({ ...d, date: new Date(d.year, 0, 1) }));\n\n return result;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"mutable chartWidth = 1000;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"rect = {\n const svg = d3.create(\"svg\") // Element name should be a string: \"svg\"\n .attr(\"width\", 100) // Attribute names and values should be strings\n .attr(\"height\", 10)\n // viewBox value should be a space-separated string\n .attr(\"viewBox\", \"100 100 100 100\") \n // style value should be a single string\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n \n // Optionally, you might want to add a rect element inside the svg\n svg.append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", \"steelblue\"); // Add a fill color to make the rect visible\n\n return svg.node(); // Return the DOM element for display (e.g., in Observable)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"key = Swatches(chart.scales.color, {columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"unemployment.csv"},{"id":757,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"// genes_data = FileAttachment(\"genesCitePerYear (1).csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"