31:T405,{ const wrapper = d3.create("div") .style("font-family", "sans-serif") wrapper.append("div") .style("font-weight", "bold") .text("Rich countries emit more CO2 per person") const items = wrapper.selectAll(".item") .data(d3.groups(parties, d => d.type).sort().filter((d, i) => i < 2)) .enter().append("div") .attr("class", "item") .style("display", "inline-block") .style("margin-right", "12px"); items.append("div") .style("display", "inline-block") .style("border-radius", "50%") .style("margin-right", "4px") .style("width", "8px") .style("height", "8px") .style("background", d => d[0] === "Annex I" ? "#5784c5" : "#c0c0c0") .style("border", d => `1px solid ${d[0] === "Annex I" ? "#5784c5" : "#c0c0c0"}`) items.append("div") .style("display", "inline-block") .style("font-size", "14px") .text(d => `${d[0] === "Annex I" ? "Developed" : "Developing"} (${d[1].length})`); return wrapper.node() }32:T4f6,xAxis = g => { const tickValues = [0.1, 1, 10]; const axis = g.append("g") .attr("transform", `translate(0, ${chartheight})`) .call( d3.axisBottom(x) .tickFormat(d => tickValues.includes(d) ? d : null) .tickSizeOuter(0) .tickSizeInner(10) ); axis.select(".domain").attr("stroke", "#c0c0c0"); const ticks = axis.selectAll(".tick"); ticks.select("line") .attr("stroke", "#c0c0c0") .attr("y2", d => tickValues.includes(d) ? 10 : 5); ticks.select("text") .attr("font-size", 12) .attr("font-family", franklinLight); const grid = g.append("g") .call( d3.axisBottom(x) .tickValues(tickValues) .tickSizeOuter(0) .tickSizeInner(chartheight) ); grid.select(".domain").remove(); const gridTicks = grid.selectAll(".tick"); gridTicks.select("text").remove(); gridTicks.select("line") .attr("stroke-dasharray", [2, 2]) .attr("stroke", "#e2e2e2"); g.append("text") .attr("transform", `translate(0, ${chartheight})`) .attr("dy", margin.bottom - 4) .html("Tons of CO2 emissions per capita ⟶"); }33:T4c0,yAxis = g => { const tickValues = [1e3, 1e4, 1e5]; const axis = g.append("g") .call( d3.axisLeft(y) .tickFormat(d => tickValues.includes(d) ? `$${d / 1e3}K` : null) .tickSizeOuter(0) .tickSizeInner(10) ); axis.select(".domain").attr("stroke", "#c0c0c0"); const ticks = axis.selectAll(".tick"); ticks.select("line") .attr("stroke", "#c0c0c0") .attr("x2", d => tickValues.includes(d) ? -10 : -5); ticks.select("text") .attr("font-size", 12) .attr("font-family", franklinLight); const grid = g.append("g") .attr("transform", `translate(${chartwidth})`) .call( d3.axisLeft(y) .tickValues(tickValues) .tickSize(chartwidth) ); grid.select(".domain").remove(); const gridTicks = grid.selectAll(".tick"); gridTicks.select("text").remove(); gridTicks.select("line") .attr("stroke-dasharray", [2, 2]) .attr("stroke", "#e2e2e2"); g.append("text") .attr("transform", `translate(0, 16)`) .attr("dx", -margin.left) .attr("dy", -margin.top) .html("↑ GDP per capita") }34:T460,annotate = g => { const annos = g.selectAll(".anno") .data(annotations) .enter().append("g") .attr("class", "anno") .attr("transform", d => `translate(${[x(d[xvar]), y(d[yvar])]})`); annos.append("polyline") .attr("points", d => { const start = geometric.pointTranslate([0, 0], d.angle, 4); const end = geometric.pointTranslate(start, d.angle, 7); return [start, end]; }) .attr("stroke", "#626262"); annos.append("text") .attr("dy", d => d.dy) .attr("dx", d => d.dx) .attr("fill", d => d.entity === "China" ? "#d35f4f" : d.type === "Annex I" ? "#5784c5" : "#626262") .attr("font-size", d => d.entity === "China" ? 16 : 14) .attr("font-weight", d => d.entity === "China" ? "bold" : "normal") .attr("paint-order", "stroke fill") .attr("pointer-events", "none") .attr("stroke", "white") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("text-anchor", d => d.textAnchor) .attr("transform", d => `translate(${geometric.pointTranslate([0, 0], d.angle, 14)})`) .text(d => d.label); }35:[] 2f:{"title":"GDP and CO2 emissions per capita","cells":[{"id":0,"value":"md`# GDP and CO2 emissions per capita\n\nThis chart shows the relationship between GDP and CO2 emissions per capita in 182 parties to [the U.N. Framework Convention on Climate Change](https://unfccc.int/process/parties-non-party-stakeholders/parties-convention-and-observer-states). The developed countries are technically referred to as Annex I, while the developing countries are Non-Annex I. There is a positive correlation between carbon emissions and GDP per capita.\n\nA version of this chart appeared in the story “[The U.S. has caused the most global warming. When will China pass it?](https://www.washingtonpost.com/climate-environment/interactive/2023/global-warming-carbon-emissions-china-us/)”, published in The Washington Post on March 1, 2023. For more information on the data sources, see [this notebook](https://observablehq.com/d/10bea703b4f60e4d).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"scatter = {\n const svg = d3.create(\"svg\")\n .attr(\"font-family\", franklinLight)\n .attr(\"width\", chartwidth + margin.left + margin.right)\n .attr(\"height\", chartheight + margin.top + margin.bottom);\n \n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${[margin.left, margin.top]})`);\n \n g.append(\"g\").call(xAxis);\n \n g.append(\"g\").call(yAxis); \n \n // Data points\n const nodes = g.selectAll(\".party\")\n .data(parties)\n .enter().append(\"g\")\n .attr(\"class\", \"party\")\n .attr(\"transform\", d => `translate(${[x(d[xvar]), y(d[yvar])]})`);\n \n nodes.append(\"circle\")\n .attr(\"r\", 4)\n .attr(\"fill\", d => d.entity === \"China\" ? \"#d35f4f\" : d.type === \"Annex I\" ? \"#5784c5\" : \"#c0c0c0\")\n .attr(\"fill-opacity\", 0.8)\n .attr(\"stroke\", d => d.entity === \"China\" ? \"#d35f4f\" : d.type === \"Annex I\" ? \"#5784c5\" : \"#c0c0c0\");\n \n g.call(annotate);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"margin = ({left: 47, right: 5, top: 24, bottom: 48});","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"size = Math.min(width, 640);","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"chartwidth = size - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"chartheight = size - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"xextent = d3.extent(parties, d => d[xvar])","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"yextent = d3.extent(parties, d => d[yvar])","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"x = d3.scaleLog(xextent, [0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"y = d3.scaleLog(yextent, [chartheight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"annotations = [\n {\n code: \"AFG\",\n label: \"Afghanistan\",\n textAnchor: \"start\",\n angle: 0,\n dy: 5,\n dx: 0\n },\n {\n code: \"CHN\",\n label: \"China\",\n textAnchor: \"middle\",\n angle: 270,\n dy: 0,\n dx: 0\n },\n {\n code: \"BDI\",\n label: \"Burundi\",\n textAnchor: \"middle\",\n angle: 270,\n dy: 0,\n dx: 0\n },\n {\n code: \"IND\",\n label: \"India\",\n textAnchor: \"middle\",\n angle: 90,\n dy: 10,\n dx: 0\n },\n {\n code: \"RUS\",\n label: \"Russia\",\n textAnchor: \"middle\",\n angle: 90,\n dy: 10,\n dx: 0\n },\n {\n code: \"USA\",\n label: \"United States\",\n textAnchor: \"middle\",\n angle: 270,\n dy: 0,\n dx: 0\n },\n ].map(d => Object.assign(d, parties.find(f => f.code === d.code)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"yvar = \"gdp_percap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"xvar = \"co2_percap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { parties } from \"10bea703b4f60e4d\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"import { franklinLight, franklinBold } from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":873,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"geometric = require(\"geometric@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}