Maps, Data, Viz, UX, Design
Introduction to Data Visualization for the MSM / SHLI FellowshipHealth Equity Tracker Data Visualization PrecedenceU.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 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
COVID-19 Vulnerability Index
tooltipContents = d =>
`${statesGeoByFips.get(d.id).properties.name}: ${
d.value !== null && d.value >= 0 ? d.value : "not included"
}`
mapData = statesGeo.features.map(d => ({
id: d.id,
value: getValue(d)
}))
getValue = geo => {
const datum = statesTopN.find(d => d.state === geo.properties.name);
if (datum) return datum.combined_score;
return null;
}
statesTopN = dataStates.sort(sorter).slice(0, topN)
colorScale = d3.scaleSequential(colorInterpolator).domain(colorDomain)
colorInterpolator = stateOrderPicker === "Least"
? t => d3.interpolateBuGn(1 - t)
: d3.interpolateYlOrRd
colorDomain = d3.extent(statesTopN, d => d.combined_score)
stateOrderPickerOptions = ["Least", "Most"]
sorter = stateOrderPicker === "Least" ? sortAsc : sortDesc
sortAsc = (a, b) => a.combined_score - b.combined_score
sortDesc = (a, b) => b.combined_score - a.combined_score
import { html, svg } from "@observablehq/htl"
import { legend } from "@d3/color-legend"
import { select, slider } from "@jashkenas/inputs"
import {
drawChoroplethMap,
statesGeoByFips,
statesGeo
} from "@clhenrick/reusable-county-choropleth-map"
import {
dataStates,
dataCounties
} from "@clhenrick/het-data-intake-covid-19-community-vulnerability-index-ccv"
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.
