31:T97a,chart = { const svg = d3.create("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom) .style("font-family", franklinLight) svg.append("rect") .attr("fill", "white") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom) const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("rect") .attr("x", x(2022)) .attr("width", x(yearExtent[1]) - x(2022)) .attr("height", chartheight) .attr("fill", "#eee"); const projectedLabel = g.append("g") .attr("fill", "#9f9f9f") .attr("font-size", "14px") .attr("font-style", "italic") .attr("opacity", endYear === 2050 ? 1 : 0) .attr("text-anchor", "end") .attr("transform", `translate(${x(2022)})`); projectedLabel.append("text") .attr("x", -12) .attr("y", 12) .text("Projected"); projectedLabel.append("polyline") .attr("points", [[-8, 8], [0, 8]]) .attr("stroke", "#808080"); g.append("g") .call(xAxis) g.append("g") .call(yAxis) const lines = g.selectAll(".line-g") .data(grouped) .join("g") .attr("class", "line-g") lines.append("path") .datum(d => d[1]) .attr("fill", "none") .attr("stroke", d => colors[d[0].entity]?.fill || "#d5d5d5") .attr("stroke-width", d => ["China", "United States"].includes(d[0].entity) ? 4 : 2) .attr("d", line); const label = g.selectAll(".label") .data(labels) .join("g") .attr("class", "label") .attr("opacity", d => d.position < (chartheight + 20) ? 1 : 0) .attr("transform", `translate(${chartwidth})`) label.append("text") .attr("fill", d => colors[d.entity]?.text || "#aaaaaa") .attr("font-weight", d => ["China", "United States"].includes(d.entity) ? "bold" : "normal") .attr("dx", 20) .attr("dy", 6) .attr("y", d => d.position) .text((d, i) => d.entity); label.append("polyline") .attr("stroke", d => ["China", "Europe", "United States"].includes(d.entity) ? "#808080" : "#d5d5d5") .attr("fill", "none") .attr("points", d => { return [ [2, d.target], [10, d.target], [18, d.position] ] }) return svg.node(); }32:T5f2,yAxis = g => { const generator = d3.axisLeft(y) .tickFormat((d, i, e) => yAxisFormat(d, i, e, y.ticks())) .tickSize(chartwidth + 10) .ticks(5); const axis = g.call(generator) .attr("transform", `translate(${chartwidth})`); axis.select(".domain").remove(); const tick = axis.selectAll(".tick"); tick.select("text") .attr("dx", (d, i, e) => { if (i === e.length - 1){ const { places } = yAxisParse(d); const base = d / Math.pow(10, places); const chars = base.toString(); const charWidths = { "1": 6.75, "2": 8.172, "3": 8.172, "4": 8.172, "5": 8.172, "6": 7.859, "7": 7.109, "8": 7.750, "9": 7.844, "0": 8.172, ".": 3.484 } const numWidth = d3.sum(chars.split(""), char => charWidths[char]) return -numWidth; } else { return 0; } }) .attr("fill", "#808080") .attr("font-size", 14) .attr("font-family", franklinLight) .attr("text-anchor", (d, i, e) => i === e.length - 1 ? "start" : "end"); tick.select("line") .attr("stroke", (d, i) => i === 0 ? "#000" : "#e2e2e2") .attr("stroke-dasharray", (d, i) => i === 0 ? null : [2, 2]) .attr("x2", function(d, i, e) { const v = +d3.select(this).attr("x2"); return i === e.length - 1 ? v + 70 : v; }); return axis; }33:[] 2f:{"title":"Cumulative carbon dioxide emissions since 1750","cells":[{"id":0,"value":"# Cumulative carbon dioxide emissions since 1750\n\nHere’s the full timeline of humanity’s carbon dioxide emissions — all 1.5 trillion tons of them — from the dawn of the Industrial Revolution through today and into the future.\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":"md"},{"id":744,"value":"viewof endYear = Scrubber(d3.range(1750, 2051), { autoplay: false, initial: 2050, loop: false, delay: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"colors = ({\n \"China\": {\n fill: \"#d35f4f\",\n text: \"#d35f4f\",\n },\n \"Europe\": {\n fill: \"#808080\",\n text: \"#808080\",\n },\n \"United States\": {\n fill: \"#5784c5\",\n text: \"#5784c5\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"line = d3.line()\n .x(d => x(d.year))\n .y(d => y(d.cumulative))","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"xAxis = g => {\n const generator = d3.axisBottom(x)\n .tickFormat(d => d)\n .tickValues(xAxisValues(endYear))\n .tickSize(20)\n\n const axis = g\n .attr(\"transform\", `translate(0, ${chartheight})`)\n .call(generator);\n\n axis.select(\".domain\").remove();\n\n const tick = g.selectAll(\".tick\")\n\n tick.select(\"text\")\n .attr(\"font-family\", franklinLight)\n .attr(\"font-size\", 14);\n \n tick.select(\"line\")\n .attr(\"stroke\", \"#ccc\");\n\n return axis;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"function xAxisValues(year){\n let step;\n\n if (width <= 480){\n if (year <= 1753){\n step = 1;\n }\n else if (year <= 1759){\n step = 2;\n }\n else if (year <= 1769){\n step = 5;\n }\n else if (year <= 1789) {\n step = 10;\n }\n else if (year <= 1799) {\n step = 20;\n }\n else if (year <= 1850) {\n step = 25;\n }\n else if (year <= 1950) {\n step = 50;\n }\n else {\n step = 100;\n }\n }\n else {\n if (year <= 1755){\n step = 1;\n }\n else if (year <= 1760) {\n step = 2;\n }\n else if (year <= 1780){\n step = 5;\n }\n else if (year <= 1800) {\n step = 10;\n }\n else if (year <= 1900) {\n step = 25;\n }\n else {\n step = 50;\n }\n }\n\n return d3.range(1750, year + step, step).filter(y => y <= year)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"function yAxisFormat(d, i, e, ticks){\n const max = ticks[ticks.length - 1];\n const { places, suffix } = yAxisParse(max);\n\n return `${d / Math.pow(10, places)}${i === e.length - 1 ? ` ${suffix} tons` : \"\"}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"function yAxisParse(value){\n const places = (() => {\n const p = Math.floor(Math.log10(value))\n const mod3 = p % 3;\n return p - mod3\n })();\n\n const suffix =\n places === 9 ? \"billion\" :\n places === 6 ? \"million\" :\n places === 3 ? \"thousand\" :\n \"\";\n\n return {\n places,\n suffix\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"labels = {\n const dodged = dodge(grouped.map(d => y(d[2])), 16);\n return grouped\n .map((d, i) => {\n return {\n entity: d[0],\n target: y(d[2]),\n position: dodged[i]\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"x = d3.scaleLinear()\n .domain([yearExtent[0], endYear])\n .range([0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"y = d3.scaleLinear()\n .domain([0, emissionsExtent[1]])\n .range([chartheight, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"margin = ({left: 37, right: 130, top: 15, bottom: 35})","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"basewidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"chartwidth = basewidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"chartheight = Math.max(400, Math.min(500, basewidth * 9 / 16)) - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"data = emissions\n .filter(d => d.year <= endYear)","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"grouped = d3\n .groups(data, d => d.entity)\n .map(([entity, entries]) => [entity, entries, entries[entries.length - 1].cumulative])\n .sort((a, b) => d3.ascending(a[2], b[2]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"yearExtent = d3.extent(data, d => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"emissionsExtent = d3.extent(data, d => d.cumulative)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"import { dodge } from \"@climatelab/label-dodging\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"import { franklinLight } from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { emissions } from \"10bea703b4f60e4d\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}