2b:null 2c:["$","title",null,{"children":"Hockey sticks of prosperity and doom | Yusuf Imaad Khan | Observable"}] 31:T144c,htl.html`

${d3 .groups(data, (d) => d.labels) .map( ([facet, data]) => htl.html`

${Plot.plot({ // Dimensions width: 199, height: 170, marginBottom: 20, marginLeft: 35, marginTop: 24, // Font size style: { fontSize: "12px" }, // x axis features x: { label: null, nice: false, ticks: [ new Date("1750-01-01"), new Date("1950-01-01"), new Date("2010-01-01") ], domain: [new Date("1750-01-01"), new Date("2010-01-01")] }, // y axis features y: { nice: true, ticks: 4, grid: true, tickSize: 0, domain: d3.extent(data, (d) => d.values), labelArrow: "none", label: `${d3 .groups(data, (d) => d.yAxisLabels) .map(([yAxisLabels, data]) => yAxisLabels)}` //genuinely can't believe this worked }, // remove legend color: { legend: false }, // actual components of shaded area chart marks: [ // Add gradient - Credit Mike Bostock again - https://observablehq.com/@observablehq/plot-area-chart-with-gradient () => htl.svg` `, // add a y rule for surface temp 0 value Plot.ruleY(data, { y: 0, stroke: "black", strokeWidth: (d) => d.labels === "Surface Temperature" ? 0.5 : 0, // x position and clipping is different for surface temp data clip: "frame" }), // add dashed line for 1950 Plot.ruleX([new Date("1950-01-01")], { stroke: "black", strokeDasharray: "5,3", strokeOpacity: 0.8 }), // add area chart Plot.areaY(data, { x: "year", y: "values_all_else", fill: (d) => d.trend_type === "Socio-economic Trends" ? "url(#gradientBlue)" : "url(#gradientRed)", //"#3f6bee" : "#e61f00" clip: true, curve: "natural" }), // add area chart for surface temp (different because goes below 0) Plot.areaY(data, { x: "year", y1: "min", y2: "values_temp", fill: (d) => d.trend_type === "Socio-economic Trends" ? "url(#gradientBlue)" : "url(#gradientRed)", clip: true, curve: "natural" }), // add white line behind line to make it clearer Plot.line(data, { x: "year", y: "values", z: "trend_type", stroke: "#FFFFFF", clip: true, strokeWidth: 3, curve: "natural" }), // add line to emphasise area chart Plot.line(data, { x: "year", y: "values", z: "trend_type", stroke: (d) => d.trend_type === "Socio-economic Trends" ? "#3f6bee" : "#e61f00", clip: true, strokeWidth: 1.5, curve: "natural" }), // add a y rule for when starting y axis at 0 Plot.ruleY(data, { y: 0, stroke: "black", strokeWidth: (d) => d.labels === "Surface Temperature" ? 0 : 2.1, // put a hard axis rule for all starting at 0 clip: "frame" }), // add the y axis part of frame just for some separation between plots Plot.frame({ anchor: "left" }), // add text labels on each small multiple so we know what indicator it is Plot.text( [ `${d3 .groups(data, (d) => d.labels) .map(([labels, data]) => labels)}` ], { frameAnchor: "top-left", dx: 2.5, dy: 4, lineWidth: 5, fontSize: "16.5px", fontWeight: "bold", fill: "black", stroke: "#FFFFFF" } ) ] })} ` )}

`32:T535,## Notes There is a good deal that could be improved with this chart: 1. The gradient is not mapped to the Y values. It simply starts at an arbitrary % value - 25% - I think [this notebook](https://observablehq.com/@observablehq/plot-gradient-encoding) might fix the issue 2. In the original paper, the stratospheric ozone Y axis goes to 100% to show that ozone loss actually levelled off. This is kind of visible here, but really it should have been faithful to the original 3. The clipping might be too sharp 4. Where the Y axis doesn’t start at 0, I tried to make the hard line at the bottom conditional. I think the gradient could have faded upwards as well in order to deemphasise a hard breaking point 5. The aspect ratio is fairly arbitrary and I tried to scale it so it would fit on the website. The 4x6 layout might be squashing things too much 6. The coastal nitrogen data seems to be different compared to other charts. I think I know why - the time series goes back before 1750 and a bit after 2010. It seems other versions of the visual use these additional values to interpolate. I could be wrong. 7. Maybe the messaging of this chart is irresponsible. I’m not sure. We’re hurtling towards catastrophe and I’m nitpicking about the details of reproducing a chart that’s been about for a while. Its very absurd33:[{"id":"5987dd810fcc010c956dbc3c0d03b40117cbbcda7436160a7d31f769360a81b25fc7d45d8928dc33f9bbf4f6e61d1ac3163817a8e21026471d2c74ca14b7be30","href":"https://static.observableusercontent.com/files/5987dd810fcc010c956dbc3c0d03b40117cbbcda7436160a7d31f769360a81b25fc7d45d8928dc33f9bbf4f6e61d1ac3163817a8e21026471d2c74ca14b7be30","name":"chart3-minor-edit.png","type":"image/png","lastModified":1692562596205.802,"size":1138698},{"id":"ce28d26daaa15e2996f37c6c231d96c8807f4fa92b865202e2e1315a8dd38d0c05f70eee376a542ce8cc10b6f840c7df3fb033aca0a78a26b13267185bca07e2","href":"https://static.observableusercontent.com/files/ce28d26daaa15e2996f37c6c231d96c8807f4fa92b865202e2e1315a8dd38d0c05f70eee376a542ce8cc10b6f840c7df3fb033aca0a78a26b13267185bca07e2","name":"igbp_combined_df@1.csv","type":"text/csv","lastModified":1693518254772.331,"size":411866}] 2f:{"id":"8422b1ca13aaa766","slug":"hockey-sticks-of-prosperity-and-doom","title":"Hockey sticks of prosperity and doom","thumbnail":"90a3f3885cb75ce4dac66dffc277abc24d9623e2ecc03154be6b294f4b7ce13c","access_level":"public","create_time":"$D2023-08-12T02:43:25.295Z","update_time":"$D2023-09-27T15:01:27.294Z","view_time":null,"first_public_time":"$D2023-09-03T20:56:10.031Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":"starter_2024"},"version":303,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null}],"members":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Hockey sticks of prosperity and doom","cells":[{"id":155,"value":"# Hockey sticks of \tprosperity and \tdoom\n## Socio-economic trends vs Earth system trends between 1750 and 2010","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"# Background","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"The other week I made some charts for [The Polycrisis newsletter](https://www.phenomenalworld.org/series/the-polycrisis/). [They were for a piece written by Anthea Roberts and Nicolas Lamp on understanding globalization through hockey sticks and crosses](https://www.phenomenalworld.org/analysis/hockey-sticks-and-crosses/). The hockey sticks represent inexorable growth. The crosses represent distributional conflicts.\n\nThe centrepiece of all these charts was a simple reproduction of a chart appearing in Steffen et. al's Great Acceleration paper (2015). I used Observable Plot to make it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"chart3MinorEdit = FileAttachment(\"chart3-minor-edit.png\").image({ width: 640 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"(*There is a lot that could be improved here. I list some possible improvements at the end of this notebook.*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"Faceting has been implemented in Plot, but if I understand things alright, it still seems a bit tough to put a bunch of different variables with varying axes (or scales = \"free\" to ggplot2 users) in a chart. To achieve this, I drew on [Toph Tucker's notebook](https://observablehq.com/@tophtucker/facet-wrap), and also [Mike Bostock's notebook](https://observablehq.com/@observablehq/plot-facet-wrap) for the text label on each facet. \n\nI have been lurking on Observable for a little while, and I think the community is brilliant. I can only apologise for not contributing sooner. I have been a bit insecure about my javascript skills. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"This would have been very difficult to make without Observable and Observable Plot. I'd encourage others to fork and do better or explore a different way of visualising it. I have a longer write up on my [blog](https://www.yusufimaadkhan.com/blog) to explain the background and data cleaning a bit more. My code and datasets for the newsletter charts are [here](https://github.com/yusufimaadkhan/polycrisis-newsletter-charts/tree/main/newsletter-charts).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"// parse dates\n{\n data.forEach((d) => {\n d.year = parseTime(d.year);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"//Parse time\nparseTime = d3.utcParse(\"%Y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"data = FileAttachment(\"igbp_combined_df@1.csv\").csv({ typed: true }) // need to say \"typed: true\" instead of like in Quarto where you use transpose","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"