map = {
// Create SVG
var svg = d3.select(DOM.svg(width, height));
// Create map
var countyMap = svg.append("g")
.selectAll("path")
.data(counties.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "#cccc")
.attr("stroke", "white")
.attr("stroke-width", 0.1);
// Draw the state boundaries (could do this in a cleaner way with topoJSON)
svg.append("g")
.selectAll("path")
.data(states.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "white")
.attr("stroke-width", 1)
.attr("fill", "none");
// Add legend
svg.append("g")
.attr("transform", "translate("+600+","+100+")")
.append(() => legend({color,
title: "COVID Cases",
ticks : bins,
tickFormat : ".0s",
width: 300}
)
);
// Update the fill based on date scrubber
function update(date) {
countyMap.attr("fill", function(d) {
var cases = data.get(d.properties["COUNTY_FIPS"] + " " + dateToString(date));
if (cases) {
var fcolor = color(cases);
} else {
var fcolor = "#cccc";
}
return fcolor ;
});
}
//return svg.node();
return Object.assign(svg.node(), {update});
}
iowaCounties = counties.features.filter(county => county.properties.STATE === "19")
counties.features = iowaCounties
iowaState = states.features.filter(state => state.properties.NAME === "Iowa")
states.features = iowaState
data = {
const dataMap = d3.map();
const data = await d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv", d => {
dataMap.set(+d.fips + " " + d.date, +d.cases);
});
return dataMap;
}
color = d3.scaleQuantile(d3.schemeRdPu[bins]).domain(clean.filter(d => d[1] === dates[dates.length-1]).map(d => d[2]));
iowaProjection = d3.geoAlbers()
.center([0, 41.5])
.rotate([93, 0])
.parallels([29.5, 45.5])
.scale(6000)
.translate([width / 2, height / 2]);
path = d3.geoPath().projection(iowaProjection);
projection = d3.geoAlbersUsa()
.translate( [width/2, height/2] );
function dateToString(date) {
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
}
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.
