COVID-19 in the U.S. / Jake Low

Jake Low

Workspace

Published

Coronavirus

Edited

Apr 28, 2020

5 forks

Importers

46 stars

Coronavirus

Andy's Walgreens COVID-19 Tracker Tracker Belgium Vaccination Tracker - Progress of the vaccination campaign Vaccination against covid-19 in France 500,000 COVID-19 Deaths Covid-19 vaccinations: Bubbles Time Spiral with a COVID Demo COVID Masks Grid Cartogram component with live COVID demos (plus a MapEditor)The US COVID Syringe COVID-19 DK COVID-19 World Community Mobility Report by Google COVID 19 Chicago COVID ZIP Sparklines The COVID Syringe భారతదేశంలో కోవిడ్-19 SVG DataGrid with many features and a live COVID Dashboard demo The spread of Covid-19 in New Mexico Heatmap of COVID-19 Confirmed Cases by Age over Time in Japan The CoViD-19 Report Covid19 Worldwide Massachusetts Coronavirus Cases by Town Choropleth map about Covid19 in France Well ordered coronavirus heatmaps for US and the World COVID-19 Racial/Ethnic Mortality Analysis ProPublica's COVID Arrow Map Clustering students to slow virus spread inside schools COVID-19 in the USA Who Is Wearing Masks in the U.S.Covid-19 Viz Roundup Coronavirus Stats The Covid-19 Crisis' Impact on the Number of US Flight Passengers COVID-19 Daily New Cases COVID-19 Cases COVID–19 Bubble Chart with D3 Render Coronavirus Deaths by Race / Ethnicity How many SARS-CoV-2 tests are we running in the U.S.?COVID-19 Onset vs. Confirmation Peaks in confirmed daily deaths due to COVID-19 so far

COVID-19 in the U.S.

Recreating John Burn-Murdoch’s Coronavirus tracker Tracking COVID-19 Cases in Vietnam COVID-19 in NYC by Zip Code & Income Visualizing the Network Meta-Analysis of Covid-19 Studies xkcd COVID-19 spread sketch COVID-19's deaths in Europe Covid-19 (corona virus) deaths per 1,000,000 people COVID-19 Bubble map or spike map? (Twitter debate)A Timeline of Shelter-in-Place Where’s that $2 trillion going?Estimating SARS-COV-2 infections CODAVIM - County SARS-CoV-2 Epi Curve COVID-19 Curves (U.S.)COVID-19 Cases by County COVID-19 world growth rate A graphical experiment of exponential spread COVID-19 by US county COVID-19 Confirmed vs. New cases "Live" Logistic Coronavirus Death Counter Infografiche: COVID-19 in Italia Coronavirus (COVID-19) Globe Bar Chart Race, COVID-19 outbreak Worldwide to 24th March 2020 US Coronavirus testing by states United States Coronavirus Daily Cases Map (COVID-19)COVID-19 Numbers by State, Side by Side Recreating NYT U.S. Cases Map COVID-19 in Washington state COVID-19 outbreak in maps and charts COVID-19 Spreading trends Restaurants during COVID-19 social distancing COVID-19 Countries Trajectories in 3D States that aren't reporting aspects of their COVID-19 testing process Nextstrain Prototyping - Issue 817 Reviewing COVID-19 SARS-CoV-2 preprints from medRxiv and bioRxiv Coronavirus worldwide evolution Covid-19 New Cases Punchcard Covid-19 cases per district in Germany.COVID-19 Cases, Deaths, and Recoveries (Select Country)Quarantine Now Emissions in Wuhan COVID-19(nCOV-2019) Outbreak in S.Korea Movement of population between provinces in 2019-nCoV Comparing COVID-19 Growth Covid-19 derived chart Coronavirus Trends (COVID-19)Netherlands Coronavirus Daily Cases Map (COVID-19)Map and timeline of Corona outbreak SARS-CoV-2 Phylogenetic Tree Coronavirus data (covid-19)Visualizing the Logic of Exponential Viral Spread Italy Coronavirus Daily Cases Map (COVID-19)COVID-19 Fatality Rate

