2c:["$","title",null,{"children":"U.S. population by State, 1790–1990 | D3 | Observable"}] 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:{"id":"7abe88161538f96b","slug":"u-s-population-by-state-1790-1990","title":"U.S. population by State, 1790–1990","thumbnail":"c69ef26c7cbd8fd8c9de45f8dcc08950f08472b719adab9c41b3ea8db754420b","access_level":"public","create_time":"$D2019-06-22T05:27:50.329Z","update_time":"$D2023-08-22T13:47:22.816Z","view_time":null,"first_public_time":"$D2019-06-22T06:16:50.717Z","fork":false,"stars":49,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":218,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":82,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"series = d3.stack()\n .keys(data.columns.slice(1))\n .offset(d3.stackOffsetExpand)\n (data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@d3/u-s-population-by-state-1790-1990;307;"}