Maps, Data, Viz, UX, Design
Published
Edited
Nov 15, 2020
2 forks
6 stars
Introduction to Data Visualization for the MSM / SHLI FellowshipHealth Equity Tracker Data Visualization PrecedenceCOVID-19 Vulnerability IndexViz 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
U.S. Hexagon Map SVG with Data Joined
mapSvgWithIds = {
const map = d3.select(mapSvgOriginal.cloneNode(true));
const statesGroup = map.select("g.states");
const statesPaths = statesGroup.selectAll("path");
statesPaths.each(function(_d, i) {
const pathEl = d3.select(this);
const [stateClassName] = pathEl.attr("class").split(" ");
const stateNameId = stateClassName
.replace("state-", "")
.replace(/-/gi, " ");
pathEl.attr("data-id", stateNameId);
pathEl.attr("class", null);
pathEl.attr("fill", null);
});
map.selectAll("text").each(function(_d, i) {
d3.select(this).attr("data-id", textData[i]);
});
return map.node();
}
mapObesity = {
const map = d3.select(mapSvgWithIds.cloneNode(true));
map
.selectAll("path")
.data(data, function(d) {
return d ? d.locationdesc : this.dataset.id;
})
.attr("fill", d => color(d["White, non-Hispanic"]))
.attr("stroke", "#e2e2e2");
return map.node();
}
import { legend } from "@d3/color-legend"
import { pivotByRaceData } from "@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss"
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.