color = {

const palette = [

'#fff7ea',

'#fcd0b1',

'#faa580',

'#f77552',

'#f03528',

'#c51625',

'#96071e',

'#680114',

'#3d0000'

];

const min = 1e-4;

const max = 1e-2;

const interpolator = d3

.scaleLinear()

.domain(d3.range(0, 1.0 + epsilon, 1.0 / (palette.length - 1)))

.range(palette)

.interpolate(d3.interpolateHcl);

return d3.scaleSequentialLog([min, max], interpolator).clamp(true);

}

selectedDateAsISOString = (selectedDate || mostRecentDate).toISOString()

function casesPerCapita(fips) {

const cases = casesByDateByCounty.get(selectedDateAsISOString).get(fips) || 0;

const population = populations.get(fips);

return cases / population;

}

function countyFillColor(d) {

return color(casesPerCapita(d.id));

}

function countyTitleText(d) {

return `${d.properties.name} – ${formatValueAsPerCapita(casesPerCapita(d.id))}`;

}

formatValueAsPerCapita = {

const formatter = d3.format(".2~s");

return v => (v === 0 ? "0" : `1 in ${formatter(1 / v)}`);

}

casesByDateByCounty = d3.rollup(

csv,

v => v[v.length - 1].cases,

d => d.date.toISOString(),

d => d.fips

)

map = htm`

<svg

id="map"

class="map-${selectedState}"

x=${margin.left / 2}

y="55"

width=${viewbox.width * 0.55}

height="340"

viewBox="0 0 1000 750"

${nation}

</svg>

nation = htm`

class="nation"

ref=${el =>

d3.select(el).on("mouseleave", function(d) {

mutable selectedCounty = null;

})}

${states}

<path

class="boundaries"

d="${path(geo.meshes.states)}"

<path

class="outline"

d="${path(geo.features.nation)}"

</g>

states = {

let states = geo.features.states;

if (selectedState !== "US") {

states = states.filter(s => s.id === selectedState);

}

return states.map(

s =>

htm`

id=${"state-" + s.id}

class="state"

ref=${el =>

d3.select(el).call(selectedState === "US" ? activable : unactivable)}

${geo.features.counties.get(s.id).map(

c =>

htm`

<path

id=${"county-" + c.id}

class="county"

d=${path(c)}

ref=${el =>

.select(el)

.datum(c)

.call(selectedState !== "US" ? activable : unactivable)

.on("mouseenter", function(d) {

mutable selectedCounty = d.id;

})}

</path>

)}

${s.id === selectedState &&

htm`

<title>${s.properties.name}</title>

</path>

</g>

);

}

activable = selection =>

selection

.on("mouseover", function(d) {

d3.select(this)

.classed("active", true)

.raise();

})

.on("mouseout", function(d) {

d3.select(this)

.classed("active", false)

.lower();

})

unactivable = selection => selection.on("mouseover", null).on("mouseout", null)

casesAndDeaths = {

const totalCases = total.map(reshape("cases"));

const totalDeaths = total.map(reshape("deaths"));

const selectedCases = selected.map(reshape("cases"));

const selectedDeaths = selected.map(reshape("deaths"));

const priorCases = prior.map(reshape("cases"));

const priorDeaths = prior.map(reshape("deaths"));

const x = d3

.scaleUtc()

.domain([d3.min(allDates), new Date()])

.range([margin.left, viewbox.width - margin.right]);

const y = d3

.scaleLinear()

.domain([0, d3.max(total, d => d.cases)])

.range([viewbox.height - margin.bottom, margin.top])

.nice();

const xAxis = g =>

.call(

.axisBottom(x)

.ticks(new Set([...allDates].map(d => d.getTime())).size)

.tickFormat(d3.utcFormat("%b %d"))

.tickSizeOuter(0)

)

.call(g =>

.selectAll("text")

.style("text-anchor", "end")

.style("font-size", "small")

.style("font-weight", "normal")

.attr("dx", "-.8em")

.attr("dy", ".15em")

.attr("transform", "rotate(-65)")

.filter(

d =>

selectedDate && d.toDateString() === selectedDate.toDateString()

)

.style("font-weight", "bold")

);

const yAxis = g =>

g.call(d3.axisRight(y)).call(g =>

.style("font-size", "small")

.select(".domain")

.remove()

);

const area = d3

.area()

.curve(d3.curveLinear)

.defined(d => !isNaN(d.value))

.x(d => x(d.date))

.y0(y(0))

.y1(d => y(d.value));

const lc = priorCases.slice(-1)[0];

const ld = priorDeaths.slice(-1)[0];

const fmt = d3.format(".3~s");

function label(l, d) {

const offset = l === "cases" ? 25 : 10;

const str = fmt(d.value);

return htm`

<text

class="inline-label"

x=${Math.min(x(d.date), x(mostRecentDate) - 25)}

y=${Math.min(y(0) - offset, y(d.value))}

dx="${str.length * 0.33}em"

dy="-0.2em"

${fmt(d.value)} ${d.value === 1 ? l.substring(0, l.length - 1) : l}

</text>

}

