Maps, Data, Viz, UX, Design
svg = {
const svg = d3.select(DOM.svg(size, size))
.style("width", "100%")
.style("height", "auto");
const leaf = svg.selectAll(".leaf")
.data(packed.leaves())
.enter().append("g")
.classed("leaf", true)
.attr("transform", d => `translate(${d.x + 1}, ${d.y + 1})`);
const circle = leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => color(d.data.without / d.data.pop));
return svg.node();
}
packed = d3.pack().size([size, size]).padding(3)(hierarchy);
hierarchy = d3.hierarchy({ children: grouped }).sum(d => d.pop)
grouped = {
const grouped = Array.from(d3.group(data, d => d.designation))
.map(([name, children]) => ({ name, children }));
grouped.forEach(d => {
d.children.sort(sorter[sort])
});
return grouped;
}
data = d3.csv(
"https://gist.githubusercontent.com/clhenrick/48f40bacd178b58d88b4144c44b2a2bb/raw/5f5c85ffc6f8158d96e192e1e8b1d0efd1e46177/acs5_2017_internet_access_joined_rural_pct.csv",
({ geoid, total_pop, with_broadband_access, no_internet_access, pct_rural_2010 }) =>
({
geoid,
pop: +total_pop,
with: +with_broadband_access,
without: +no_internet_access,
pct_rural: +pct_rural_2010,
designation: +pct_rural_2010 >= 50 ? "rural" : "urban"
})
);
sorter = ({
"pop_asc": (a, b) => a.pop - b.pop,
"pop_desc": (a, b) => b.pop - a.pop,
"without_asc": (a, b) => ratio(a) - ratio(b),
"without_desc": (a, b) => ratio(b) - ratio(a)
})
ratio = d => d.without / d.pop
color = d3.scaleSequential(d3.interpolateRdPu).domain([0, 1])
d3 = require("d3@5", "d3-array@2");
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.
