Maps, Data, Viz, UX, Design
Public
Edited
Mar 13, 2022
68 stars
map1 = createBaseMap()
map2 = {
const map = createBaseMap();
d3.select(map)
.append("g")
.classed("centroids", true)
.selectAll("circle")
.data(states.features.map(d => d.properties))
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", NODE.MIN_RADIUS)
.attr("fill", "blue");
return map;
}
createStatePacks = (data) => {
const statesPacked = new Map();
for (let [k, v] of data) {
v.sort((a, b) => (b.total_households - a.total_households)); // step 0
v = v.map(d => ({ data: d, r: radius(d.total_households) })); // step 1
const nodes = packSiblings(v) // step 1
const { r } = packEnclose(nodes) // step 2
const state = states.features.find(d => d.properties.name === k); // step 3
const {x, y} = state.properties; // step 3
statesPacked.set(k, { nodes, r, x, y }); // step 4
}
return statesPacked;
}
map3 = {
const map = createBaseMap();
const svg = d3.select(map);
const statesPacked = createStatePacks(dataByState);
d3.select(map)
.append("g")
.classed("centroids", true)
.selectAll("circle")
.data([...statesPacked])
.join("circle")
.attr("cx", ([k, d]) => d.x)
.attr("cy", ([k, d]) => d.y)
.attr("r", ([k, d]) => d.r)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 1);
return map;
}
applySimulation = (nodes) => {
const simulation = d3.forceSimulation(nodes)
.force("cx", d3.forceX().x(d => width / 2).strength(0.02))
.force("cy", d3.forceY().y(d => height / 2).strength(0.02))
.force("x", d3.forceX().x(d => d.x).strength(0.3))
.force("y", d3.forceY().y(d => d.y).strength(0.3))
.force("charge", d3.forceManyBody().strength(-1))
.force("collide", d3.forceCollide().radius(d => d.r + NODE.PADDING).strength(1))
.stop()
while (simulation.alpha() > 0.01) {
simulation.tick();
}
return simulation.nodes();
}
map4 = {
const map = createBaseMap();
const statesPacked = createStatePacks(dataByState);
let values = [...new Map(statesPacked).values()];
values = applySimulation(values)
d3.select(map)
.append("g")
.classed("centroids", true)
.selectAll("circle")
.data(values)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("r", (d) => d.r)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 1)
return map;
}
map5 = {
const map = createBaseMap()
const svg = d3.select(map);
const statesPacked = createStatePacks(dataByState);
let values = [...new Map(statesPacked).values()];
values = applySimulation(values)
svg.select(".state-boundaries")
.attr("stroke", "#fff");
const statePacks = svg
.append("g")
.classed("state-packs", true)
.selectAll(".state-pack")
.data(values)
.enter()
.append("g")
.classed("state-pack", true)
.attr("transform", d => `translate(${d.x}, ${d.y})`);
statePacks
.append("circle")
.attr("r", d => d.r)
.attr("fill", "#e2e2e2")
.attr("stroke", "#333");
const counties = statePacks
.selectAll(".county-centroid")
.data(d => d.nodes)
.enter()
.append("circle")
.classed("county-centroid", true)
.attr("r", d => d.r)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("fill", d => color(withBroadbandPct(d.data)))
counties.append("title")
.text(d => `${d.data.county}, ${d.data.state}\nTotal Households: ${d.data.total_households.toLocaleString()}\nWith broadband subscription: ${d3.format(".2f")(withBroadbandPct(d.data) * 100)}%`)
return map;
}
height = 625;
NODE = ({ MIN_RADIUS: 2.5, MAX_RADIUS: 20, PADDING: 2 });
packSiblings = (values) => d3.packSiblings(values)
packEnclose = (nodes) => d3.packEnclose(nodes)
scheme = d3.schemeGnBu
color = d3.scaleQuantize()
.domain([0, 1])
.range(scheme[9])
radius = d3.scaleSqrt()
.domain(d3.extent(data, d => d.total_households))
.range([NODE.MIN_RADIUS, NODE.MAX_RADIUS])
geoPath = d3.geoPath()
createBaseMap = () => {
const svg = d3.create("svg")
.attr("viewBox", `0 0 960 ${height}`)
.style("width", "100%")
.style("height", "auto")
svg.append("rect")
.attr("width", 960)
.attr("height", height)
.attr("fill", "white");
svg.append("path")
.classed("state-boundaries", true)
.datum(stateBoundaries)
.attr("fill", "none")
.attr("stroke", "lightgray")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr("d", geoPath);
svg.append("path")
.classed("nation-boundary", true)
.datum(nation)
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-linejoin", "round")
.attr("d", geoPath);
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
withBroadbandPct = d => {
return d.with_broadband_subscription / d.total_households;
}
html`<style>
svg .county-centroid:hover {
fill: #333;
}
</style>`
dataByState = d3.group(data, d => d.state)
data = d3.csv("https://gist.githubusercontent.com/clhenrick/5fe3463586ee196820ac74a62fd0445a/raw/09422f3803f59e5530836b1614774c5a7a9381f3/acs5_2017_internet_access_joined_rural_pct_names.csv", parseRow)
parseRow = (row) => {
for (let key in row) {
if (key === "name") {
const [county, state] = row.name.split(", ");
row.state = state;
row.county = county;
delete row.name;
} else if (key !== "geoid") {
row[key] = Number(row[key]);
}
}
return row;
}
nation = topojson.mesh(us, us.objects.nation)
states = {
const states = topojson.feature(us, us.objects.states);
states.features.forEach(feature => {
const [x, y] = geoPath.centroid(feature)
feature.properties = {...feature.properties, x, y};
});
return states;
}
stateBoundaries = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
counties = topojson.feature(us, us.objects.counties);
us = d3.json("https://unpkg.com/us-atlas@2/us/10m.json")
topojson = require("topojson-client@3")
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.