const DOM = htm`

<g class="x axis" ref=${el => d3.select(el).call(xAxis)}

transform="translate(0,${viewbox.height - margin.bottom})"

<g class="y axis" ref=${el => d3.select(el).call(yAxis)}

transform="translate(${viewbox.width - margin.right},0)"

<text

text-anchor="middle"

font-size="small"

transform="translate(995, 230) rotate(-90)"

Total cases (pink) and deaths (red)

</text>

${lc && label("cases", lc)}

${ld && label("deaths", ld)}

${lc &&

htm`<path stroke="black" d=${`M${x(lc.date) + 0.5},${y(0)} v-5`} />`}

</svg>

return { x, y, xAxis, yAxis, DOM };

}

deltas = records =>

d3.pairs(records).map(([a, b]) => ({

from: a.date,

to: b.date,

cases: b.cases - a.cases,

deaths: b.deaths - a.deaths

}))

growthRate = {

const viewbox = { x: 0, y: 0, width: 1000, height: 250 };

const height = width / (viewbox.width / viewbox.height);

const x = casesAndDeaths.x;

const xAxis = casesAndDeaths.xAxis;

const totalDeltas = deltas(total);

const priorDeltas = deltas(prior);

const y = d3

.scaleLinear()

.domain([0, d3.max(totalDeltas, d => d.cases)])

.range([viewbox.height - margin.bottom, margin.top])

.nice();

const yAxis = g =>

.attr("transform", `translate(${viewbox.width - margin.right},0)`)

.call(d3.axisRight(y))

.call(g =>

.style("font-size", "small")

.select(".domain")

.remove()

);

const barWidth =

Math.floor((x.range()[1] - x.range()[0]) / allDates.length) - 1;

const bar = field => d => htm`

<rect

x="${x(d.to) - barWidth / 2}"

y="${y(d[field])}"

height="${Math.max(y(0) - y(d[field]), 0)}"

width=${barWidth}

const fmt = d3.format(".3~s");

const label = (f, d) => {

const offset = f === "cases" ? 25 : 10;

return htm`

<text

class="bar-label"

x=${x(d.to - 5)}

y=${Math.min(y(0) - offset, y(d[f]))}

dy="-0.2em"

${fmt(d[f])}

</text>

};

const ld = priorDeltas.slice(-1)[0];

const DOM = htm`

<g class="x axis" ref=${el => d3.select(el).call(xAxis)}

transform="translate(0,${viewbox.height - margin.bottom})"

<g class="y axis" ref=${el => d3.select(el).call(yAxis)} />

<g>

${totalDeltas.map(bar("cases"))}

</g>

${priorDeltas.map(bar("cases"))}

</g>

${priorDeltas.map(bar("deaths"))}

</g>

${ld && label("cases", ld)}

${ld && label("deaths", ld)}

</svg>

return { viewbox, x, y, xAxis, yAxis, DOM };

}

