Visualizing a changing planet for The Washington Post
Public
Edited
Jan 28, 2024
3 forks
27 stars
legend = () => html`
<div style="width: ${mapwidth}px">
<div style="display: table; margin: 0 auto">
<div style="display: inline-block">${legendSize()}</div>
<div style="display: inline-block; margin-left: 40px;">${legendChange()}</div>
</div>
</div>
`
legendSize = () => {
const data = [2, 4, 6, 8, 10, 12];
const rectPad = 6.5;
const margin = {left: 1, right: 0, top: 20, bottom: 20};
const width = Math.max(78, d3.sum(data) + rectPad * (data.length - 1) + 2) - margin.left - margin.right;
const height = data[data.length - 1];
const svg = d3.create("svg")
.attr("font-family", franklinLight)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("overflow", "visible");
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
const title = g.append("g")
.attr("transform", `translate(0, -6)`);
title.append("text")
.text("Abundance")
.attr("font-size", 16);
g.selectAll(".rect")
.data(data)
.join("rect")
.attr("fill", "#626262")
.attr("x", (d, i) => rectPad * i + d3.sum(data.filter((_, i0) => i0 < i)))
.attr("y", d => height - d)
.attr("width", d => d)
.attr("height", d => d);
g.append("text")
.attr("font-size", 14)
.attr("y", height + 14)
.text("More →");
return svg.node();
}
legendChange = () => {
const margin = {left: 0, right: 0, top: 20, bottom: 20};
const width = 300 - margin.left - margin.right;
const height = 12;
const data = d3
.range(-40, 50, 10)
.map(d => ({ value: d, abd_trend: d < 0 ? d + 1 : d, abd_ppy_nonzero: d ? 1 : 0 }))
.filter(d => d.value)
const svg = d3.create("svg")
.attr("font-family", franklinLight)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
const title = g.append("g")
.attr("transform", `translate(0, -6)`);
title.append("text")
.attr("font-size", 16)
.attr("text-anchor", "middle")
.attr("x", width / 2)
.text("Change, 2012-2022");
const tick = g.selectAll(".tick")
.data(data)
.join("g")
.attr("class", "tick")
.attr("transform", (d, i) => `translate(${i / (data.length) * width})`)
tick.append("rect")
.attr("fill", color)
.attr("height", height)
.attr("width", width / data.length);
tick.filter((d, i, e) => i && i < e.length - 1)
.append("text")
.attr("font-size", 14)
.attr("text-anchor", "middle")
.attr("x", d => d.value < 0 ? 0 : width / data.length * (d.value ? 1 : 0.5))
.attr("y", height + 14)
.text((d, i) => d.value ? `${d.value > 0 ? "+" : "-"}${Math.abs(d.value)}${i ? "" : "%"}` : "Uncertain")
return svg.node();
}
map = () => {
const wrapper = d3.create("div")
.style("width", `${mapwidth}px`)
.style("height", `${mapheight}px`)
.style("position", "relative");
wrapper.append("style").html(css);
const canvas = wrapper.append("canvas")
.style("position", "absolute");
canvas.node().width = mapwidth;
canvas.node().height = mapheight;
const context = canvas.node().getContext("2d");
const path = d3.geoPath(projection, context);
// Draw the basemap
context.beginPath();
path(statesOuter);
context.fillStyle = scheme.rangeOuter;
context.fill();
// Clip the rest
context.beginPath();
path(statesOuter);
context.clip();
// Draw the range
range.features.forEach(feature => {
context.beginPath();
path(feature);
context.fillStyle = scheme.rangeInner;
context.fill();
});
context.beginPath();
path(statesInner);
context.strokeStyle = scheme.statesInner;
context.lineJoin = "round";
context.lineWidth = 0.5;
context.stroke();
data.forEach(d => {
context.beginPath();
path(square(d));
context.fillStyle = color(d);
context.fill();
});
path.context(null);
const svg = wrapper.append("svg")
.style("position", "absolute")
.attr("width", mapwidth)
.attr("height", mapheight);
svg.append("path")
.datum(statesOuter)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", scheme.statesOuter)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5);
const citiesG = svg.selectAll(".city")
.data(cities)
.join("g")
.attr("class", d => `city ${d.pos} ${toSlugCase(d.name)}`)
.attr("transform", d => `translate(${projection([d.lon, d.lat])})`);
citiesG.append("circle")
.attr("class", "circle-bg")
.attr("r", 3);
citiesG.append("circle")
.attr("r", 3);
citiesG.append("text")
.attr("class", "bg bg-0")
.text(d => d.name);
citiesG.append("text")
.attr("class", "bg bg-1")
.text(d => d.name);
citiesG.append("text")
.attr("class", "fg")
.text(d => d.name);
return wrapper.node();
}
css = `
.city circle {
fill: none;
stroke: black;
}
.city.ne text {
transform: translate(4px, -4px);
}
.city.se text {
transform: translate(4px, 13px);
}
.city.e text {
transform: translate(6px, 4.5px);
}
.city.boston {
display: ${width <= 480 ? "none" : "block"};
}
.city.boston text {
text-anchor: end;
transform: translate(-4px, -4px);
}
.city.chicago text {
text-anchor: start;
transform: translate(4px, 13px);
}
.city.miami text {
fill: black;
}
.city.miami text.bg {
fill: white;
stroke: white;
}
.city.minneapolis {
display: ${width <= 480 ? "none" : "block"};
}
.city.new-york text {
text-anchor: end;
transform: translate(-4px, -4px);
}
.city.philadelphia {
display: none;
}
.city.seattle text {
transform: translate(4px, ${width <= 400 ? "13px" : "-4px"});
}
.city.st-louis {
display: none;
}
.city.washington-dc text {
text-anchor: ${width <= 600 ? "middle" : "end"};
transform: ${width <= 600 ? "translate(0, 16px)" : "translate(-4px, 13px)"};
}
.city circle {
fill: none;
stroke: black;
}
.city circle.circle-bg {
stroke: white;
stroke-opacity: 0.8;
stroke-width: 3px;
}
.city text {
fill: black;
font-size: ${width <= 480 ? "14px" : "16px"};
font-family: ${franklinLight};
}
.city text.bg {
fill: white;
stroke: white;
}
.city text.bg-0 {
stroke-width: 4px;
stroke-opacity: 0.4;
}
.city text.bg-1 {
stroke-width: 2px;
stroke-opacity: 0.8;
}
`
scheme = ({
rangeInner: "#fff",
rangeOuter: "#f5f5f5",
statesInner: "#d5d5d5",
statesOuter: "#aaaaaa",
uncertain: "#f1e7da",
})
colors = ["#630700", "#9d3c24", "#d0714f", "#ffab85", "#85c7f9", "#4994cc", "#1d629b", "#003466"]
projection = d3.geoAlbers()
.fitSize([mapwidth, mapheight], statesOuter)
path = d3.geoPath(projection)
square = geoSquare()
.center(d => [d.longitude, d.latitude])
.area(d => Math.pow(radius(d.abd) * 2, 2));
cities = FileAttachment("cities.json").json()
statesInner = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a !== b)
statesOuter = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a === b)
statesTopo = FileAttachment("conusTopo.json").json()
usOuter = FileAttachment("conusOutline.geojson").json()
mapwidth = Math.min(width, 1000)
mapheight = mapwidth * 0.631
color = d => {
if (d.abd_trend <= -30) return colors[0];
else if (d.abd_trend > -30 && d.abd_trend <= -20) return colors[1];
else if (d.abd_trend > -20 && d.abd_trend <= -10) return colors[2];
else if (d.abd_trend > -10 && d.abd_trend <= 0) return colors[3];
else if (d.abd_trend > 0 && d.abd_trend <= 10) return colors[4];
else if (d.abd_trend > 10 && d.abd_trend <= 20) return colors[5];
else if (d.abd_trend > 20 && d.abd_trend <= 30) return colors[6];
else if (d.abd_trend > 30) return colors[7];
}
radius = d3.scaleSqrt([0, d3.max(data, d => d.abd)], [0, 32 / 2]) // each grid cell is 27km x 27km, and we let big ones overlap a little
// This CSV file was converted from a GPKG file. You can get your own API to download files at eBird.
data = (await FileAttachment("amecro_breeding_ebird-trends_2022.csv")
.csv({ typed: true }))
.filter(d => {
// If either the centroid or bound points are in the U.S., keep the cell
// Circumference of Earth: https://en.wikipedia.org/wiki/Earth%27s_circumference
// Latitude to longitude: https://stackoverflow.com/questions/13861616/drawing-a-square-around-a-lat-long-point
// Each cell side is 27km
const sideDegLat = (27 * 0.5) / 111.1329527778; // circumference of Earth in km / 360 (degrees)
const sideDegLon = sideDegLat / Math.cos(d.latitude / 180 * Math.PI);
const nw = [
d.longitude - sideDegLon,
d.latitude - sideDegLat
]
const se = [
d.longitude + sideDegLon,
d.latitude + sideDegLat
];
return d3.geoContains(usOuter, nw) || d3.geoContains(usOuter, se) || d3.geoContains(usOuter, [d.longitude, d.latitude])
});
seasons = d3.groups(data, d => d.season).map(d => d[0])
// This GeoJSON file was converted from a GPKG file. You can get your own API to download files at eBird.
range = {
const json = await FileAttachment("amecro_range_2022.json").json();
// Only use the season of the trends data
return {
type: "FeatureCollection",
features: json.features.filter(({properties}) => seasons.includes(properties.season))
}
}
// Function to convert a string to slug case
function toSlugCase(x) {
return x.toString().toLowerCase()
.replace(/\s+/g, "-") // Replace spaces with -
.replace(/[^\w\-]+/g, "") // Remove all non-word chars
.replace(/\-\-+/g, "-") // Replace multiple - with single -
.replace(/^-+/, "") // Trim - from start of text
.replace(/-+$/, ""); // Trim - from end of text
}
import { franklinLight } from "@climatelab/fonts@44"
import { geoSquare } from "@climatelab/geosquare@267"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.