The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Published
msm-fellowship
Edited
Nov 19, 2020
Fork of Compare U.S. State Demographics
•
1 fork
2 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 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 Demographics
Compare Chronic Diseases in U.S. States
Compare 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
mapWidth = width
Insert cell
chartWidth = width
Insert cell
tableWidth = width
Insert cell
mapTooltipContent = d =>
`${stateFipsToName.get(d.id)}<br> ${disease} prevalence: ${d3.format(".2f")(
d.value
)}%`
Insert cell
mapData = diseaseToData.get(disease).map(d => ({
id: stateNameToFips.get(d.locationdesc),
value: d3.mean(
Object.entries(d)
.filter(([key, value]) => key !== "locationdesc")
.map(([key, value]) => value)
)
}))
Insert cell
mapColorScale = d3
.scaleQuantize()
.domain(d3.extent(mapData, d => d.value))
.range(["#f0f9e8", "#bae4bc", "#7bccc4", "#43a2ca", "#0868ac"])
Insert cell
mapHeight = (width * 2) / 3
Insert cell
mapPadding = 24
Insert cell
Insert cell
Insert cell
getDiseaseStateTable = fips => {
const stateName = statesGeoByFips.get(fips).properties.name;
const diseaseData = diseaseToData
.get(disease)
.find(d => d.locationdesc === stateName);
const data = Object.keys(diseaseData)
.slice(1)
.map(key => ({ name: key, value: diseaseData[key] }));

const table = d3.create("table");
const header = table.append("thead");
const body = table.append("tbody");

header
.append("tr")
.selectAll("th")
.data(["Race/Ethnicity", `Prevalence of ${disease}`])
.join("th")
.text(d => d);

body
.selectAll("tr")
.data(data)
.join("tr")
.each(renderRow);

function renderRow({ name, value }) {
const row = d3.select(this);
row.append("td").text(name);
const valueCell = row
.append("td")
.html(isValue(value) ? `${value}%` : "<em>no data</em>");
}

function isValue(value) {
return value !== undefined && value !== null && value !== "";
}

return table.node();
}
Insert cell
selectStateOptions = allStatesFips
.map(({ name, fips }) => ({
label: name,
value: fips
}))
.sort((a, b) => +a.value - +b.value)
Insert cell
diseaseToData = new Map([
["Asthma", dataAsthma],
["COPD", dataCopd],
["Diabetes", dataDiabetes]
])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { View } from "@mbostock/synchronized-views"
Insert cell
import { select, autoSelect } from "@jashkenas/inputs"
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
import { html, svg } from "@observablehq/htl"
Insert cell
import { Tooltip } from "534d662eaa9b53f1"
Insert cell
import { drawChoroplethMap } from "@clhenrick/reusable-county-choropleth-map"
Insert cell
import { pivotbyRaceTable as pivotbyRaceCopd } with {
copdQ as questionPicker
} from "@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss"
Insert cell
import { pivotbyRaceTable as pivotbyRaceAsthma } with {
asthmaQ as questionPicker
} from "@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss"
Insert cell
import { pivotbyRaceTable as pivotbyRaceDiabetes } with {
diabetesQ as questionPicker
} from "@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss"
Insert cell
// import { table as table1, viewof valueTypePicker as vtp1 } with {
// state1 as selectedFips
// } from "@clhenrick/acs-race-ethnicity-characteristics-by-state"
Insert cell
// import { table as table2, viewof valueTypePicker as vtp2 } with {
// state2 as selectedFips
// } from "@clhenrick/acs-race-ethnicity-characteristics-by-state"
Insert cell
import { drawRowChart } from "@clhenrick/reusable-row-chart"
Insert cell
import { allStatesFips } from "@clhenrick/acs-race-ethnicity-characteristics-by-state"
Insert cell
import {
mapConfig,
path,
projection,
statesGeo,
statesGeoByFips,
us,
topojson
} from "@clhenrick/reusable-choropleth-map"
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