Maps, Data, Viz, UX, Design
Introduction to Data Visualization for the MSM / SHLI FellowshipHealth Equity Tracker Data Visualization PrecedenceCOVID-19 Vulnerability IndexU.S. Hexagon Map SVG with Data JoinedViz Ideas for U.S. Chronic Disease Indicators: DiabetesU.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 DistributionNY Times COVID-19 Cases by Race/EthnicityU.S. Coronavirus Cumulative Cases Animated MapHello, CARTO-VLCARTO-VL: Update Vis Layer
U.S. Census Population Age Distributions by County by Race / Ethnicity
fipsToLookUp = counties2FipsMap.get(selectedCounty)
selFipsIndex = fipsIndex.get(fipsToLookUp)
selFipsTotal = totals[selFipsIndex]
name = fips2CountiesMap.get(fipsToLookUp)
// total population for each county
totals = data.slice(1).map(d => d3.sum(d.slice(0, -1)))
// outer array indexes correspond to counties
// inner arrays indexes correspond to sums for all age bracket related variables
sums = data
.slice(1)
.map(d =>
Array.from(variablesMapByRace.values(), V =>
d3.sum(V, v => d[index.get(v)])
)
)
// row look up by fips code
fipsIndex = new Map([...dataByFips.keys()].map((d, i) => [d, i]))
// data look up by state + county fips codes
dataByFips = new Map(
data
.slice(1)
.map(d => [`${d[index.get("state")]}${d[index.get("county")]}`, d])
)
// data header column index look up
index = {
const index = new Map(data[0].map((d, i) => [d, i]));
// assert that the last two columns are "state", "county" respectively
if (index.get("state") !== data[0].length - 2) throw new Error();
if (index.get("county") !== data[0].length - 1) throw new Error();
return index;
}
ageBuckets = Array.from(variablesMapByRace.keys())
// these correspond to table B01001 age buckets by race
// e.g. B01001D would be for all age buckets that are also "Asian"
// see: https://api.census.gov/data/2016/acs/acs5/variables.html
raceGroupCodes = new Map([
["White (Alone)", "A"],
["Black (Alone)", "B"],
["American Indian / Alaskan Native", "C"],
["Asian", "D"],
["Native Hawaiian / Pacific Islander", "E"],
["White/Non-Hispanic (Alone)", "H"],
["Hispanic/Latino", "I"],
["Other", "F"]
])
variablesMapByRace = new Map(
[
["<10", ["003", "004", "018", "019"]],
["10-19", ["005", "006", "007", "020", "021", "022"]],
["20-29", ["008", "009", "023", "024"]],
["30-34", ["010", "025"]],
["35-44", ["011", "026"]],
["45-54", ["012", "027"]],
["55-64", ["013", "028"]],
["65-74", ["014", "029"]],
["75-84", ["015", "030"]],
["≥85", ["016", "031"]]
].map(([key, V]) => [
key,
V.map(
v => `B01001${raceGroupCodes.get(selectedRace || "White (Alone)")}_${v}E`
)
])
)
getVariablesMapByRace = race =>
new Map(
[
["<10", ["003", "004", "018", "019"]],
["10-19", ["005", "006", "007", "020", "021", "022"]],
["20-29", ["008", "009", "023", "024"]],
["30-34", ["010", "025"]],
["35-44", ["011", "026"]],
["45-54", ["012", "027"]],
["55-64", ["013", "028"]],
["65-74", ["014", "029"]],
["75-84", ["015", "030"]],
["≥85", ["016", "031"]]
].map(([key, V]) => [
key,
V.map(v => `B01001${raceGroupCodes.get(race || "White (Alone)")}_${v}E`)
])
)
counties = "*" // "*" for all counties, else state: & county:?
data = {
const res = await fetch(
`${baseURI}?get=${[...variablesMapByRace.values()]}&for=county:${counties}`
);
return res.json();
}
acsType = "acs5" // acs1, acs3, acs5
acsYear = 2018
key = "bd155aaa303834a623fa83babc2d2644ac60fbf3"
baseURI = `https://api.census.gov/data/${acsYear}/acs/${acsType}`
allCountyNamesFips = {
const res = await fetch(`${baseURI}?get=NAME&for=county:*&in=state:*`);
const data = await res.json();
return data.slice(1);
}
counties2FipsMap = new Map(
allCountyNamesFips
.map(([name, st, cy]) => [name, `${st}${cy}`])
.sort((a, b) => a[1] - b[1])
)
fips2CountiesMap = new Map(
[...counties2FipsMap.entries()].map(([name, fips]) => [fips, name])
)
import { text, select, autoSelect } from "@jashkenas/inputs"
d3 = require("d3@6")
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.
