2f:T656,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); const yG = svg.append("g").attr("stroke-width", 0); let node = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.continent) + y.bandwidth() / 2) .attr("r", d => r(d.emission)) .attr("stroke", "white") .attr("stroke-width", 1) .attr("fill", d => colour(d.year)); const simulation = d3.forceSimulation() .force("x", d3.forceX(d => x(d.year))) .force("y", d3.forceY(d => y(d.continent) + y.bandwidth() / 2)) .force("collide", d3.forceCollide(d => r(d.emission) + 1).strength(0.3)); simulation.on("tick", () => { node .transition() .delay((d, i) => d.x) .ease(d3.easeLinear) .attr("cx", d => d.x) .attr("cy", d => d.y) }); invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? 800 : 400; y.domain(split ? continents : continents.concat("Global")); // workaround for updating the yAxis y.range(split ? [margin.top, height - margin.bottom] : [height / 2, height / 2]); let ticks = split ? continents : ["Global"]; const t = svg.transition().duration(750); svg.transition(t).attr("viewBox", [0, 0, width, height]) ; yG.transition(t).call(yAxis, y, ticks); simulation.nodes(data); // update nodes simulation.alpha(1).restart(); // restart simulation } }); }30:[{"id":"80de01c5d1ad01eab05e1988bed1832fabae5e9846ca140bedf74bf7d7f5422d8c09ce7d8dbbd6f0a9fa688608214601c21d3d50e0825f063e4f453411c603ad","href":"https://static.observableusercontent.com/files/80de01c5d1ad01eab05e1988bed1832fabae5e9846ca140bedf74bf7d7f5422d8c09ce7d8dbbd6f0a9fa688608214601c21d3d50e0825f063e4f453411c603ad","name":"WhatsApp Image 2022-11-04 at 5@2.17.44 PM.jpeg","type":"image/jpeg","lastModified":1667801666569.011,"size":4186},{"id":"46b1faa55db7da7ac9484f5a02a8c84e8cad40014ad860c03bacc9b302c8ec903d870d4d9861ad29a8ad8dd2118a91bf6991ecbc86904150161040d420658553","href":"https://static.observableusercontent.com/files/46b1faa55db7da7ac9484f5a02a8c84e8cad40014ad860c03bacc9b302c8ec903d870d4d9861ad29a8ad8dd2118a91bf6991ecbc86904150161040d420658553","name":"color Chart@1.png","type":"image/png","lastModified":1667801666569.011,"size":4994},{"id":"247660fe84dcc2d8f39697e10d82b35f9e35df08ab119e60182a74be1cfb402643b2d319ca70ca49099fd66f75324dbf7aa0c6ab3f7401c5ce8860c9912dc428","href":"https://static.observableusercontent.com/files/247660fe84dcc2d8f39697e10d82b35f9e35df08ab119e60182a74be1cfb402643b2d319ca70ca49099fd66f75324dbf7aa0c6ab3f7401c5ce8860c9912dc428","name":"data2.json","type":"application/json","lastModified":1667801666569.011,"size":49274}] 2d:{"title":"CO₂ Emissions From Burning Of Diesel: A Disasterous Journey from 1965 to 2021","cells":[{"id":0,"value":"md`# CO₂ Emissions From Burning Of Diesel: A Disasterous Journey from 1965 to 2021\n\n A visualization of the amount of CO₂ emissions, that we have added to the atmosphere globally, as a result of burning diesel for transport and other purposes. The variation in colors indicates the consequent rise in global temperature responsible for climate change. The visualization can also be viewed for continents separately.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"toggle = {\n chart.update(false)\n return html` chart.update(false)}>Global\n chart.update(true)}>By Continents`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"whatsappImage20221104At521744Pm = FileAttachment(\"WhatsApp Image 2022-11-04 at 5@2.17.44 PM.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"

I--------------------I

Lowest Highest

18 Million Ton \n 1053 Million Ton

","pinned":false,"hidden":false,"mode":"html"},{"id":1307,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":214,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"Average Global Temperature Rise ---->\n

Not according to scale

","pinned":false,"hidden":false,"mode":"html"},{"id":1506,"value":"colorChart1 = FileAttachment(\"color Chart@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"height = 400 // initial height","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 50, right: 100, bottom: 50, left: 200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"data = FileAttachment(\"data2.json\").json().then(data => data.map((d, i) => ({id: i + 1, ...d})))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1192,"value":"continents = [...new Set(data.map(d => d.continent))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"\nx = d3.scaleLinear()\n .domain(d3.extent(data, d => d.year))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"y = d3.scaleBand()\n .domain(continents)\n .range([height / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .call(d3.axisTop(x).ticks(10))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"Years →\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"yAxis = (g, scale = y, ticks = y.domain()) =>\n g\n .attr(\"transform\", `translate(${30}, 0)`)\n .call(d3.axisLeft(scale).tickValues(ticks))\n .call(g => g.style(\"text-anchor\", \"start\"))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(data, d => d.emission))\n .range([6, 20])","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"colour = d3.scaleSequential(d3.extent(data, d => d.year), d3.interpolatePlasma)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"// data = client.query(`\n// WITH top AS (\n// SELECT exporter_group, SUM(volume) AS volume\n// FROM views.datasets\n// WHERE latest_dataset = TRUE\n// AND country_of_production = 'INDONESIA'\n// AND commodity = 'PALM OIL'\n// AND country_of_production != country_of_import\n// AND year = 2015\n// GROUP BY exporter_group\n// ORDER BY volume DESC\n// LIMIT 5\n// )\n// SELECT\n// CASE WHEN exporter_group = ANY(SELECT exporter_group FROM top) \n// THEN exporter_group\n// ELSE 'OTHER' END AS group,\n// exporter,\n// SUM(volume) AS volume,\n// SUM(commodity_deforestation) AS deforestation\n// FROM views.datasets\n// WHERE latest_dataset = TRUE\n// AND country_of_production = 'INDONESIA'\n// AND commodity = 'PALM OIL'\n// AND country_of_production != country_of_import\n// AND year = 2015\n// GROUP BY exporter_group, exporter\n// ORDER BY volume DESC`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}