Published
Edited
Apr 4, 2021
3 stars
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 700])
.style("width", "100%")
.style("height", "auto");
svg
.append("g")
.selectAll("path")
.data(
topojson.feature(topojson_data, topojson_data.objects.counties).features
)
.enter()
.append("path")
.attr("fill", function(d) {
if (!county_data[d.id]) {
return 'white';
}
let v = county_data[d.id].Series_Complete_65PlusPop_Pct;
return d3.interpolate("white", "green")(v / 100);
})
.attr("d", path)
.append("title") // Tooltip
.text(function(d) {
if (!county_data[d.id]) {
return '';
}
return `${
county_data[d.id].Series_Complete_65PlusPop_Pct
}% of the 65+ population in ${county_data[d.id].County}, ${county_data[d.id].StateAbbr.trim()} have had the complete vaccination`;
});
return svg.node();
}
county_dates = (await fetch(
"https://cdc-vaccination-history.datasette.io/cdc.json?sql=select%20distinct%20Date%20from%20daily_reports_counties%20order%20by%20Date&_shape=arrayfirst"
)).json()
topojson_url = 'https://d3js.org/us-10m.v1.json'
topojson_data = await (await fetch(topojson_url)).json()
async function cachedFetch(url) {
window._cache = window._cache || {};
if (!window._cache[url]) {
window._cache[url] = await d3.csv(url);
}
return window._cache[url];
}
path = d3.geoPath()
topojson = require('topojson')
county_data_url = `https://cdc-vaccination-history.datasette.io/cdc/daily_reports_counties.csv?_stream=on&Date=${county_date}&_size=max`
county_csv_data = await cachedFetch(county_data_url)
county_data = county_csv_data.reduce((acc, value) => {
acc[value.FIPS] = value;
return acc;
}, {})
import { Scrubber } from "@mbostock/scrubber"
d3 = require("d3@6", "d3-geo-projection@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.
