EJ Fox & Ian Johnson
streaming data, code, acid, design
date = "20200801"
title = "Daily COVID cases per 100k"
+now
+dates[2]
rPopScale = d3
.scaleSqrt()
.domain(popExtent)
.range([2, 20])
projection = d3
.geoAlbersUsa()
.translate([mapWidth / 2, mapHeight / 2 + 20])
.scale([1150])
legendSize = 50
signalMap[signal].extent[1]
lineSize = 13
orientation = "3/8"
// q = d3.scaleQuantize([1, 10], ramp2)
q = d3.scaleQuantize(signalMap[signal].extent, ramp)
color = "#fff"
ramp = [
// textures
// .paths()
// .d("crosses")
// .size(lineSize * 0.75)
// .lighter(),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 0.5)
.lighter(),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 0.7)
.lighter(),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 0.9),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize)
.heavier(1),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 1.1)
.heavier(1.5),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 1.2)
.heavier(2),
textures
.lines()
.stroke(color)
.orientation(orientation)
.size(lineSize * 2)
.heavier(4)
]
import { pathMonth } from "@d3/calendar-view"
now = realDate(date).toDate()
pathMonth(d3.utcMonth(now))
dates = {
let month = d3.utcMonth(now);
return d3.timeDay.range(
month,
d3.timeDay.offset(d3.timeMonth.offset(month, 1), -1)
);
}
d3.utcMonth(now)
d3.timeMonth.offset(d3.utcMonth(now), 1)
cellSize = 11
dates
circles = {
let localNodes = shapesWithData
.map(d => {
let p = projection(d.centroid.geometry.coordinates) || [0, 0];
return {
id: d.id,
metric: d.metric,
name: d.properties.name,
state: d.state,
r: rScale(d.metric), // || 2,
population: d.population,
p: rPopScale(d.population),
cx: p[0],
cy: p[1],
x: p[0],
y: p[1]
};
})
.filter(d => !isNaN(d.r));
// console.log(localNodes);
let simulation = d3
.forceSimulation(localNodes)
.force(
"collide",
d3
.forceCollide()
// .radius(d => d.p) // for spacing by population
.radius(d => d.p * 1.4) // for spacing by metric
.strength(0.85)
)
.force(
"x",
d3.forceX(d => {
return d.cx;
})
)
.force(
"y",
d3.forceY(d => {
return d.cy;
})
);
simulation.tick(200);
localNodes.sort((a, b) => a.metric - b.metric);
return localNodes;
}
// colorScale = d3.scaleSequential(
// // d3.extent(shapesWithData, d => d.metric),
// signalMap[signal].extent,
// // [0, 3000],
// d3.interpolateReds
// )
colorScale = d3.scaleQuantize(
signalMap[signal].extent,
d3.schemeYlGnBu[8].reverse()
)
// colorScale = d3.scaleQuantize(extent, signalMap[signal].colorScheme)
signal
signalMap
slugify = require("slugify")
slugify("Hello World")
// extent = d3.extent(shapesWithData, d => d.metric)
extent = [0, 200]
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(shapesWithData, s => {
// return s.metric;
// })
rScale = d3
.scaleSqrt()
.domain(extent)
.range([0.1, 12])
popExtent = d3.extent(shapesWithData, s => {
return s.population;
})
rPopScale(762)
signal
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)
stateShapes = topojson
.feature(usShapes, usShapes.objects.states)
.features.sort((a, b) => +a.id - +b.id)
statefips = d3.group(
stateShapes.map(d => {
return {
id: d.id,
name: d.properties.name
};
}),
d => d.id
)
shapesWithData = countyShapes.map(s => ({
...s,
state: statefips.get(s.id.slice(0, 2))[0].name,
population: pops.get(s.id),
metric: metrics.get(s.id),
centroid: turf.centroid(s)
}))
sensors = [
{
key: 'doctor-visits-smoothed_adj_cli',
name: 'Doctor Visits',
id: 'doctor-visits',
tooltipText:
'Percentage of daily doctor visits that are due to COVID-like symptoms',
mapTitleText:
'Percentage of daily doctor visits that are due to COVID-like symptoms',
chartTitleText:
'Percentage of daily doctor visits that are due to COVID-like symptoms',
yAxis: 'Percentage',
format: 'percent',
signal: 'smoothed_adj_cli',
levels: ['county', 'msa', 'state'],
type: 'early',
extent: [0, 11],
colorScheme: d3.schemePuRd[8]
},
{
key: 'hospital-admissions-smoothed_adj_covid19',
name: 'Hospital Admissions',
id: 'hospital-admissions',
tooltipText:
'Percentage of daily hospital admissions with COVID-19 associated diagnoses',
mapTitleText:
'Percentage of daily hospital admissions with COVID-19 associated diagnoses',
chartTitleText:
'Percentage of daily hospital admissions with COVID-19 associated diagnoses',
yAxis: 'Percentage',
format: 'percent',
signal: 'smoothed_adj_covid19',
levels: ['county', 'msa', 'state'],
type: 'late',
extent: [0, 22],
colorScheme: d3.schemeRdPu[8]
},
{
key: 'fb-survey-smoothed_cli',
name: 'Symptoms (FB)',
id: 'fb-survey',
tooltipText:
'Percentage of people with COVID-like symptoms, based on Facebook surveys',
mapTitleText:
'Percentage of people with COVID-like symptoms, based on Facebook surveys',
chartTitleText:
'Percentage of people with COVID-like symptoms, based on Facebook surveys',
yAxis: 'Percentage',
format: 'percent',
signal: 'smoothed_cli',
levels: ['county', 'msa', 'state'],
type: 'early',
extent: [0, 1.8],
colorScheme: d3.schemeBlues[8]
},
{
key: 'fb-survey-smoothed_hh_cmnty_cli',
name: 'Symptoms in Community (FB)',
id: 'fb-survey',
tooltipText:
'Percentage of people who know someone in their local community with COVID-like symptoms, based on Facebook surveys',
mapTitleText:
'Percentage of people who know someone in their local community with COVID-like symptoms, based on Facebook surveys',
chartTitleText:
'Percentage of people who know someone in their local community with COVID-like symptoms, based on Facebook surveys',
yAxis: 'Percentage',
format: 'percent',
signal: 'smoothed_hh_cmnty_cli',
levels: ['county', 'msa', 'state'],
type: 'early',
extent: [0, 38.8],
colorScheme: d3.schemePuBu[8]
},
{
key: 'safegraph-full_time_work_prop',
name: 'Away from Home 6hr+ (SG)',
id: 'safegraph',
tooltipText:
'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
mapTitleText:
'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
chartTitleText:
'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
yAxis: 'Proportion',
format: 'raw',
signal: 'full_time_work_prop',
levels: ['county', 'state'],
type: 'public',
extent: [0, 0.14],
colorScheme: d3.schemeGnBu[8]
},
{
key: 'indicator-combination-nmf_day_doc_fbc_fbs_ght',
name: 'Combined',
id: 'indicator-combination',
tooltipText:
'Combination of COVID-19 indicators available at this geographic level',
mapTitleText: 'Combination of COVID-19 indicators',
chartTitleText: 'Combination of COVID-19 indicators',
yAxis: 'Combined value (arbitrary scale)',
format: 'raw',
signal: 'nmf_day_doc_fbc_fbs_ght',
levels: ['county', 'msa', 'state'],
type: 'early',
extent: [0.24, 2],
colorScheme: d3.schemeYlGnBu[8]
},
{
key: 'indicator-combination-confirmed_7dav_incidence_prop',
name: 'Cases per 100,000 People',
id: 'indicator-combination',
tooltipText:
'Daily new confirmed COVID-19 cases per 100,000 people (7-day average), based on data reported by USAFacts and Johns Hopkins University',
mapTitleText:
'Daily new confirmed COVID-19 cases per 100,000 people (7-day average)',
chartTitleText:
'Daily new confirmed COVID-19 cases per 100,000 people (7-day average)',
yAxis: 'Cases per 100,000 people',
format: 'raw',
signal: 'confirmed_7dav_incidence_prop',
levels: ['msa', 'county', 'state'],
type: 'late',
extent: [0, 50],
colorScheme: d3.schemeOranges[8]
},
{
key: 'indicator-combination-deaths_7dav_incidence_prop',
name: 'Deaths per 100,000 People',
id: 'indicator-combination',
tooltipText:
'Daily new COVID-19 deaths per 100,000 people (7-day average), based on data reported by USAFacts and Johns Hopkins University',
mapTitleText:
'Daily new COVID-19 deaths per 100,000 people (7-day average)',
chartTitleText:
'Daily new COVID-19 deaths per 100,000 people (7-day average)',
yAxis: 'Deaths per 100,000 people',
format: 'raw',
signal: 'deaths_7dav_incidence_prop',
levels: ['msa', 'county', 'state'],
type: 'late',
extent: [0, 1.8],
colorScheme: d3.schemeReds[8]
}
]
moment = require('moment')
textures = require("textures")
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.