The avatar for @jashkenas
Jeremy Ashkenas
Used to work on @observablehq — still think it rocks. 🏍 🌎 👶
Published
Coronavirus
Edited
Apr 29, 2022
6 forks
56 stars
1
Coronavirus
Andy's Walgreens COVID-19 Tracker TrackerBelgium Vaccination Tracker - Progress of the vaccination campaignVaccination against covid-19 in France500,000 COVID-19 DeathsCovid-19 vaccinations: BubblesTime Spiral with a COVID DemoCOVID MasksGrid Cartogram component with live COVID demos (plus a MapEditor)The US COVID SyringeCOVID-19 DKCOVID-19 World Community Mobility Report by GoogleCOVID 19Chicago COVID ZIP SparklinesThe COVID Syringeభారతదేశంలో కోవిడ్-19SVG DataGrid with many features and a live COVID Dashboard demoThe spread of Covid-19 in New MexicoHeatmap of COVID-19 Confirmed Cases by Age over Time in JapanThe CoViD-19 ReportCovid19 WorldwideMassachusetts Coronavirus Cases by TownChoropleth map about Covid19 in FranceWell ordered coronavirus heatmaps for US and the WorldCOVID-19 Racial/Ethnic Mortality AnalysisProPublica's COVID Arrow MapClustering students to slow virus spread inside schoolsCOVID-19 in the USAWho Is Wearing Masks in the U.S.Covid-19 Viz RoundupCoronavirus StatsThe Covid-19 Crisis' Impact on the Number of US Flight PassengersCOVID-19 Daily New CasesCOVID-19 CasesCOVID–19 Bubble Chart with D3 RenderCoronavirus Deaths by Race / EthnicityHow many SARS-CoV-2 tests are we running in the U.S.?COVID-19 Onset vs. ConfirmationPeaks in confirmed daily deaths due to COVID-19 so farCOVID-19 in the U.S.Recreating John Burn-Murdoch’s Coronavirus trackerTracking COVID-19 Cases in VietnamCOVID-19 in NYC by Zip Code & IncomeVisualizing the Network Meta-Analysis of Covid-19 Studiesxkcd COVID-19 spread sketchCOVID-19's deaths in EuropeCovid-19 (corona virus) deaths per 1,000,000 peopleCOVID-19 Bubble map or spike map? (Twitter debate)A Timeline of Shelter-in-PlaceWhere’s that $2 trillion going?Estimating SARS-COV-2 infectionsCODAVIM - CountySARS-CoV-2 Epi CurveCOVID-19 Curves (U.S.)COVID-19 Cases by CountyCOVID-19 world growth rateA graphical experiment of exponential spreadCOVID-19 by US countyCOVID-19 Confirmed vs. New cases"Live" Logistic Coronavirus Death CounterInfografiche: COVID-19 in ItaliaCoronavirus (COVID-19) GlobeBar Chart Race, COVID-19 outbreak Worldwide to 24th March 2020US Coronavirus testing by statesUnited States Coronavirus Daily Cases Map (COVID-19)COVID-19 Numbers by State, Side by SideRecreating NYT U.S. Cases MapCOVID-19 in Washington stateCOVID-19 outbreak in maps and chartsCOVID-19 Spreading trendsRestaurants during COVID-19 social distancingCOVID-19 Countries Trajectories in 3DStates that aren't reporting aspects of their COVID-19 testing processNextstrain Prototyping - Issue 817Reviewing COVID-19 SARS-CoV-2 preprints from medRxiv and bioRxivCoronavirus worldwide evolutionCovid-19 New Cases PunchcardCovid-19 cases per district in Germany.COVID-19 Cases, Deaths, and Recoveries (Select Country)Quarantine NowEmissions in WuhanCOVID-19(nCOV-2019) Outbreak in S.KoreaMovement of population between provinces in 2019-nCoVComparing COVID-19 GrowthCovid-19 derived chartCoronavirus Trends (COVID-19)Netherlands Coronavirus Daily Cases Map (COVID-19)Map and timeline of Corona outbreakSARS-CoV-2 Phylogenetic TreeCoronavirus data (covid-19)Visualizing the Logic of Exponential Viral Spread
Italy Coronavirus Daily Cases Map (COVID-19)
COVID-19 Fatality Rate
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const c = `rgb(255, 255, 255, 0.5)`;
return html`<style>
form output {
font-weight: bold;
font-size: 14px;
}
.wrapper {
text-align: center;
}
.italy {
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;
}
.place-label, .legend-title {
font-weight: bold;
font-size: 13px;
fill: rgba(0,0,0,0.8);
}
.place-label {
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;
}
.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>`;
}
Insert cell
legendRadii = [10, 500, 2000, 10000]
Insert cell
map.update(index)
Insert cell
w = Math.min(width, 700)
Insert cell
h = Math.round(w * 1.2)
Insert cell
maxLegend = Math.round(maxCases / magnitude) * magnitude
Insert cell
magnitude = toMagnitude(maxCases)
Insert cell
function toMagnitude(n) {
var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
return Math.pow(10, order);
}
Insert cell
mutable index = 0
Insert cell
{
mutable index = dates.indexOf(day);
}
Insert cell
radius = d3
.scaleSqrt()
.domain([0, maxCases])
.range([0, maxRadius])
Insert cell
colorScale = d3
.scaleSqrt()
.domain([0, maxCases])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])
Insert cell
delay = 100
Insert cell
maxCases = d3.max(recentData.map(d => +d.totale_casi))
Insert cell
data = responses.map(r => d3.csvParse(r))
Insert cell
breakpoint = 500
Insert cell
maxRadius = w > breakpoint ? 30 : 18
Insert cell
recentData = data[data.length - 1]
Insert cell
responses = Promise.all(urls.map(u => fetch(u))).then(responses =>
Promise.all(responses.filter(r => r.ok).map(r => r.text()))
)
Insert cell
csvs = Promise.all(urls.map(u => fetch(u).then(u => u.text())))
Insert cell
urls = dateStrings.map(d => baseUrl.replace("DATE", d))
Insert cell
baseUrl = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province-DATE.csv"
Insert cell
startDate = new Date("2020-02-24T11:00:00Z")
Insert cell
endDate = new Date("2020-06-25T11:00:00Z")
Insert cell
dateStrings = dates.map(
d =>
d
.toISOString()
.replace(/-/g, '')
.split("T")[0]
)
Insert cell
dates = dateRange(startDate, endDate)
Insert cell
function dateRange(start, end) {
const duration = 1000 * 60 * 60 * 24;
const dates = [];
let ms = start * 1;
while (ms < end * 1) {
dates.push(new Date(ms));
ms += duration;
}
return dates;
}
Insert cell
allProvinces = topojson.feature(italy, italy.objects.subunits)
Insert cell
provinces = ({
...allProvinces,
// Nix Pantelleria
features: allProvinces.features.filter(
f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36
)
})
Insert cell
places = topojson.feature(italy, italy.objects.places)
Insert cell
sFormat = d3.format(".1s")
Insert cell
numFormat = d3.format(",")
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
projection = d3
.geoAlbers()
.rotate([-12.8, 0])
.parallels([40, 50])
.fitExtent([[0, 0], [w, h]], provinces)
Insert cell
italy = FileAttachment("italy2@1.json").json()
Insert cell
import { Scrubber } from "@mbostock/scrubber"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell

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