EJ Fox & Ian Johnson
streaming data, code, acid, design
CMU COVIDcast API: Bubbles Textures Interactive TimelapseCMU COVIDcast API: Bubbles Dark ModeCMU COVIDcast API: Counties Sorted by PopulationCMU COVIDcast API: Bubbles ExportUS Bubble Choropleth: Travel From CentroidCMU COVIDcast APICMU COVIDcast API: Map makerCMU COVIDcast API: Map maker Bubbles Canvas
Map Maker Dot Density: Cumulative Covid Cases
showCountyLines = false
map = makeMap(nationShape)
ny = makeMap(getState("New York"))
fl = makeMap(getState("Florida"))
ca = makeMap(getState("California"))
tx = makeMap(getState("Texas"))
function makeMap(zoomShape) {
let ctx = DOM.context2d(mapWidth, mapHeight);
// ctx.canvas.width = mapWidth; // * window.devicePixelRatio;
// ctx.canvas.height = mapHeight; // * window.devicePixelRatio;
ctx.canvas.width = mapWidth;
ctx.canvas.height = mapHeight;
ctx.canvas.style.width = mapWidth + "px";
ctx.canvas.style.height = mapHeight + "px";
let projection = d3
.geoAlbersUsa()
.fitSize([mapWidth - 50, mapHeight - 50], zoomShape);
let path = d3.geoPath(projection).context(ctx);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, mapWidth, mapHeight);
// let r = 0.5;
let r = 1;
ctx.strokeStyle = "#111";
ctx.lineWidth = 2;
ctx.globalAlpha = 1;
ctx.beginPath();
path(zoomShape);
ctx.stroke();
shapesWithData.forEach(d => {
ctx.strokeStyle = "#ddd";
ctx.lineWidth = .5;
ctx.globalAlpha = 0;
if (d.nyt) ctx.globalAlpha = 1;
if (showCountyLines) {
ctx.beginPath();
path(d);
ctx.stroke();
}
const fillColor = d3.color(colorScale(colorScale.domain()[1]));
fillColor.opacity = 0.25;
ctx.fillStyle = fillColor.toString();
if (d.points && d.points.features) {
d.points.features.forEach(feature => {
// const {
// properties: { color }
// } = feature;
const {
geometry: {
coordinates: [x, y]
}
} = feature;
let c = projection([x, y]);
if (!c) return;
// console.log({ x, y, feature });
// ctx.fillStyle = color;
ctx.fillRect(c[0], c[1], r, r);
});
}
});
ctx.fillStyle = "#111";
ctx.beginPath();
ctx.font = '24px Helvetica';
ctx.fillText(normalDate(date), mapWidth / 2 - 40, 35);
ctx.fill();
return ctx.canvas;
}
nytDataWithRollingAverages = {
const byCounty = Array.from(d3.group(rawData, d => d.county));
const byCountyCoerced = byCounty.map(d => {
const [name, values] = [d[0], d[1]];
return { name, values };
});
return byCountyCoerced;
}
nytDots = d3.group(rawData, d => d.date)
nytDots.get(normalDate(date))
nytCounties = d3.group(nytDots.get(normalDate(date)), d => d.fips)
// projection = d3.geoAlbersUsa().fitSize([mapWidth, mapHeight], nationShape)
// .translate([mapWidth / 2, mapHeight / 2])
// .scale([mapWidth])
import { rawData, data as nytdata } with {
nytStart as startDate
} from "@jashkenas/united-states-coronavirus-daily-cases-map-covid-19"
nytStart = normalDate(start_date)
nytdata
legend({
color: colorScale,
title: "Total Cumulative Cases",
width: width
})
extent = d3.extent(rawData, d => +d.cases)
// 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;
// }, {})
// metricExtent = d3.extent(Array.from(metrics), d => d[1])
dotScale = d3
.scaleLinear()
// .domain(metricExtent)
.domain([0, 5000])
.range([0, 500])
// rScale = d3
// .scaleSqrt()
// .domain(metricExtent)
// .range([0.1, 12])
// popExtent = d3.extent(shapesWithData, s => {
// return s.population;
// })
// rPopScale = d3
// .scaleSqrt()
// .domain(popExtent)
// .range([0.1, 12])
// rPopScale(762)
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)
nationShape = topojson.feature(usShapes, usShapes.objects.nation).features[0]
stateShapes = topojson
.feature(usShapes, usShapes.objects.states)
.features.sort((a, b) => +a.id - +b.id)
getState("New York")
getState = function(state) {
return stateShapes.filter(
d => d.properties.name.toLowerCase() == state.toLowerCase()
)[0];
}
shapesWithData = countyShapes.map(s => {
let nyt = nytCounties.get(s.id) || [];
const nextData = {
...s,
population: pops.get(s.id),
// metric: metrics.get(s.id),
centroid: turf.centroid(s),
nyt: nyt[0]
};
nextData.points = generateDensity(nextData);
return nextData;
})
moment = require('moment')
import { slider, checkbox, radio, color } from "@jashkenas/inputs"
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.
