25:["$","title",null,{"children":"Icelandic population by age, 1841–2019 | Angela Pham's Workspace | Observable"}] 49:Tad8,chart = { // Specify the chart’s dimensions. const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 34; const marginLeft = 0; const yearStep = 1; const yearMin = d3.min(data, d => d.year); // Construct the scales. const x = d3.scaleBand() .domain(Array.from(d3.group(data, d => d.age).keys()).sort(d3.ascending)) .range([width - marginRight, marginLeft]); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([height - marginBottom, marginTop]); const color = d3.scaleOrdinal(["M", "F"], ["#4e79a7", "#e15759"]); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", width) .attr("height", height) .attr("style", `max-width: 100%; height: auto;`); // Add the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickValues(d3.ticks(...d3.extent(data, d => d.age), width / 40)) .tickSizeOuter(0)) .call(g => g.append("text") .attr("x", marginRight) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("← Age")); svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).ticks(null, "s")) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginRight) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Population ↑")); const group = svg.append("g"); let rect = group.selectAll("rect"); return Object.assign(svg.node(), { update(year) { const dx = x.step() * (year - yearMin) / yearStep; const t = svg.transition() .ease(d3.easeLinear) .duration(delay); rect = rect .data(data.filter(d => d.year === year), d => `${d.sex}:${d.year - d.age}`) .join( enter => enter.append("rect") .style("mix-blend-mode", "darken") .attr("fill", d => color(d.sex)) .attr("x", d => x(d.age) + dx) .attr("y", d => y(0)) .attr("width", x.bandwidth() + 1) .attr("height", 0), update => update, exit => exit.call(rect => rect.transition(t).remove() .attr("y", y(0)) .attr("height", 0)) ); rect.transition(t) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)); group.transition(t) .attr("transform", `translate(${-dx},0)`); }, scales: {color} }); }4a:[{"id":"dd79a7e7eefde86c444a69a1cd55085c953a6c5cab6aa2b99e95a7754ee182e6786c02652dd180a55d9c2f85681c98d5de789e6d9cf7410eb13c17a9de3f755e","href":"https://static.observableusercontent.com/files/dd79a7e7eefde86c444a69a1cd55085c953a6c5cab6aa2b99e95a7754ee182e6786c02652dd180a55d9c2f85681c98d5de789e6d9cf7410eb13c17a9de3f755e","name":"icelandic-population.csv","type":"text/csv","lastModified":1698784053207.671,"size":543614}] 29:{"id":"cafcab369ce59832","slug":null,"title":"Icelandic population by age, 1841–2019","thumbnail":"c34835a96e22b11d2b04c74014bf69b80161b92f92cd4e252ec8a27809ab9f3c","access_level":"public","create_time":"$D2023-10-31T20:27:33.207Z","update_time":"$D2023-10-31T20:27:33.207Z","view_time":null,"first_public_time":"$D2023-10-31T20:27:33.207Z","has_unpublished_edits":null,"fork":{"id":"4148d814f94a4c11","slug":"icelandic-population-by-age-1841-2019","title":"Icelandic population by age, 1841–2019","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":296,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"bio":"for the DH 150 class","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"role":"editor"},{"type":"team","id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8a9b6a04811f3dd0","slug":"analysis-of-visualizations-and-their-affordances","title":"Analysis of Visualizations and their Affordances","owner":{"id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"Icelandic population by age, 1841–2019","cells":[{"id":0,"value":"

Icelandic population by age, 1841–2019

D3 › Gallery

\n\n# Icelandic population by age, 1841–2019\n\nBlue represents surplus male population and red surplus female population. Data: [Statistics Iceland](https://statice.is/about-statistics-iceland/) via [Borgar Þorsteinsson](https://blocks.roadtolarissa.com/borgar/b952bb581923c9993d68)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"viewof year = Scrubber(Array.from(d3.group(data, d => d.year), ([key]) => key).sort(d3.ascending), {delay, loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"legend = swatches({color: chart.scales.color, format: x => ({M: \"Male\", F: \"Female\"}[x])})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"chart.update(year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"delay = 250 // controls both the speed of the scrubber and the transition’s duration","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Using [Observable Plot](https://observablehq.com/plot)’s concise API, you can create this bar chart with the [rect mark](https://observablehq.com/plot/marks/rect) and the [interval transform](https://observablehq.com/plot/transforms/interval). See [this variant](/@observablehq/plot-icelandic-population-by-age) for more details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"Plot.plot({\n width: 960,\n height: 500,\n x: { reverse: true, line: true, transform: d => d - 0.45, tickSpacing: 30, label: \"← Age\", labelAnchor: \"left\" },\n y: { label: \"Population ↑\", tickFormat: \"s\", axis: \"right\" },\n color: {\n legend: true,\n domain: [\"M\", \"F\"],\n range: [\"#4e79a7\", \"#e15759\"],\n tickFormat: (d) => (d === \"M\" ? \"Male\" : \"Female\")\n },\n marks: [\n Plot.rectY(data, {\n filter: (d) => d.year === year,\n x: \"age\",\n interval: 1,\n y2: \"value\",\n fill: \"sex\",\n mixBlendMode: \"darken\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = FileAttachment(\"icelandic-population.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":60,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"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"}],"files":"$W4a","stdlib":"1"}} 24:null