25:["$","title",null,{"children":"U.S. population by State, 1790–1990 | marlow deneal | Observable"}] 49: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}}); }4a:[{"id":"2917384d5b3890d62715d46d1ce13c242b26c4b78ac2300859112842c1e251af820a09d160a4b7cfa323dc82b863e738bdf58e08eb4cffe640c7b4bbc3e25a85","href":"https://static.observableusercontent.com/files/2917384d5b3890d62715d46d1ce13c242b26c4b78ac2300859112842c1e251af820a09d160a4b7cfa323dc82b863e738bdf58e08eb4cffe640c7b4bbc3e25a85","name":"population.tsv","type":"application/octet-stream","lastModified":1697769844096.1,"size":12234}] 29:{"id":"f092585c74922140","slug":null,"title":"U.S. population by State, 1790–1990","thumbnail":"7da001f4d0e0192ce45498d396e6d40cc5df35c0ff22b7edf18144cef97bdc22","access_level":"public","create_time":"$D2023-10-20T02:44:04.096Z","update_time":"$D2023-10-20T02:44:04.096Z","view_time":null,"first_public_time":"$D2023-10-20T02:44:04.096Z","has_unpublished_edits":null,"fork":{"id":"7abe88161538f96b","slug":"u-s-population-by-state-1790-1990","title":"U.S. population by State, 1790–1990","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1dd8a7f5cbbe3892","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":218,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"bio":"Traditional artist digital artist exploring the wonderful world of today through data visualization art ai exploring creating exploring creating more thank you d3 observable you help me to explore new possibilities 😀 ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null