Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
Published
Edited
Jul 15, 2020
Importers
42 stars
{
const c = `rgb(255, 255, 255, 0.5)`;
return html`<style>
form output {
font-weight: bold;
font-size: 14px;
}
.wrapper {
text-align: center;
}
.map {
text-anchor: middle;
font-family: sans-serif;
font-size: 10px;
margin: 0 auto;
}
.subunit {
fill: #f4f4f4;
stroke: #999;
stroke-width: 0.5;
}
.place {
fill: rgba(0,0,0,0.8);
stroke: none;
pointer-events: none;
}
.place-label {
pointer-events: none;
text-shadow: ${c} 1px 0px 0px, ${c} 0.540302px 0.841471px 0px, ${c} -0.416147px 0.909297px 0px, ${c} -0.989992px 0.14112px 0px, ${c} -0.653644px -0.756802px 0px, ${c} 0.283662px -0.958924px 0px, ${c} 0.96017px -0.279415px 0px;
}
.place-label, .legend-title {
font-weight: bold;
font-size: 12px;
fill: rgba(0,0,0,0.8);
}
.bubble, .legend-bubble {
stroke-width: 0.8;
stroke: rgba(0,0,0,0.3)
}
.bubble:hover {
stroke: rgba(0,0,0,0.6);
stroke-width: 1.2;
cursor: crosshair;
}
.legend text {
fill: #000;
}
.legend-bubble {
stroke: rgba(0,0,0,0.4);
}
.legend-title {
text-anchor: start;
}
</style>`;
}
legendRadii = [10, 1000, 10000, 50000]
function placeName(d) {
if (d.county === "New York City") return "New York City";
const loc = getLocation(d);
return `${loc.properties.name} ${
d.state === "Louisiana" ? "Parish" : "County"
}`;
}
function getLocation(d) {
let location = countyMap.get(d.fips);
if (!location && d.county === "New York City")
location = countyMap.get("36061");
if (!location) location = stateMap.get(d.state);
if (!location) console.warn("No location found for: " + JSON.stringify(d));
return location;
}
map.update(index)
w = 975
h = 610
albersProjection = {
// XXX super hacky
const proj = d3.geoAlbersUsa().scale(1300);
return function(coords) {
const [x, y] = proj(coords);
return [x + 6, y + 54];
};
}
magnitude = toMagnitude(maxCases)
countyMap = new Map(
topojson.feature(us, us.objects.counties).features.map(d => [d.id, d])
)
stateMap = new Map(
topojson
.feature(us, us.objects.states)
.features.map(d => [d.properties.name, d])
)
function toMagnitude(n) {
var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
return Math.pow(10, order);
}
mutable index = 0
{
mutable index = dates.indexOf(day);
}
radius = d3
.scaleSqrt()
.domain([0, maxCases])
.range([0, maxRadius])
colorScale = d3
.scaleSqrt()
.domain([0, maxCases])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])
delay = 250
maxCases = d3.max(recentData.map(d => +d.cases))
excludeTerritories = new Set(["Guam", "Puerto Rico", "Virgin Islands"])
data = d3
.nest()
.key(d => d.date)
.entries(rawData.filter(d => !excludeTerritories.has(d.state)))
.map(d => d.values)
.filter(d => d[0].date >= startDate)
rawData = d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv")
path = d3.geoPath()
maxRadius = 50
recentData = data[data.length - 1]
startDate = "2020-03-01"
dates = data.map(d => d[0].date).map(d => new Date(`${d}T20:00Z`))
places = d3.csvParse(await FileAttachment("us-places.csv").text())
sFormat = d3.format(".1s")
numFormat = d3.format("~s")
us = FileAttachment("counties-albers-10m.json").json()
import { Scrubber } from "@mbostock/scrubber"
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
