30:T48b,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(); }31:T5ea,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(); }32:T85f,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(); }33:T5a4,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; } `34:[{"id":"38457fdcfbcf542022c8308446e79e0533199b7d57bcbcf9e320b84b14c042c398143c6d1678df114da68da2ec1077f2df60b10b3d49bc7bb530e79b8a00b7e0","href":"https://static.observableusercontent.com/files/38457fdcfbcf542022c8308446e79e0533199b7d57bcbcf9e320b84b14c042c398143c6d1678df114da68da2ec1077f2df60b10b3d49bc7bb530e79b8a00b7e0","name":"amecro_breeding_ebird-trends_2022.csv","type":"text/csv","lastModified":1705158079301.804,"size":3832138},{"id":"fa92e1cff8b9dee02a3c318a8f57127a49d58ef913ba460cb1a4712168e22d03d80e4092f1f488d06758cb771ad746e12f1410975bd448a076b3c9edbdb974bf","href":"https://static.observableusercontent.com/files/fa92e1cff8b9dee02a3c318a8f57127a49d58ef913ba460cb1a4712168e22d03d80e4092f1f488d06758cb771ad746e12f1410975bd448a076b3c9edbdb974bf","name":"amecro_range_2022.json","type":"application/json","lastModified":1705158079301.804,"size":1485003},{"id":"6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","href":"https://static.observableusercontent.com/files/6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","name":"cities.json","type":"application/json","lastModified":1705158079301.804,"size":971},{"id":"810de095af920fbbdcaee8a65c1b404342123baa791a0bc9db731a2c29cdbaa7777e6a3c4d985edd3cd8c9309aa51a93f55bf2505affef3da8efa6d0f1163dab","href":"https://static.observableusercontent.com/files/810de095af920fbbdcaee8a65c1b404342123baa791a0bc9db731a2c29cdbaa7777e6a3c4d985edd3cd8c9309aa51a93f55bf2505affef3da8efa6d0f1163dab","name":"conusOutline.geojson","type":"application/geo+json","lastModified":1705158079301.804,"size":18429},{"id":"3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","href":"https://static.observableusercontent.com/files/3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","name":"conusTopo.json","type":"application/json","lastModified":1705158079301.804,"size":60898}] 2e:{"title":"Map showing change in bird population","cells":[{"id":0,"value":"# Map showing change in bird population\n\nA version of this map appeared in the story “[Bird populations are declining. Some are in your neighborhood.](https://www.washingtonpost.com/climate-environment/interactive/2024/bird-population-decline-united-states-maps/)”, published in The Washington Post on January 17, 2024. That article includes maps for 501 bird species. This map shows the breeding season population trends for the American Crow in the continental United States from 2012-2022.\n\nThe data used to produce this map are from [eBird](https://science.ebird.org/en/status-and-trends/species/amecro/trends-map?week=1). You can download the data, with a free API key, [here](https://science.ebird.org/en/status-and-trends/species/amecro/downloads?week=1).","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"html`

Data are from breeding season (May 10-July 5).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"legend = () => html`\n

${legendSize()}

${legendChange()}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"scheme = ({\n rangeInner: \"#fff\",\n rangeOuter: \"#f5f5f5\",\n statesInner: \"#d5d5d5\",\n statesOuter: \"#aaaaaa\",\n uncertain: \"#f1e7da\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"colors = [\"#630700\", \"#9d3c24\", \"#d0714f\", \"#ffab85\", \"#85c7f9\", \"#4994cc\", \"#1d629b\", \"#003466\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"projection = d3.geoAlbers()\n .fitSize([mapwidth, mapheight], statesOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"square = geoSquare()\n .center(d => [d.longitude, d.latitude])\n .area(d => Math.pow(radius(d.abd) * 2, 2));","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"statesInner = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"statesOuter = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"statesTopo = FileAttachment(\"conusTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"usOuter = FileAttachment(\"conusOutline.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"mapwidth = Math.min(width, 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"mapheight = mapwidth * 0.631","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"color = d => {\n if (d.abd_trend <= -30) return colors[0];\n else if (d.abd_trend > -30 && d.abd_trend <= -20) return colors[1];\n else if (d.abd_trend > -20 && d.abd_trend <= -10) return colors[2];\n else if (d.abd_trend > -10 && d.abd_trend <= 0) return colors[3];\n else if (d.abd_trend > 0 && d.abd_trend <= 10) return colors[4];\n else if (d.abd_trend > 10 && d.abd_trend <= 20) return colors[5];\n else if (d.abd_trend > 20 && d.abd_trend <= 30) return colors[6];\n else if (d.abd_trend > 30) return colors[7];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"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","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"// This CSV file was converted from a GPKG file. You can get your own API to download files at eBird.\ndata = (await FileAttachment(\"amecro_breeding_ebird-trends_2022.csv\")\n .csv({ typed: true }))\n .filter(d => {\n // If either the centroid or bound points are in the U.S., keep the cell\n // Circumference of Earth: https://en.wikipedia.org/wiki/Earth%27s_circumference\n // Latitude to longitude: https://stackoverflow.com/questions/13861616/drawing-a-square-around-a-lat-long-point\n // Each cell side is 27km\n const sideDegLat = (27 * 0.5) / 111.1329527778; // circumference of Earth in km / 360 (degrees)\n const sideDegLon = sideDegLat / Math.cos(d.latitude / 180 * Math.PI);\n const nw = [\n d.longitude - sideDegLon,\n d.latitude - sideDegLat\n ]\n const se = [\n d.longitude + sideDegLon,\n d.latitude + sideDegLat\n ];\n return d3.geoContains(usOuter, nw) || d3.geoContains(usOuter, se) || d3.geoContains(usOuter, [d.longitude, d.latitude])\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"seasons = d3.groups(data, d => d.season).map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"// This GeoJSON file was converted from a GPKG file. You can get your own API to download files at eBird.\nrange = {\n const json = await FileAttachment(\"amecro_range_2022.json\").json();\n // Only use the season of the trends data\n return {\n type: \"FeatureCollection\",\n features: json.features.filter(({properties}) => seasons.includes(properties.season))\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"// Function to convert a string to slug case\nfunction toSlugCase(x) {\n return x.toString().toLowerCase()\n .replace(/\\s+/g, \"-\") // Replace spaces with -\n .replace(/[^\\w\\-]+/g, \"\") // Remove all non-word chars\n .replace(/\\-\\-+/g, \"-\") // Replace multiple - with single -\n .replace(/^-+/, \"\") // Trim - from start of text\n .replace(/-+$/, \"\"); // Trim - from end of text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"import { franklinLight } from \"@climatelab/fonts@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"import { geoSquare } from \"@climatelab/geosquare@267\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}