Historian of early America, Indigenous history, and material culture
d3 = require('d3@6')
height = 500
margin = ({
top: 10,
right: 10,
bottom: 40,
left: 35
})
data = FileAttachment("1940census@1.csv").csv()
import { Table } from "@observablehq/inputs"
Table(data, {
sort: "birth_year"
})
birth_years = d3.rollup(data, v => v.length, d => d.birth_year, d => d.gender)
aggregate = Array.from(birth_years, ([year, count]) => {
const obj = {};
for (const [gender, num] of count) {
obj.year = year;
obj[gender] = num;
}
return obj;
})
Table(aggregate, {
sort: "year"
})
md`## Define the X and Y Axis`
xDomain = aggregate.map(a => +a.year).sort()
xScale = d3
.scaleBand()
.domain(aggregate.map(d => d["year"]).sort())
.range([margin.left, width - margin.right - margin.left])
.padding(0.1)
x1 = d3
.scaleBand()
.domain(keys)
.rangeRound([0, xScale.bandwidth()])
.padding(0.05)
keys = Object.keys(aggregate[0]).slice(1)
yScale = d3
.scaleLinear()
.domain([0, d3.max(aggregate, d => d3.max(keys, key => d[key]))])
.nice()
.rangeRound([height - margin.bottom, margin.top])
xAxis = d3.axisBottom(xScale).tickSizeOuter(0)
yAxis = d3.axisLeft(yScale).tickSizeOuter(0)
color = d3.scaleOrdinal(d3.schemePastel1)
bars = {
const svg = d3.select(DOM.svg(width, height));
svg
.append("g")
.selectAll("g")
.data(aggregate)
.join("g")
.attr("transform", d => `translate(${xScale(d["year"])},0)`)
.selectAll("rect")
.data(d => keys.map(key => ({ key, value: d[key] })))
.join('rect')
.attr("x", d => x1(d.key))
.attr("y", d => yScale(d.value))
.attr("width", x1.bandwidth())
.attr("height", d => yScale(0) - yScale(d.value))
.attr("fill", d => color(d.key));
svg
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis)
.selectAll("text")
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
svg
.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis);
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
