The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Published
msm-fellowship
Edited
Dec 2, 2020
Importers
7 stars
msm-fellowship
Introduction to Data Visualization for the MSM / SHLI FellowshipHealth Equity Tracker Data Visualization PrecedenceCOVID-19 Vulnerability IndexU.S. Hexagon Map SVG with Data Joined
Viz Ideas for U.S. Chronic Disease Indicators: Diabetes
U.S. Diabetes Prevalence by CountyU.S. Obesity Prevalence by CountyVisualizing Racial/Ethnic Disparities in COVID-19 DeathsHET Vis Prototype: Provisional COVID-19 Death Counts by County and RaceCompare U.S. State DemographicsCompare Chronic Diseases in U.S. StatesCompare Chronic Diseases in U.S. States (V2)Chronic Diseases, U.S. State Small MultiplesU.S. County Population Density ChoroplethACS Race/Ethnicity Characteristics by StatePopulation Age Distribution by Race/Ethnicity ChartU.S. County Population Age DistributionU.S. Census Population Age Distributions by County by Race / EthnicityNY Times COVID-19 Cases by Race/EthnicityU.S. Coronavirus Cumulative Cases Animated MapHello, CARTO-VLCARTO-VL: Update Vis Layer
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapColorScale = d3
.scaleQuantize()
.domain([0, 25])
.range(["#f0f9e8", "#bae4bc", "#7bccc4", "#43a2ca", "#0868ac"])
Insert cell
mapHeight = (width * 2) / 3
Insert cell
mapPadding = 24
Insert cell
path = d3.geoPath(projection)
Insert cell
projection = d3
.geoAlbersUsa()
.fitExtent(
[[mapPadding, mapPadding], [width - mapPadding, mapHeight - mapPadding]],
{ type: "FeatureCollection", features: statesGeo }
)
Insert cell
statesGeo = topojson.feature(us, us.objects.states).features
Insert cell
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
Insert cell
Insert cell
maxValue = d3.max(data, d => d.datavalue)
Insert cell
groups = Array.from(d3.group(data, d => d.stratification1).keys()).sort()
Insert cell
stateNames = Array.from(d3.group(data, d => d.locationdesc).keys()).sort()
Insert cell
stateNameToFips = new Map(
Array.from(stateFipsToName).map(([key, value]) => [value, key])
)
Insert cell
stateFipsToName = new Map(
Array.from(groupedStateName).map(([name, d]) => [d[0].locationid, name])
)
Insert cell
stateFipsToAbbr = new Map(
Array.from(stateAbbrToFips).map(([abbrv, fips]) => [fips, abbrv])
)
Insert cell
stateAbbrToFips = new Map(
Array.from(groupedState).map(([abbrv, d]) => [abbrv, d[0].locationid])
)
Insert cell
states = Array.from(groupedState.keys()).sort()
Insert cell
groupedStateName = d3.group(data, d => d.locationdesc)
Insert cell
groupedState = d3.group(data, d => d.locationabbr)
Insert cell
data = dataRelevant
Insert cell
Insert cell
import { drawChoroplethMap } from "@clhenrick/reusable-county-choropleth-map"
Insert cell
import { Tooltip } from "@clhenrick/tooltip-component"
Insert cell
import { swatchesInput } from "@clhenrick/color-swatches-input"
Insert cell
import {
dataRelevant,
pivotbyRaceTable as pivotbyRaceValue
} from "@clhenrick/het-data-intake-template-cdc-diabetes-state-level"
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
import { select, autoSelect } from "@jashkenas/inputs"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@6")
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.
Learn more