Maps, Data, Viz, UX, Design
chart = {
const svg = d3.select(DOM.svg(w + margin.left + margin.right, h + margin.top + margin.bottom));
const g = svg.append("g")
.classed("main", true)
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const gx = g.append("g")
.call(xAxis);
const bars = g.selectAll(".bar")
.data(data, d => d.geoid)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", d => scaleY(d.geoid))
.attr("width", d => scaleX(d.no_internet_access / d.total_pop))
.attr("height", scaleY.bandwidth())
.attr("fill", "steelblue");
// https://observablehq.com/@d3/sortable-bar-chart
svg.node().update = () => {
const t = d3.transition()
.duration(750);
bars
.data(data, d => d.geoid)
.order()
.transition(t)
.delay((d, i) => i * 2)
.attr("y", d => scaleY(d.geoid));
}
return svg.node();
}
{
// https://observablehq.com/@d3/sortable-bar-chart
switch (order) {
case "name-ascending": data.sort((a, b) => a.geoid.localeCompare(b.geoid)); break;
case "ratio-ascending": data.sort((a, b) => a.noAccessPct - b.noAccessPct); break;
case "ratio-descending": data.sort((a, b) => b.noAccessPct - a.noAccessPct); break;
}
scaleY.domain(data.map(d => d.geoid));
chart.update();
return order;
}
margin = ({ top: 0, right: 10, bottom: 40, left: 10 })
w = width - margin.left - margin.right;
h = 600;
scaleX = d3.scaleLinear()
.range([0, w])
.domain(d3.extent(data, d => d.noAccessPct));
scaleY = d3.scaleBand()
.range([0, h])
.domain(data.map(d => d.geoid));
xAxis = g => g
.attr("transform", `translate(0, ${h})`)
.call(d3.axisBottom(scaleX))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", 0)
.attr("y", 30)
.attr("fill", "#333")
.attr("text-anchor", "start")
.text("Ratio of total population without broadband internet access")
)
data = {
const data = await d3.csv( "https://gist.githubusercontent.com/clhenrick/48f40bacd178b58d88b4144c44b2a2bb/raw/5f5c85ffc6f8158d96e192e1e8b1d0efd1e46177/acs5_2017_internet_access_joined_rural_pct.csv",
({
geoid,
with_broadband_access,
no_internet_access,
total_pop,
pct_rural_2010
}) => ({
geoid,
with_broadband_access: +with_broadband_access,
no_internet_access: +no_internet_access,
total_pop: +total_pop,
pct_rural_2010: +pct_rural_2010,
noAccessPct: +no_internet_access / +total_pop
})
);
data.sort((a, b) => b.noAccessPct - a.noAccessPct);
return data;
}
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.
