Maps, Data, Viz, UX, Design
Published
Edited
Jan 17, 2019
4 forks
19 stars
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: data.sort(sorter[sort]) }).sum(d => d.pop)
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 })
);
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])
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.
