31:Ta08,chart = { // Declare the chart dimensions and margins. const width = 928; const height = 720; const marginTop = 10; const marginRight = 10; const marginBottom = 30; const marginLeft = 40; // Declare the scales. const x = d3.scaleUtc() .domain(d3.extent(data, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .range([height - marginBottom, marginTop]); const color = d3.scaleOrdinal() .domain(regionRank) .range(d3.schemeCategory10) .unknown("gray"); // 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;"); // Create the areas const area = d3.area() .x(d => x(d.data.date)) .y0(d => y(d[0])) .y1(d => y(d[1])); svg.append("g") .attr("fill-opacity", 0.8) .selectAll("path") .data(series) .join("path") .attr("fill", ({key}) => color(regionByState.get(key))) .attr("d", area) .append("title") .text(({key}) => key); // Create the lines. const midline = d3.line() .curve(d3.curveBasis) .x(d => x(d.data.date)) .y(d => y((d[0] + d[1]) / 2)); svg.append("g") .attr("fill", "none") .attr("stroke-width", 0.75) .selectAll("path") .data(series) .join("path") .attr("stroke", ({key}) => d3.lab(color(regionByState.get(key))).darker()) .attr("d", area.lineY1()); // Append a path for text labels svg.append("defs") .selectAll("path") .data(series) .join("path") .attr("id", d => (d.id = DOM.uid("state")).id) .attr("d", midline); // Append the labels. svg.append("g") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .selectAll("text") .data(series) .join("text") .attr("dy", "0.35em") .append("textPath") .attr("href", d => d.id.href) .attr("startOffset", d => `${Math.max(0.05, Math.min(0.95, d.offset = d3.maxIndex(d, d => d[1] - d[0]) / (d.length - 1))) * 100}%`) .text(d => d.key); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(10, "%")) .call(g => g.select(".domain").remove()); return Object.assign(svg.node(), {scales: {color}}); }32:[{"id":"2917384d5b3890d62715d46d1ce13c242b26c4b78ac2300859112842c1e251af820a09d160a4b7cfa323dc82b863e738bdf58e08eb4cffe640c7b4bbc3e25a85","href":"https://static.observableusercontent.com/files/2917384d5b3890d62715d46d1ce13c242b26c4b78ac2300859112842c1e251af820a09d160a4b7cfa323dc82b863e738bdf58e08eb4cffe640c7b4bbc3e25a85","name":"population.tsv","type":"application/octet-stream","lastModified":1572923115191.627,"size":12234}] 2f:{"title":"U.S. population by State, 1790–1990","cells":[{"id":0,"value":"

U.S. population by State, 1790–1990

D3 › Gallery

\n\n# U.S. population by State, 1790–1990\n\nAs a stacked normalized area chart. Data: [U.S. Census Bureau](https://www.census.gov/population/www/censusdata/pop1790-1990.html)","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"{\n const id = DOM.uid().id;\n const marginLeft = 40;\n const {color} = chart.scales;\n \n return html`\n

${color.domain().map(name => html`\n

\n ${document.createTextNode(name)}\n

`)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\n const years = d3.range(1790, 2000, 10);\n const states = d3.tsvParse(await FileAttachment(\"population.tsv\").text(), (d, i) => i === 0 ? null : ({name: d[\"\"], values: years.map(y => +d[y].replace(/,/g, \"\") || 0)}));\n states.sort((a, b) => d3.ascending(regionRank.indexOf(regionByState.get(a.name)), regionRank.indexOf(regionByState.get(b.name))) || d3.descending(d3.sum(a.values), d3.sum(b.values)));\n return Object.assign(years.map((y, i) => Object.fromEntries([[\"date\", new Date(Date.UTC(y, 0, 1))]].concat(states.map(s => [s.name, s.values[i]])))), {columns: [\"date\", ...states.map(s => s.name)]});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"series = d3.stack()\n .keys(data.columns.slice(1))\n .offset(d3.stackOffsetExpand)\n (data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"regionRank = [\n \"New England\",\n \"Middle Atlantic\",\n \"South Atlantic\",\n \"East South Central\",\n \"West South Central\",\n \"East North Central\",\n \"West North Central\",\n \"Mountain\",\n \"Pacific\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"regionByState = {\n const regions = await d3.csv(\"https://raw.githubusercontent.com/cphalpert/census-regions/7bdc6aa1cb0892361e90ce9ad54983041c2ad015/us%20census%20bureau%20regions%20and%20divisions.csv\");\n return new Map(regions.map(d => [d.State, d.Division]));\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}