Maps, Data, Viz, UX, Design
Published
Edited
Apr 6, 2021
3 forks
23 stars
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 DistributionU.S. Census Population Age Distributions by County by Race / EthnicityNY Times COVID-19 Cases by Race/EthnicityHello, CARTO-VLCARTO-VL: Update Vis Layer
U.S. Coronavirus Cumulative Cases Animated Map
viz = {
const ctx = DOM.context2d(width, height);
const path = d3.geoPath(null, ctx);
const container = html`<div class="canvas-container" style="position:relative;">
<style>
.canvas-container {
position: relative;
width: ${width}px;
height: ${height}px;
}
.canvas-container > svg,
.canvas-container > canvas {
position: absolute;
}
.canvas-container > canvas {
top: 0;
left: 0;
}
.canvas-container > svg {
display: inline-block;
top: 10px;
left: ${width / 2 - 100}px;
}
</style>
${legend({
color: colorScaleThreshold,
width: 200,
height: 45,
title: "Cumulative Coronavirus Cases",
tickFormat: ","
})}
${ctx.canvas}
${basemap}
</div>`;
ctx.clearRect(0, 0, width, height);
curData.forEach(d => {
const geojson = countyGeomLookUp.get(d.fips);
if (geojson) {
ctx.beginPath();
path(geojson);
ctx.lineWidth = 0;
ctx.fillStyle = colorScaleThreshold(d.cases);
ctx.fill();
}
});
return container;
}
// see https://observablehq.com/@d3/color-schemes
colorScaleThreshold = d3
.scaleThreshold()
.domain([100, 1000, 10000, 100000])
.range(["#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404"]) // color brewer yl-or-brwn
formatDate = date =>
date.toLocaleString("en", { month: "long", day: "numeric" })
casesDistributionChart = {
const chart = d3.select(
html`<svg width="${width}" height="${chartHeight}"></svg>`
);
chart
.selectAll("circle")
.data(binnedByTotalCases)
.join("circle")
.attr("cx", ([k, v]) => xScale(k))
.attr("cy", ([k, v]) => yScale(v))
.attr("fill", "steelblue")
.attr("r", 2.5)
.append("title")
.text(([k, v]) => `${k.toLocaleString()} has ${v} instances`);
chart
.append("g")
.attr("transform", `translate(0, ${chartHeight - margin.bottom})`)
.call(xAxis);
chart
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
return chart.node();
}
chartHeight = 300
margin = ({ top: 10, left: 36, bottom: 36, right: 24 })
xScale = d3
.scaleLog()
.base(2)
.domain([1, d3.max(cases)])
.range([margin.left, width - margin.right])
xAxis = d3.axisBottom(xScale)
yScale = d3
.scaleLinear()
.domain(d3.extent(binnedByTotalCases, ([k, v]) => v))
.range([chartHeight - margin.bottom, margin.top])
yAxis = d3.axisLeft(yScale)
binnedByTotalCases = d3.rollups(
grouped.get(datesExtent[1]),
v => v.length,
d => d.cases
)
nonMatches = rows.filter(d => countyGeomLookUp.get(d.fips) === undefined)
[...d3.group(nonMatches, d => d.fips).keys()]
totalCases = d3.sum(curData, d => d.cases)
curData = grouped.get(date)
maxNumCases = d3.max(cases)
quantiles = [0, 0.25, 0.5, 0.75, 1].map(d => d3.quantile(cases, d))
datesExtent = d3.extent(dates)
dates = [...grouped.keys()]
cases = rows.map(d => d.cases).sort()
// for joining covid cases to county geometries
countyGeomLookUp = new Map(
topojson
.feature(us, us.objects.counties)
.features.map(({ id, ...rest }) => [id, rest])
)
grouped = new Map(
[...d3.group(rows, d => d.date)].map(([key, value]) => [new Date(key), value])
)
rows = {
const rows = await d3.csv(githubRawCsvUrl);
rows.forEach(d => {
d.cases = +d.cases;
d.deaths = +d.deaths;
});
return rows;
}
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.
