Platform
Resources
Pricing
Sign in
Get started
Chris Henrick
Maps, Data, Viz, UX, Design
Workspace
Fork
Published
3 collections
By
Chris Henrick
Edited
Nov 5, 2020
1 star
msm-fellowship
Introduction to Data Visualization for the MSM / SHLI Fellowship
Health Equity Tracker Data Visualization Precedence
COVID-19 Vulnerability Index
U.S. Hexagon Map SVG with Data Joined
Viz Ideas for U.S. Chronic Disease Indicators: Diabetes
U.S. Diabetes Prevalence by County
U.S. Obesity Prevalence by County
Visualizing Racial/Ethnic Disparities in COVID-19 Deaths
HET Vis Prototype: Provisional COVID-19 Death Counts by County and Race
Compare U.S. State Demographics
Compare Chronic Diseases in U.S. States
Compare Chronic Diseases in U.S. States (V2)
Chronic Diseases, U.S. State Small Multiples
U.S. County Population Density Choropleth
ACS Race/Ethnicity Characteristics by State
Population Age Distribution by Race/Ethnicity Chart
U.S. County Population Age Distribution
U.S. Census Population Age Distributions by County by Race / Ethnicity
NY Times COVID-19 Cases by Race/Ethnicity
U.S. Coronavirus Cumulative Cases Animated Map
Hello, CARTO-VL
CARTO-VL: Update Vis Layer
Also listed in…
data visualization
U.S. Census
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
countyFips
=
counties2FipsMap
.
get
(
selected
)
Insert cell
// need to override the chart's color scale because the race/ethnicity by county uses different age buckets than the county totals data
color
=
d3
.
scaleOrdinal
(
)
.
domain
(
ageBuckets
)
.
range
(
d3
.
schemeSpectral
[
ageBuckets
.
length
]
)
.
unknown
(
"#ccc"
)
Insert cell
// factory function for returning the stacked data structured required for the chart
getSeries
=
datum
=>
d3
.
stack
(
)
.
keys
(
Object
.
keys
(
datum
)
)
.
offset
(
d3
.
stackOffsetExpand
)
(
[
datum
]
)
.
map
(
d
=>
(
d
.
forEach
(
v
=>
(
v
.
key
=
d
.
key
)
)
,
d
)
)
Insert cell
// converts our sums arrays into arrays of objects that include keys for age buckets
dataTransformed
=
{
let
transformed
=
[
]
;
for
(
let
i
=
0
,
l
=
data
.
length
;
i
<
l
;
++
i
)
{
transformed
=
transformed
.
concat
(
sums
[
i
]
.
reduce
(
(
acc
,
cur
,
j
)
=>
{
acc
[
ageBuckets
[
j
]
]
=
cur
;
return
acc
;
}
,
{
}
)
)
;
}
return
transformed
;
}
Insert cell
// assert that totals match the sum of sums
totals
[
0
]
===
d3
.
sum
(
sums
[
0
]
)
Insert cell
totals
=
data
.
map
(
(
[
header
,
row
]
)
=>
d3
.
sum
(
row
.
slice
(
0
,
-
2
)
)
)
Insert cell
// this code is pretty stupid, but it works lol
sums
=
data
.
map
(
(
[
header
,
row
]
,
raceIdx
)
=>
Array
.
from
(
variablesList
[
raceIdx
]
.
values
(
)
,
V
=>
d3
.
sum
(
V
,
v
=>
row
[
indexes
[
raceIdx
]
.
get
(
v
)
]
)
)
)
Insert cell
data
=
{
let
data
=
[
]
;
for
await
(
let
v
of
variablesList
.
map
(
d
=>
fetchData
(
d
,
countyFips
)
)
)
{
yield
(
data
=
[
...
data
,
v
]
)
;
}
}
Insert cell
fetchData
=
async
(
variables
,
fips
)
=>
{
const
res
=
await
fetch
(
`${
baseURI
}?get=${
[
...
variables
.
values
(
)
]
}&for=county:${
fips
.
slice
(
2
)
}&in=state:${
fips
.
slice
(
0
,
2
)
}&key=${
key
}`
)
;
return
await
res
.
json
(
)
;
}
Insert cell
indexes
=
data
.
map
(
(
[
header
]
)
=>
header
)
.
map
(
h
=>
new
Map
(
h
.
map
(
(
d
,
i
)
=>
[
d
,
i
]
)
)
)
Insert cell
variablesList
=
races
.
map
(
d
=>
getVariablesMapByRace
(
d
)
)
Insert cell
races
=
Array
.
from
(
raceGroupCodes
.
keys
(
)
)
Insert cell
Insert cell
d3
=
require
(
"d3@6"
)
Insert cell
import
{
autoSelect
}
from
"@jashkenas/inputs"
Insert cell
import
{
chart
,
legend
}
with
{
color
}
from
"@clhenrick/u-s-county-population-age-distribution"
Insert cell
import
{
ageBuckets
,
counties2FipsMap
,
getVariablesMapByRace
,
raceGroupCodes
,
baseURI
,
key
}
from
"1c80336c080ed6e9"
Insert cell
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.
Try it for free
Learn more
Fork
View
Export
Listed in...
data visualization
Chris Henrick
U.S. Census
Chris Henrick
msm-fellowship
Chris Henrick
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
selected
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
charts
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
countyFips
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
getSeries
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataTransformed
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
totals
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
sums
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
fetchData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
indexes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
variablesList
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
races
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML