31: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} }); }32:[{"id":"dd79a7e7eefde86c444a69a1cd55085c953a6c5cab6aa2b99e95a7754ee182e6786c02652dd180a55d9c2f85681c98d5de789e6d9cf7410eb13c17a9de3f755e","href":"https://static.observableusercontent.com/files/dd79a7e7eefde86c444a69a1cd55085c953a6c5cab6aa2b99e95a7754ee182e6786c02652dd180a55d9c2f85681c98d5de789e6d9cf7410eb13c17a9de3f755e","name":"icelandic-population.csv","type":"text/csv","lastModified":1582402883786.647,"size":543614}] 2f:{"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"},{"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"},{"id":146,"value":"legend = swatches({color: chart.scales.color, format: x => ({M: \"Male\", F: \"Female\"}[x])})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"chart.update(year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"delay = 250 // controls both the speed of the scrubber and the transition’s duration","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":4,"value":"data = FileAttachment(\"icelandic-population.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}