trajectories = {

const margin = { top: 20, bottom: 20, left: 20, right: 10 };

const threshold = 100;

const data = new Map(

[...recordsByGeography.entries()].map(([fips, entries]) => [

fips,

entries

.filter(d => d.cases >= threshold)

.map((d, i) => ({ day: i, value: d.cases }))

])

);

const days = data.get("US").slice(-1)[0].day;

const x = d3

.scaleLinear()

.domain([0, days + 2])

.range([2 * margin.left, width - margin.right])

.nice();

const xAxis = g =>

g.call(d3.axisBottom(x).ticks(days)).call(g =>

.selectAll("text")

.style("text-anchor", "middle")

.style("font-size", "small")

.style("font-weight", "normal")

.text(d => d)

);

const y = d3

.scaleLog()

.domain([

threshold,

d3.max(recordsByGeography.get(selectedState), d => d.cases)

])

.range([width * 0.5 - margin.bottom, margin.top])

.nice();

const yAxis = g =>

.attr("transform", `translate(${2 * margin.left},0)`)

.call(d3.axisLeft(y).ticks(6, "~s"))

.call(g =>

.style("font-size", "small")

.select(".domain")

.remove()

);

const line = d3

.line()

.defined(d => !isNaN(d.value))

.x(d => x(d.day))

.y(d => y(d.value));

// color scheme is "bold" from https://carto.com/carto-colors/

const color = [

"#7F3C8D",

"#11A579",

"#3969AC",

"#F2B701",

"#E73F74",

"#80BA5A",

"#E68310",

"#008695",

"#CF1C90",

"#f97b72",

"#4b4b8f"

];

function pos(d) {

return `translate(${x(d.day)},${y(d.value)})`;

}

function last(array) {

return array.slice(-1)[0];

}

let lines = Array.from(data.keys()).filter(v => v && v.length === 2);

let primaries = new Set(["US", "53", "06", "34", "36", "26", "25", "08"]);

if (selectedState !== "US") {

lines = [

selectedState,

...Array.from(data.keys()).filter(

v => v && v.length === 5 && v.startsWith(selectedState)

)

];

primaries = new Set(

lines

.sort((a, b) => d3.descending(data.get(a).length, data.get(b).length))

.slice(0, 4)

);

}

lines = lines.sort((a, b) =>

primaries.has(a) ? 1 : primaries.has(b) ? -1 : 0

);

lines = lines.sort((a, b) => (a === "08" ? 1 : b === "08" ? -1 : 0)); // HACK put CO on top

const fmt = d3.format(".3~s");

function hover(el) {

if ("ontouchstart" in document) {

el.style("-webkit-tap-highlight-color", "transparent")

.on("touchmove", moved)

.on("touchstart", entered)

.on("touchend", left);

} else {

el.on("mousemove", moved)

.on("mouseenter", entered)

.on("mouseleave", left);

}

const trajectories = el.selectAll("g.trajectory");

const dot = el.select("g.dot");

function moved() {

d3.event.preventDefault();

const i = Math.round(x.invert(d3.event.layerX));

if (i < 0) return;

const distance = (s, i) =>

s && s.length > i

? Math.abs(y(s[i].value) - d3.event.layerY)

: Infinity;

const [fips, s] = d3.least(lines.map(l => [l, data.get(l)]), ([_, s]) =>

distance(s, i)

);

if (distance(s, i) > 50) {

left();

return;

} else {

entered();

}

trajectories.classed("faded", true).classed("active", false);

trajectories

.filter(function() {

return d3.select(this).attr("id") === fips;

})

.classed("faded", false)

.classed("active", true)

.raise();

if (s) {

dot.attr("transform", `translate(${x(s[i].day)},${y(s[i].value)})`);

const prev = i > 1 ? s[i - 1] : s[i];

const next = i < s.length - 1 ? s[i + 1] : s[i];

const period =

(next.day - prev.day) /

(Math.log2(next.value) - Math.log2(prev.value));

const slope =

(y(next.value) - y(prev.value)) / (x(next.day) - x(prev.day));

const rot = (Math.atan(slope) * 180) / Math.PI;

dot

.select("path")

.attr("stroke", "#888")

.attr("d", "M-75,0 L75,0")

.attr("transform", `rotate(${rot})`);

dot.select("text.count").text(fmt(s[i].value));

dot

.select("text.slope")

.text(

`doubling every ${

period < 100 ? period.toPrecision(2) : period.round

} days`

);

dot.raise();

}

function entered() {

dot.attr("display", null);

}

function left() {

trajectories.classed("faded", false).classed("active", false);

trajectories

.filter(function() {

return primaries.has(d3.select(this).attr("id"));

})

.raise();

dot.attr("display", "none");

}

left();

}

const guides = [

{ label: "slope = cases double every day", period: 1 },

{ label: "...every second day", period: 2 },

{ label: "...every third day", period: 3 },

{ label: "...every week", period: 7 }

];

function drawguide(g) {

const [y0, y1] = y.domain();

const daysToYMax = (Math.log2(y1) - Math.log2(y0)) * g.period;

const l = [{ day: 0, value: y0 }];

const days = x.domain()[1];

if (daysToYMax < days) {

l.push({ day: daysToYMax, value: y1 });

} else {

l.push({ day: days, value: y0 * 2 ** (days / g.period) });

}

const mid = {

day: l[1].day / 2,

value: y0 * 2 ** (l[1].day / 2 / g.period)

};

const slope = (y(l[1].value) - y(l[0].value)) / (x(l[1].day) - x(l[0].day));

const rot = (Math.atan(slope) * 180) / Math.PI;

return htm`

<text

text-anchor="end"

transform="${pos(l[1])} rotate(${rot})"

dy="-0.25em"

${g.label}

</text>

</g>

}

function drawline(fips, i) {

const ds = data.get(fips);

if (ds.length === 0) return;

return htm`

id=${fips}

class=${

primaries.has(fips) ? "trajectory primary" : "trajectory secondary"

}

${fips === "US" ? fips : fips2name(fips)}

</text>

</g>

}

const DOM = htm`

<svg

width=${width}

height=${width * 0.5}

ref=${el => hover(d3.select(el))}

class="x axis"

ref=${el => d3.select(el).call(xAxis)}

transform="translate(0,${width * 0.5 - margin.bottom})"

<g class="y axis" ref=${el => d3.select(el).call(yAxis)} />

${guides.map(drawguide)}

${lines.map(drawline)}

</g>

</svg>

return { x, y, xAxis, yAxis, DOM };

}

mapstyles = html`

<style>

#map {

overflow: visible;

}

.nation .outline {

fill: none;

}

.map-US .nation .outline {

stroke: #666;

}

.nation .boundaries {

fill: none;

}

.map-US .nation .boundaries {

stroke: #666;

}

.nation .outline,

.nation .boundaries,

.active .outline,

.county.active {

stroke-width: 2px;

}

.state .outline {

fill: none;

stroke: none;

}

#map:not(.map-US) .state .outline {

stroke: #666;

}

