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)U.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
Chronic Diseases, U.S. State Small Multiples
barCharts = {
const container = html`<div class="bar-charts-container">
<style>
.bar-charts-container {
width: ${width}px;
}
.bar-charts-container p {
font-family: sans-serif;
margin: 0;
}
.bar-charts-container > div {
padding: 12px;
}
</style>
</div>`;
for (const [state, data] of diseaseDataByState) {
const title = `${state} Prevalence of ${diseaseSelected} by Race / Ethnicity`;
const chart = drawRowChart({
data,
width: (width * 2) / 3,
height: (width * 1) / 5,
pct: true,
margin: { top: 12, right: 48, bottom: 24, left: 140 }
});
const dl = showDlButton
? DOM.download(() => serialize(chart), title, "Save as SVG")
: "";
container.append(html`<div class="state-chart-container">
<p style="font-weight:bold;">${title}</p>
${chart}
${dl}
</div>`);
}
return container;
}
diseaseSelected = diseasePickerOptions.find(d => d.value === diseasePicker)
.label
diseaseDataByState = new Map(
diseaseData.map(({ locationdesc, ...rest }) => [
locationdesc,
Object.entries(rest).map(([key, value]) => ({ name: key, value }))
])
)
diseaseData = pivotbyRaceTable.objects()
diseasePickerOptions = {
const questions = cdiQuestions.slice(1);
const diseases = ["Asthma", "COPD", "Diabetes"];
return questions.map((q, i) => ({ value: q, label: diseases[i] }));
}
import { drawRowChart } from "@clhenrick/reusable-row-chart"
import { pivotbyRaceTable, someQuestions as cdiQuestions } with {
diseasePicker as questionPicker
} from "@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss"
import { serialize } from "@mbostock/saving-svg"
import { select, checkbox } 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.
