chart = {
const svg = (this ? d3.select(this) : d3.create("svg"))
.attr("width", width)
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`);
if (!this) {
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("width", 0);
svg.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.style("font", "12px sans-serif")
.selectAll("text")
.data(data)
.enter().append("text")
.attr("class", "label")
.attr("dy", "0.35em")
.attr("x", x(0) - 4);
svg.append("g")
.attr("class", "x-axis");
svg.append("g")
.attr("class", "y-axis");
}
svg.selectAll(".bar")
.data(data, d => d.name)
.attr("x", x(0))
.attr("y", d => y(d.name))
.attr("height", y.bandwidth())
.transition()
.delay((d, i) => i * 20)
.attr("width", d => x(d.value) - x(0));
svg.selectAll(".label")
.data(data, d => d.name)
.attr("y", d => y(d.name) + y.bandwidth() / 2)
.text(d => d.value.toLocaleString())
.transition()
.delay((d, i) => i * 20)
.attr("x", d => x(d.value) - 4);
svg.select(".x-axis")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(g => g.transition().call(d3.axisBottom(x).ticks(width / 80, "s")))
.call(g => g.select(".domain").remove());
svg.select(".y-axis")
.attr("transform", `translate(${margin.left},0)`)
.call(g => g.transition().call(d3.axisLeft(y).tickSizeOuter(0)));
return svg.node();
}
data = d3.nest()
.key(([code]) => variables[code])
.rollup(values => d3.sum(values, ([code, value]) => +value))
.entries(d3.transpose(await d3.json(`https://api.census.gov/data/2015/acs/acs5?get=${d3.keys(variables).join()}&for=${geography}`)).slice(0, -1))
.map(({key, value}) => ({name: key, value}))
variables = ({
B01001_003E: "<5", // Male
B01001_004E: "5-9",
B01001_005E: "10-14",
B01001_006E: "15-19", // 15-17,
B01001_007E: "15-19", // 18-19,
B01001_008E: "20-24", // 20
B01001_009E: "20-24", // 21
B01001_010E: "20-24", // 22-24
B01001_011E: "25-29",
B01001_012E: "30-34",
B01001_013E: "35-39",
B01001_014E: "40-44",
B01001_015E: "45-49",
B01001_016E: "50-54",
B01001_017E: "55-59",
B01001_018E: "60-64", // 60-61
B01001_019E: "60-64", // 62-64
B01001_020E: "65-69", // 65-66
B01001_021E: "65-69", // 67-69
B01001_022E: "70-74",
B01001_023E: "75-79",
B01001_024E: "80-84",
B01001_025E: "≥85",
B01001_027E: "<5", // Female
B01001_028E: "5-9",
B01001_029E: "10-14",
B01001_030E: "15-19", // 15-17
B01001_031E: "15-19", // 18-19
B01001_032E: "20-24", // 20
B01001_033E: "20-24", // 21
B01001_034E: "20-24", // 22-24
B01001_035E: "25-29",
B01001_036E: "30-34",
B01001_037E: "35-39",
B01001_038E: "40-44",
B01001_039E: "45-49",
B01001_040E: "50-54",
B01001_041E: "55-59",
B01001_042E: "60-64", // 60-61
B01001_043E: "60-64", // 62-64
B01001_044E: "65-69", // 65-66
B01001_045E: "65-69", // 67-69
B01001_046E: "70-74",
B01001_047E: "75-79",
B01001_048E: "80-84",
B01001_049E: "≥85"
})
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([height - margin.bottom, margin.top])
.padding(0.1)
height = data.length * 25 + margin.top + margin.bottom
margin = ({top: 10, right: 0, bottom: 20, left: 40})
d3 = require("d3@5")
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.