.county {

stroke: none;

}

#map:not(.map-US) .county {

stroke: #666;

}

.state.active .outline,

.county.active {

stroke: mediumblue !important;

stroke-width: 5px !important;

}

.state.active .outline {

fill: rgba(255, 255, 255, 0.1);

}

</style>

plotstyles = html`

<style>

.cases-shadow {

fill: #f5f5f5;

}

.deaths-shadow {

fill: #e8e8e8;

}

.cases-after-selected-date {

fill: ${colors.casesFaded};

}

.deaths-after-selected-date {

fill: ${colors.deathsFaded};

}

.cases-before-selected-date {

fill: ${colors.cases};

}

.deaths-before-selected-date {

fill: ${colors.deaths};

}

.inline-label {

text-anchor: middle;

font-family: sans-serif;

font-size: small;

}

.x.axis .tick text {

visibility: hidden;

}

.x.axis .tick:nth-child(3n - ${(allDates.length - 1) % 3}) text {

visibility: visible;

}

</style>

html`

<style>

.shadow.bars {

fill: ${colors.grey1};

}

.cases.bars {

fill: peachpuff;

}

.deaths.bars {

fill: palevioletred;

}

.bar-label {

text-anchor: middle;

font-family: sans-serif;

font-size: small;

}

</style>

html`

<style>

.trajectory path {

fill: none;

stroke-width: 2px;

}

.trajectory.secondary:not(.active) path,

.trajectory.faded path {

stroke: #aaa;

}

.trajectory text {

font-size: small;

user-select: none;

pointer-events: none;

fill: black;

paint-order: stroke;

stroke: white;

stroke-width: 2px;

}

.trajectory.secondary:not(.active) text,

.trajectory.secondary.faded text {

visibility: hidden;

}

.dot {

font-family: sans-serif;

font-size: 10px;

user-select: none;

pointer-events: none;

mix-blend-mode: darken;

}

.guide text {

font-size: small;

pointer-events: none;

user-select: none;

}

</style>

html`

<style>

text {

font-family: sans-serif;

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more