Illinois COVID-19 data and visualizations. A personal project of David Eads + Grupo Visual.
Published
Edited
Feb 24, 2020
1 fork
5 stars
povertyMap = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 1000, 630]);
// Tracts + poverty rate
svg
.append("g")
.selectAll("path")
.data(features)
.join("path")
.attr("fill", d => povertyColor(d.properties.percent_below_poverty))
.attr("stroke-linejoin", "round")
.attr("stroke-width", "0")
.attr("d", path);
// Community areas
if (selectedLevel === "chicago") {
svg
.append("g")
.selectAll("path")
.data(
topojson.feature(
CommunityAreas,
CommunityAreas.objects.chicago_community_areas
).features
)
.join("path")
.attr("fill", "none")
.attr("stroke", "#444444")
.attr("stroke-width", ".9")
.attr("d", path);
}
// Legend
svg
.append("g")
.attr("transform", "translate(500,50),scale(1.25)")
.append(() =>
legend({
color: povertyColor,
ticks: 6,
tickValues: [
minPovertyTract.properties.percent_below_poverty,
BelowPoverty[selectedLevel][selectedYear],
maxPovertyTract.properties.percent_below_poverty
],
tickFormat: ".1f",
title: `% of families below poverty ${selectedYear -
4}-${selectedYear}`,
width: 200
})
);
return svg.node();
}
projection = d3
.geoMercator()
.center([-87.5, selectedLevel === "chicago" ? 41.88 : 41.00])
.scale(selectedLevel === "chicago" ? 62000 : 4200)
povertyColor = d3
.scaleDivergingPow()
.domain([
minPovertyTract.properties.percent_below_poverty,
BelowPoverty[selectedLevel][selectedYear],
maxPovertyTract.properties.percent_below_poverty
])
.interpolator(d3.interpolateRgbBasis(['#7DC1FF', 'lightyellow', '#E6AD53']))
.exponent(0.3)
minPovertyTract = d3.least(features, d => d.properties.percent_below_poverty)
maxPovertyTract = d3.greatest(features, d => d.properties.percent_below_poverty)
path = d3.geoPath(projection)
PovertyData = {
if (selectedYear === "2018" && selectedLevel === "chicago") {
return FileAttachment("chicago_poverty_2018-topo@1.json").json();
} else if (selectedYear === "2010" && selectedLevel === "chicago") {
return FileAttachment("chicago_poverty_2010-topo.json").json();
} else if (selectedYear === "2018" && selectedLevel === "illinois") {
return FileAttachment("illinois_poverty_2018-topo@2.json").json();
} else if (selectedYear === "2010" && selectedLevel === "illinois") {
return FileAttachment("illinois_poverty_2010-topo@1.json").json();
}
}
CommunityAreas = FileAttachment("chicago_community_areas-topo.json").json()
topojson = require("topojson-client@3")
import { legend } from "@d3/color-legend"
d3 = require("d3@5", "d3-array")
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.
