projection = d3
.geoAlbersUsa()
.translate([width / 2, mapHeight / 2])
.scale([width / 0.8])
// .fitSize([mapWidth, mapHeight], shapesWithData)
path = d3.geoPath(projection)
map = {
let localNodes = shapesWithData
.map((d) => {
return {
id: d.id,
metric: d.metric,
name: d.properties.name,
state: d.state,
r: rScale(d.metric), // || 2,
population: d.population,
p: rPopScale(d.population),
cx: d.centroid ? d.centroid[0] : width / 2,
cy: d.centroid ? d.centroid[1] : mapHeight / 2,
x: d.centroid ? d.centroid[0] : width / 2,
y: d.centroid ? d.centroid[1] : mapHeight / 2
};
})
.filter((d) => !isNaN(d.r));
let simulation = d3
.forceSimulation(localNodes)
.force(
"collide",
d3
.forceCollide()
.radius((d) => d.p * 1.09) // for spacing by metric
.strength(0.9)
)
.force(
"x",
d3.forceX((d) => {
return d.cx;
})
)
.force(
"y",
d3.forceY((d) => {
return d.cy;
})
);
simulation.tick(250);
// localNodes.sort((a, b) => a.metric - b.metric);
const svg = d3
.select(DOM.svg(mapWidth, mapHeight))
.attr("viewBox", `-25, -25, ${mapWidth + 50}, ${mapHeight + 60}`)
// .attr('width', mapWidth)
// .attr('height', mapHeight)
.attr("preserveAspectRatio", "xMidYMid slice")
.style("width", "100%")
.style("height", "auto")
.style("font-size", 12)
.style("background-color", "#111");
let node = svg.node();
svg
.append("rect")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("fill", "#111");
// County outlines
svg
.append("g")
.selectAll("path")
.data(shapesWithData)
.join("path")
.attr("fill", (d) => (d.metric ? "#222" : "#000"))
.attr("d", path);
// State outlines
svg
.append("g")
.attr("stroke-width", 1)
.selectAll("path")
.data(stateShapes)
.join("path")
.style("stroke", (d, i) => {
return "#666";
})
.style("fill", "none")
.attr("d", path);
let centroids = svg
.append("g")
.selectAll("circle.centroid")
.data(localNodes)
.join("circle")
.classed("centroid", true)
.sort((a, b) => {
return b.r - a.r;
})
.attr("id", (d) => slugify(d.name + " " + d.state))
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("r", (d) => d.p)
.attr("stroke-width", 0.5)
.attr("fill-opacity", 0.96)
.attr("fill", (d, i) => {
if (!d.metric) return "none";
else return colorScale(d.metric || 0);
})
.on("click", (d) => {
console.log("circle", d);
});
return node;
}
rPopScale = d3.scaleSqrt().domain(popExtent).range([0.75, 29])
colorScale = d3.scaleQuantize(
signalMap[signal].extent,
d3.schemeRdGy[5].reverse()
// d3.schemeRdYlBu[10].reverse()
)
// extent = d3.extent(shapesWithData, d => d.metric)
extent = [0, 200]
data = fetchData(signalMap[signal], date, fips)
metrics = new Map(data.epidata.map(d => [d.geo_value, d.value]))
reduceMetrics = data.epidata.reduce((m, d) => {
m[d.geo_value] = d.value;
return m;
}, {})
fetchData = function (signal, date = "20200703", fips = "*") {
let apiURL = `https://api.covidcast.cmu.edu/epidata/api.php?source=covidcast&cached=true&time_type=day&data_source=${signal.id}&signal=${signal.signal}&geo_type=county&time_values=${date}&geo_value=${fips}`;
return d3.json(apiURL);
}
rScale = d3
.scaleSqrt()
.domain(extent)
.range([0.1, 12])
usShapes = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
countyShapes = topojson
.feature(usShapes, usShapes.objects.counties)
.features.sort((a, b) => +a.id - +b.id)
stateShapes = topojson
.feature(usShapes, usShapes.objects.states)
.features.sort((a, b) => +a.id - +b.id)
shapesWithData = countyShapes.map((s) => ({
...s,
state: statefips.get(s.id.slice(0, 2))[0].name,
population: pops.get(s.id),
metric: metrics.get(s.id),
// centroid: turf.centroid(s.geometry)
centroid: projection(turf.centroid(s.geometry).geometry.coordinates)
}))
shapesWithData[0].centroid
shapesWithData[1].geometry
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.
