2c:null 2d:["$","title",null,{"children":"From Policy to Practice: Crafting a Sustainable Future through CO2 Legislation | me | Observable"}] 32:T5a8,

Air pollution is a major global environmental problem with various adverse effects on health and the environment. According to the World Health Organization(WHO), air pollution is the biggest environmental risk to health and a public health emergency, being responsible for millions of premature deaths annually. On the other hand, air pollution also affects climate change, which is one of the most imporant challenges humanity has to face this century. Unfortunately, expecting people to act in society best interest instead of their own personal ones is an excercise in futility. Therefore, where ethics fail, legislation appears, as a reminder to the correct path that people, deep down, know is correct.

In the last 50 years, all countries around the world have embarked on the task of legislate emissions. In practice however, it is difficult to get the actual law right, specially when talking about climate. Laws may be too strict and cripple the economy, have some sort of loophole, or be too lenient and not achieve the desired results. Therefore, it is to be expected that some countries laws have been more succesful than others.

In the following presentation, the reader will be able to explore different aspects of the climate legistlation. First, an overview of CO2 emissions. Then, a more indepth study about the impact of climatic laws in selected countries.

33:T763,

The issue of carbon dioxide (CO2) emissions has become a critical aspect of global environmental discussions. As societies progressed through industrialization, the emissions of CO2, a significant greenhouse gas, have risen dramatically. Understanding the historical trends in CO2 emissions provides valuable insights into the contributors to climate change. The focus here is on the United States, historically the largest carbon emitter, and the shifting dynamics that have placed China and India at the forefront of global CO2 emissions.

Historically, the US has been the largest carbon emitter, releasing 422 billion tons of CO2 into the atmosphere since the onset of the Industrial Revolution (1760). This prolonged period of industrial activity and economic development significantly contributed to the nation's carbon footprint.

However, the landscape of CO2 emissions is evolving. As countries undergo development and industrialization, their carbon emissions tend to increase. In this context, China has emerged as the leading global emitter, with India securing the third position. This shift reflects the changing dynamics of economic growth and energy consumption in these nations.

In 2021, these three countries (U.S., China, and India) collectively accounted for 52% of the world's total CO2 emissions. It is remarkable also that the top 10 countries with the highest emissions collectively contributed to almost two-thirds of the entire global CO2 emissions.

This data highlights the urgency of addressing emissions on an international scale. While historical responsibility remains with countries that have been major emitters over the years, a collaborative and comprehensive approach is essential to control the rising tide of global CO2 emissions.

34:T47e,

As a first approach we unravel the intricacies of the global pursuit of environmental harmony, a compelling correlation takes center stage — the intricate dance between a nation's emissions trajectory and its dedication to climate legislation.

In the relentless sprint towards progress via industrialization, countries find themselves at a pivotal juncture, where economic strides intersect with environmental consequences. As industries grow, so does the looming threat of escalated pollution. Yet, a crucial insight emerges: governments worldwide are awakening to the urgent need to counteract this surge in emissions.

This realization underscores a fundamental shift in perspective. It's not merely about economic growth; it's about achieving a balance. Governments, driven by economic goals, are recognizing their dual duty to propel progress while safeguarding the planet. The story unfolds not as a mere clash of interests but as a nuanced dance, where the more a country grows economically, the more vital it becomes to legislate and mitigate the environmental fallout.

35:Tdc2,viewof worldmapco2percapita = { const width = 928; const marginTop = 46; const height = width / 2 + marginTop; const projection = d3.geoEqualEarth().fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"}); const path = d3.geoPath(projection); const valuemap = new Map(finalResultArray.map(d => [d.country, d.co2_including_luc_per_capita])); const colorDomain = [0, 40] const color = d3.scaleSequential().interpolator(d3.interpolateRdPu).domain(colorDomain); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("transform", "translate(20,0)") .append(() => Legend(color, {title: "CO2 per capita (tonnes)", width: 260})); svg.append("path") .datum({type: "Sphere"}) .attr("fill", "white") .attr("stroke", "currentColor") .attr("d", path); const mapGroup = svg.append("g"); mapGroup .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => color(valuemap.get(d.properties.name))) .attr("d", path) .on("click", handleClick) .append("title") .text(d => `${d.properties.name}\n${valuemap.get(d.properties.name)}`); mapGroup.append("path") .datum(countrymesh) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); function getFullCountryName(shortName) { const countryMappings = { "Cabo Verde": "Cape Verde", "United States of America": "United States", "Dem. Rep. Congo": "Congo, The Democratic Republic of the", "Dominican Rep.": "Dominican Republic", "Côte d'Ivoire": "Cote d'Ivoire", "Central African Rep.": "Central African Republic", "Bosnia and Herz.": "Bosnia and Herzegovina", "S. Sudan": "South Sudan", "Eq. Guinea": "Equatorial Guinea", "Macedonia": "North Macedonia", "Solomon Is.": "Solomon Islands", "Timor-Leste": "East Timor", "eSwatini": "Eswatini", "Russia": "Russian Federation", "Bolivia": "Bolivia, Plurinational State of", "North Korea": "Korea, Democratic People's Republic of", "South Korea": "Korea, Republic of", "Iran": "Iran, Islamic Republic of", "Moldova": "Moldova, Republic of", "Syria": "Syrian Arab Republic", "Laos": "Lao People's Democratic Republic", "Tanzania": "Tanzania, United Republic of", "Taiwan": "Taiwan, Province of China", "Venezuela": "Venezuela, Bolivarian Republic of", "São Tomé and Principe" : "Sao Tome and Principe", "Antigua and Barb." : "Antigua and Barbuda", "St. Vin. and Gren.":"Saint Vincent and the Grenadines", "": "" }; return countryMappings[shortName] || shortName; } function handleClick(event, d) { const country = getFullCountryName(d.properties.name); const filteredData = leyes_clima.filter(item => item.name === country); mutable leyes_filtradas = filteredData; const filteredc02= c02data2021nonull.filter(item => item.country === d.properties.name); mutable co2data2021filt=filteredc02; }; svg.call(d3.zoom() .translateExtent([[0.01, 0], [width, height]]) .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed)); function zoomed({transform}) { mapGroup.attr("transform", transform); svg.select("path").attr("transform", transform); svg.select("g").attr("transform", transform); } return svg.node(); } 36:T4ef,

Let's enter more detail about whether there exists a relation between the number of laws that a country has and their emissions. Now, our focus is on the geographical distribution of environmental legislation revealing a compelling narrative that underscores regional disparities in regulatory practices. European countries emerge as front-runners in implementing a higher number of environmental laws. This proactive approach aligns with the region's commitment to sustainable practices, reflecting a comprehensive strategy to mitigate pollution emissions.

In contrast, countries in Africa, America, and Asia tend to adopt a comparatively lower number of environmental policies. Despite this general trend, an intriguing dynamic is unfolding within the Americas and Asia. While the overall trend in Asia and America leans toward a lower number of environmental policies, some countries in these regions defy expectations. Notably, nations like the United States, China, and India, previously identified as significant pollution emitters, have enacted a considerable number of environmental laws. This highlights a paradoxical relationship where high pollution levels necessitate stringent regulatory measures.

37:T427,There are two globally significant protocols worth mentioning: ### Kyoto Protocol:

The Kyoto Protocol, an international treaty formulated in 1997, officially took effect on February 16, 2005. This landmark agreement places obligations on developed nations to restrict and decrease emissions of environmentally harmful gases. The Kyoto Protocol's impact spanned from 2008 to 2020.

### Paris Agreement:

The Paris Agreement is a pivotal global accord crafted in 2015 that entered into force on 2016. Unlike its predecessor, the Kyoto Protocol, the Paris Agreement adopts a more inclusive approach, with commitments from both developed and developing nations to collectively combat climate change. This groundbreaking treaty aims to limit global warming to well below 2 degrees Celsius above pre-industrial levels, with efforts to pursue a 1.5-degree target. The Paris Agreement represents a collaborative effort on a global scale to address the urgent challenges of climate change and establish a sustainable future.

38:T1565,${ region === "China" ? "China, currently the world's leading contributor to CO2 emissions, experienced minimal emissions before the 1950s. However, since then, there has been an exponential surge in CO2 emissions. Despite regional initiatives aimed at curbing this trend, such as the Five-Year Plan for energy efficiency and pollution reduction (2006-2011), the Action Plan for Prevention and Control of Air Pollution (2013), the Air Pollution Prevention and Control Action Plan (1998), and the Environmental Protection Law of the Republic of China, these efforts have had limited impact on reversing the escalating emissions.\n\nGlobal protocols, including the Kyoto Protocol, did not impose binding emission reduction targets on China, as it was classified as a developing country. Instead, China was encouraged to voluntarily address emissions. Unfortunately, these voluntary measures and regional plans fell short of halting the upward trajectory of emissions.\n\n Under the Paris Agreement, China, as a signatory, pledged to peak its CO2 emissions around 2030 and achieve carbon neutrality by 2060. This commitment entails capping total CO2 emissions before 2030 and achieving a balance between emitted greenhouse gases and those removed from the atmosphere by 2060. Despite these aspirations, post-Paris Agreement data indicates a continued increase in China's emissions, deviating from the intended trajectory outlined in the agreement. Addressing this discrepancy remains a critical challenge in realizing China's climate goals." : region === "India" ? "India, currently ranking as the third-largest contributor to CO2 emissions globally, had relatively minimal emissions before 1950. However, since that time, there has been an exponential surge in CO2 emissions. Efforts to curb this trend began in 1981 with the enactment of the Prevention and Control of Air Pollution, though it yielded no discernible impact on CO2 emissions in subsequent years.\n\nIn 2005, with the emergence of the Kyoto Protocol, India, classified as a developing country, faced no direct restrictions on its emissions. Instead, it was encouraged to voluntarily reduce emissions and engage in global initiatives to combat climate change. Despite the implementation of a National Action Plan on Climate Change, India's CO2 emissions continued to grow exponentially. \n\nIn 2016, India became a party to the Paris Agreement, making significant commitments:\n\n Emission Reduction: India pledged to reduce its emissions intensity below 2005 levels by the year 2030.\n\n Carbon Neutrality: In 2021, the Prime Minister of India announced a goal for the country to achieve net-zero carbon emissions by 2070.\n\nAligned with these commitments, India approved the National Clean Air Programme in 2019, demonstrating an immediate impact on emissions the following year. However, in 2021, CO2 emissions increased significantly once again, raising concerns about the country's ability to achieve the target of reducing emissions below 2005 levels by 2030. Ongoing efforts and policy adjustments will be crucial for India to meet its climate goals and contribute effectively to global emission reduction efforts." : region === "European Union (28)" ? "In the context of the European Union, a discernible trend of increasing CO2 emissions emerged from 1950, persisting until the 1970s due to the industrialization of the countries. However, a pivotal shift occurred in that decade with the implementation of the first environmental laws, successfully stabilizing the upward trajectory of CO2 emissions. Notably, throughout the subsequent decades of the 70s and 80s, numerous countries within the European Union introduced environmental legislation aimed at managing and mitigating their emissions.\n\nThis stabilization of CO2 emissions endured until 2005 when the Kyoto Protocol came into effect. This international agreement significantly influenced the emissions landscape of the European Union, particularly as it pertains to developed nations. Subsequently, a discernible decline in emissions ensued, a trend further reinforced by the implementation of the Paris Agreement. This global protocol, extending its impact beyond developed nations to include those still in the process of development, underscored the principles of transparency and accountability in monitoring emissions from each participating country. Together, these international agreements have played a crucial role in shaping and sustaining the European Union's commitment to reducing carbon emissions." : region === "United States" ? "The United States, a prominent emitter of pollutants in the XX century, reflects its historical status as a developed nation. In response to escalating environmental concerns, the Clean Air Act was instituted in the 1970s, marking a pivotal moment in regulating air pollution within the U.S. The synergistic effect of the Clean Air Act, coupled with the Energy Policy and Conservation Act introduced in 1978, succeeded in curbing emissions until the mid-1980s.\n\nFollowing this achievement, a subsequent uptick in CO2 emissions emerged. However, a transformative shift occurred in 2005 with the implementation of the Kyoto Protocol, sparking a discernible decline in CO2 emissions. The momentum towards emission reduction persisted with the advent of the Paris Protocol, further solidifying the commitment to environmental sustainability." : "Unknown region." } 39:T2882,totalLabelAnnotations = { return [ { country: "European Union (28)", id: "World War II", note: { label: "World War II", title: "1939-1945" }, color: "#ef4837", // Brighter color to make this annotation stand out x: 557, y: 400, dx: -1, dy: -115, subject: { radius: 35, radiusPadding: 2 }, type: d4.annotationCalloutCircle // This annotation refers to an area rather than a point }, { country: "India", id: "NCAP", note: { label: "National Clean Air Programme", title: "2019" }, data: get_date_data("2019-01-01", data2), dx: -100, dy: -1, }, { country: "India", id: "Air pollution", note: { label: "Prevention and Control of Air Pollution", title: "1981" }, data: get_date_data("1981-12-31T23:00Z", data2), dx: 0, dy: -30, }, { country: "India", id: "NAPCC", note: { label: "National Action Plan on Climate Change", title: "2008" }, data: get_date_data("2008-01-01", data2), dx: -102, dy: -1, }, { country: "India", id: "Kyoto protocols", color: "#5BF283", note: { label: "Kyoto Protocols", title: "16-02-2005" }, data: get_date_data("2005-12-31T23:00Z", data2), dx: -90, dy: 0, }, { country: "India", id: "Paris protocols", color: "#F2CA5B", note: { label: "Paris Protocols", title: "16-02-2016" }, data: get_date_data("2015-12-31T23:00Z", data2), dx: -80, dy: 0, }, { country: "China", id: "Paris protocols", type: d4.annotationCalloutCurve, color: "#F2CA5B", note: { label: "Paris Protocols", title: "16-02-2016" }, data: get_date_data("2015-12-31T23:00Z", data2), dx: -80, dy: -40, }, { country: "China", id: "Kyoto protocols", color: "#5BF283", note: { label: "Kyoto Protocols", title: "16-02-2005" }, data: get_date_data("2005-12-31T23:00Z", data2), dx: -70, dy: 0, }, { country: "China", id: "Five energy plan", note: { label: "Five-Year Plan for energy efficiency and pollution reduction", title: "2006-2011" }, color: "#ef4837", // Brighter color to make this annotation stand out x: 1023, y: 200, dx: 0, dy: 115, subject: { radius: 57, radiusPadding: 5 }, type: d4.annotationCalloutCircle // This annotation refers to an area rather than a point }, { country: "China", id: "First `policy", // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { label: "First Environmental Protection Law of the Republic of China", title: "December 1979" }, data: get_date_data("1979-01-01", data2), dx: -1, dy: -30, }, { country: "China", id: "Air Pollution Prevention and Control Action Plan", // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { label: "Air Pollution Prevention and Control Action Plan", title: "1998" }, data: get_date_data("1998-01-01", data2), dx: 0, dy: 45, }, { country: "China", id: "Action Plan", note: { label: "Action Plan for the Prevention and Control of Air Pollution. 270 billion$ to reduce ambient air pollution", title: "2013" }, data: get_date_data("2013-01-01", data2), dx: -233, dy: -0, }, { country: "United States", id: "Clean Air Act", // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { label: "Clean Air Act", title: "1970" }, data: get_date_data("1970-01-01", data2), dx: 0, dy: -60, }, { country: "United States", id: "Great Depression", // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { label: "Great Depression leading to a decrease in industrial pollution.", title: "29-10-1929" }, data: get_date_data("1929-01-01", data2), dx: 0, dy: -40, }, { country: "United States", id: "Paris protocols", color: "#F2CA5B", type: d4.annotationCallout, // this type of annotation draws a line under your label. note: { label: "Paris Protocols", title: "16-02-2016" }, data: get_date_data("2015-12-31T23:00Z", data2), dx: -1, dy: 50, }, { country: "United States", id: "Energy Policy", // If you don't provide a custom "type" attribute in your options dictionary, , // the default type in the getAnnotations function will be used. note: { label: "Energy Policy and Conservation Act", title: "1978" }, data: get_date_data("1978-01-01", data2), dx: 0, dy: 100, }, { country: "United States", id: "Kyioto Protocol", color: "#5BF283", note: { label: "Kyoto protocols", title: "16-02-2005", }, data: get_date_data("2005-01-01", data2), dx: 0, dy: 50, },{ country: "European Union (28)", id: "Federal Immission Control Act", type: d4.annotationCallout, // this type of annotation draws a line under your label. note: { label: "Germany - Federal Immission Control Act", title: "1974" }, data: get_date_data("1974-12-31T23:00Z", data2), dx: -2, dy: 210, },{ country: "European Union (28)", id: "Clean Air Act", note: { label: "Clean Air Act", title: "1983" }, data: get_date_data("1982-12-31T23:00Z", data2), dx: 5, dy: -50, },{ country: "European Union (28)", id: "Oil crisis", type: d4.annotationCallout, // this type of annotation draws a line under your label. note: { label: "Oil crisis", title: "1973" }, data: get_date_data("1973-12-31T23:00Z", data2), dx: -1, dy: -12, },{ country: "European Union (28)", id: "Paris protocols", color: "#F2CA5B", type: d4.annotationCallout, // this type of annotation draws a line under your label. note: { label: "Paris Protocols", title: "16-02-2016" }, data: get_date_data("2015-12-31T23:00Z", data2), dx: -1, dy: 30, },{ country: "European Union (28)", id: "Integrated Pollution Prevention and Control", type: d4.annotationCallout, // this type of annotation draws a line under your label. note: { label: "EU Integrated Pollution Prevention and Control (IPPC) Directive", title: "1996" }, data: get_date_data("1996-01-01", data2), dx: 1, dy: 300, }, // { // country: "European Union (28)", // id: "Loi sur l'Air et l'Utilisation Rationnelle de l'Énergie", // type: d4.annotationCalloutCurve, // this type of annotation draws a line under your label. // note: { // label: "France Loi sur l'Air et l'Utilisation Rationnelle de l'Énergie", // title: "01-01-1982" // }, // data: get_date_data("1982-12-31T23:00Z", data2), // dx: -270, // dy: -0, // }, { country: "European Union (28)", id: "Environmental Management Act", note: { label: "Netherlands Environmental Management Act", title: "1982" }, data: get_date_data("1982-01-01", data2), dx: 20, dy: 20, }, { country: "European Union (28)", id: "Kyoto protocols", color: "#5BF283", note: { label: "Kyoto Protocols", title: "16-02-2005" }, data: get_date_data("2005-12-31T23:00Z", data2), dx: -0, dy: -40, }, ] }3a:T8ad,class SubPlot extends Plot.Mark { // This function receives the facet information (fx and fy), and returns a new Plot render({ fx, fy }, _scales, _channels, dimensions) { // The charts on the same column must share the same x scale, and the charts on the // same row must share the same y scale (except on the diagonal). Currently this works // because plots are consistent, but it’s not guaranteed if you start playing with // more custom charts. return htl.svg`${Plot.plot({ ...dimensions, insetTop: fx === fy ? 20 : 6, insetBottom: fx === fy ? 0 : 6, inset: 6, axis: null, nice: true, color: color2.scale("color"), marks: [ fx === fy ? [ // diagonal cell (one dimension) Plot.auto(resultArrayWithContinent2, { x: fx, color: { value: colorBy } }), Plot.text([fx], { frameAnchor: "top", fontWeight: "bold", dy: 5, }) ] : [ // two dimensions Plot.gridX({ ticks: 5 }), Plot.gridY({ ticks: 7 }), Plot.auto(resultArrayWithContinent2, { x: fx, y: fy, color: { value: colorBy } }) ], fx === fields[0] && fy !== fx ? [ // left y axes (note that we omit it on the top-left cell, where y is defined by the bar chart) Plot.dotY(resultArrayWithContinent2, { y: fy, filter: [] }), // no output, but necessary to set the y scale Plot.axisY({ ticks: 7, label: null, anchor: "left" }) ] : null, fx === fields[fields.length - 1] && fy !== fx ? [ // right y axes Plot.dotY(resultArrayWithContinent2, { y: fy, filter: [] }), Plot.axisY({ ticks: 7, label: null, anchor: "right" }) ] : null, fy === fields[fields.length - 1] ? [ // bottom x axes Plot.dotX(resultArrayWithContinent2, { x: fx, filter: [] }), Plot.axisX({ ticks: 5, anchor: "bottom", labelAnchor: "center" }) ] : null ] })}`; } }3b:T420,getAnnotations = function(annotationList, x, y, parseTime, formatTime, debug){ /* Return a list of d3.annotation objects Arguments annotationList - a list of dictionaries used to configure each annotation x: a d3.scale y: a d3.scale parseTime: function for turning strings into js dates formatTime: function for turning js date into a string debug: a boolean flag */ chart5 // reactive hack to force annotations to render whenever the chart is redrawn let makeLabelAnnotations = d4.annotation() .editMode(debug) // GLOBAL VARIABLE .type(d4.annotationLabel) // Adjust this arg to adjust the default annotation styling. .accessors({ x: d => x(parseTime(d.date)), y: d => y(d.close) // If you use a new dataset, you may need to update this accessor. }) .accessorsInverse({ date: d => formatTime(x.invert(d.x)), close: d => y.invert(d.y) }) .annotations(annotationList) return makeLabelAnnotations }3c:T498,countryContinentMapping = [ {name:"Bahamas", continent : "Americas", region: "Central America"}, {name: "Bonaire Sint Eustatius and Saba" , continent: "Americas" , region: "South America"}, {name: "Congo", continent: "Africa", region: "Central Africa"}, {name: "Curacao", continent: "Americas", region: "South America"}, {name: "Timor-Leste", continent: "Asia", region: "South East Asia"}, {name: "Gambia", continent: "Africa", region: "Western Africa"}, {name: "Hong Kong", continent: "Asia", region: "East Asia"}, {name: "Kosovo", continent: "Europe", region: "South East Europe"}, {name: "Montenegro", continent: "Europe", region: "South East Europe"}, {name: "North Korea", continent: "Asia", region: "East Asia"}, {name: "Palestine", continent: "Asia", region:"South West Asia"}, {name: "Romania", continent: "Europe", region: "South East Europe"}, {name: "Serbia", continent: "Europe", region: "South East Europe"}, {name: "S. Sudan", continent: "Africa", region: "Northern Africa"}, {name: "United States of America", continent: "Americas", region: "North America"}, {name: "Zambia", continent: "Africa", region: "Southern Africa"}, ] 3d:T406,stopwords = new Set("i,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall".split(","))3e:T873,function WordCloud2(text, { size = group => group.length, word = d => d, marginTop = 0, marginRight = 0, marginBottom = 0, marginLeft = 0, width = 640, height = 400, maxWords = 250, fontFamily = "sans-serif", fontScale = 15, fill = null, padding = 0, rotate = 0, invalidation } = {}) { const words = typeof text === "string" ? text.split(/\W+/g) : Array.from(text); const data = d3.rollups(words, size, w => w) .sort(([, a], [, b]) => d3.descending(a, b)) .slice(0, maxWords) .map(([key, size]) => ({text: word(key), size})); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("font-family", fontFamily) .attr("text-anchor", "middle") .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const g = svg.append("g").attr("transform", `translate(${marginLeft},${marginTop})`); const cloud = d3Cloud() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .words(data) .padding(padding) .rotate(rotate) .font(fontFamily) .fontSize(d => Math.sqrt(d.size) * fontScale) .on("word", ({size, x, y, rotate, text}) => { g.append("text") .datum(text) .attr("font-size", size) .attr("fill", fillWord(text)) .attr("transform", `translate(${x},${y}) rotate(${rotate})`) .text(text); }); cloud.start(); invalidation && invalidation.then(() => cloud.stop()); return svg.node(); function fillWord(word) { const redWords = ["risk", "crisis", "risks", "implications", "need", "crises","blame", "price", "issues", "issue"]; const greenWords = ["policies", "law", "change", "objectives", "union", "policy", "legislation", "system", "systems", "framework", "treaty", "measures"]; const blueWords = ["climate"] const lowercaseWord = word.toLowerCase(); if (redWords.includes(lowercaseWord)) { return "red"; } else if (greenWords.includes(lowercaseWord)) { return "green"; } else if (blueWords.includes(lowercaseWord)) { return "blue"; } else { return "black"; } } } 3f:T46f,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x(d.value)},${y(n)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x(d.value)},${y(n)})`) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", function(d) { return textTween(parseNumber(this.textContent), d.value); }))); }40:T6f9,multiline_co2_chart2 = { const hover = vl.selectPoint('hover') .encodings('x') .on('mouseover') .toggle(false) .nearest(true); const isHovered = hover.empty(false); const line = vl.markLine().encode( vl.x().fieldT('year'), vl.y().fieldQ('co2'), vl.color().fieldN('country') ); const base = line.transform(vl.filter(isHovered)); const label = {align: 'left', dx: 5, dy: -5}; const white = {stroke: 'white', strokeWidth: 2}; const annotationData = [{ year: 2005, co2: 500, text: 'Kyoto Protocol' }]; const annotationData2 = [{ year: 1991, co2: 500, text: 'URSS fall' }]; const annotationLayer = vl.markText({ align: 'left', dx: 0, dy: 0, fontSize: 12, fontWeight: 'bold' }) .data(annotationData) .encode( vl.x().value(570), vl.y().value(100), vl.text().fieldN('text') ); const annotationLayer2 = vl.markText({ align: 'left', dx: 0, dy: 0, fontSize: 12, fontWeight: 'bold', color: "green" }) .data(annotationData2) .encode( vl.x().value(590), vl.y().value(310), vl.text().fieldN('text') ); const verticalLineLayer = vl.markRule({ color: 'black' , strokeWidth: 0.5 }) .encode( vl.x().value(658), vl.tooltip('2005') ); return vl.data(filteredData) .layer( line, annotationLayer, annotationLayer2, verticalLineLayer, vl.markRule({ color: '#aaa' }) .transform(vl.filter(isHovered)) .encode(vl.x().fieldT('year')), line.markCircle() .params(hover) .encode(vl.opacity().if(isHovered, vl.value(1)).value(0)), base.markText(label, white).encode(vl.text().fieldQ('co2')), base.markText(label).encode(vl.text().fieldQ('co2')) ) .width(700) .height(400); } 41:T7f8,resultArray2 = uniqueCountries.map(country => { const entryForCountry = dataForYear2021.find(entry => entry.country === country); if (entryForCountry) { const formattedCountry = country === "United States" ? "United States of America" : country === "Democratic Republic of Congo" ? "Dem. Rep. Congo" : country === "Dominican Republic" ? "Dominican Rep.": country === "Cote d'Ivoire" ? "Côte d'Ivoire": country === "Central African Republic" ? "Central African Rep.": country === "Bosnia and Herzegovina" ? "Bosnia and Herz.": country === "South Sudan" ? "S. Sudan": country === "Equatorial Guinea" ? "Eq. Guinea": country === "North Macedonia" ? "Macedonia": country === "Solomon Islands" ? "Solomon Is.": country === "East Timor" ? "Timor-Leste": country === "Eswatini" ? "eSwatini": country === "Cape Verde" ? "Cabo Verde": country === "Sao Tome and Principe" ? "São Tomé and Principe": country === "Antigua and Barbuda" ? "Antigua and Barb.": country ==="Saint Vincent and the Grenadines" ? "St. Vin. and Gren.": country; return { country: formattedCountry, iso_code: entryForCountry.iso_code, year: 2021, population: entryForCountry.population, land_use_change_co2_per_capita: entryForCountry.land_use_change_co2_per_capita, gdp: entryForCountry.gdp, co2_including_luc_per_capita: entryForCountry.co2_including_luc_per_capita, coal_co2_per_capita: entryForCountry.coal_co2_per_capita, consumption_co2_per_capita: entryForCountry.consumption_co2_per_capita, energy_per_capita: entryForCountry.energy_per_capita, methane_per_capita: entryForCountry.methane_per_capita, nitrous_oxide_per_capita: entryForCountry.nitrous_oxide_per_capita, oil_co2_per_capita: entryForCountry.oil_co2_per_capita, trade_co2: entryForCountry.trade_co2, }; } else { return null; // If data for the year 2021 is not available for a country } }); 42:T806,resultArray3 = uniqueCountries.map(country => { const entryForCountry = dataYear2021.find(entry => entry.country === country); if (entryForCountry) { const formattedCountry = country === "United States" ? "United States of America" : country === "Democratic Republic of Congo" ? "Dem. Rep. Congo" : country === "Dominican Republic" ? "Dominican Rep.": country === "Cote d'Ivoire" ? "Côte d'Ivoire": country === "Central African Republic" ? "Central African Rep.": country === "Bosnia and Herzegovina" ? "Bosnia and Herz.": country === "South Sudan" ? "S. Sudan": country === "Equatorial Guinea" ? "Eq. Guinea": country === "North Macedonia" ? "Macedonia": country === "Solomon Islands" ? "Solomon Is.": country === "East Timor" ? "Timor-Leste": country === "Eswatini" ? "eSwatini": country === "Cape Verde" ? "Cabo Verde": country === "Sao Tome and Principe" ? "São Tomé and Principe": country === "Antigua and Barbuda" ? "Antigua and Barb.": country ==="Saint Vincent and the Grenadines" ? "St. Vin. and Gren.": country; return { country: formattedCountry, iso_code: entryForCountry.iso_code, year: 2021, population: entryForCountry.population, land_use_change_co2_per_capita: entryForCountry.land_use_change_co2_per_capita, gdp: entryForCountry.gdp, co2: entryForCountry.co2, co2_per_capita: entryForCountry.co2_including_luc_per_capita, coal_co2_per_capita: entryForCountry.coal_co2_per_capita, consumption_co2_per_capita: entryForCountry.consumption_co2_per_capita, energy_per_capita: entryForCountry.energy_per_capita, methane_per_capita: entryForCountry.methane_per_capita, nitrous_oxide_per_capita: entryForCountry.nitrous_oxide_per_capita, oil_co2_per_capita: entryForCountry.oil_co2_per_capita, trade_co2: entryForCountry.trade_co2, }; } else { return null; // If data for the year 2021 is not available for a country } });43:Ta8d,co2data2021 = uniqueCountries.map(country => { const entryForCountry = actualdata2021.find(entry => entry.country === country); if (entryForCountry) { const formattedCountry = country === "United States" ? "United States of America" : country === "Democratic Republic of Congo" ? "Dem. Rep. Congo" : country === "Dominican Republic" ? "Dominican Rep." : country === "Cote d'Ivoire" ? "Côte d'Ivoire" : country === "Central African Republic" ? "Central African Rep." : country === "Bosnia and Herzegovina" ? "Bosnia and Herz." : country === "South Sudan" ? "S. Sudan" : country === "Equatorial Guinea" ? "Eq. Guinea" : country === "North Macedonia" ? "Macedonia" : country === "Solomon Islands" ? "Solomon Is." : country === "East Timor" ? "Timor-Leste" : country === "Eswatini" ? "eSwatini" : country; // const unknownValue = Math.max( // 0, // isNaN(parseFloat(entryForCountry.co2_including_luc_per_capita)) ? 0 : parseFloat(entryForCountry.co2_including_luc_per_capita) - // isNaN(parseFloat(entryForCountry.other_co2_per_capita)) ? 0 : parseFloat(entryForCountry.other_co2_per_capita) - // isNaN(parseFloat(entryForCountry.oil_co2_per_capita)) ? 0 : parseFloat(entryForCountry.oil_co2_per_capita) - // isNaN(parseFloat(entryForCountry.nitrous_oxide_per_capita)) ? 0 : parseFloat(entryForCountry.nitrous_oxide_per_capita) - // isNaN(parseFloat(entryForCountry.methane_per_capita)) ? 0 : parseFloat(entryForCountry.methane_per_capita) - // isNaN(parseFloat(entryForCountry.consumption_co2_per_capita)) ? 0 : parseFloat(entryForCountry.consumption_co2_per_capita) - // isNaN(parseFloat(entryForCountry.coal_co2_per_capita)) ? 0 : parseFloat(entryForCountry.coal_co2_per_capita) - // isNaN(parseFloat(entryForCountry.land_use_change_co2_per_capita)) ? 0 : parseFloat(entryForCountry.land_use_change_co2_per_capita) // ); return { country: formattedCountry, year: 2021, land_use_change_co2_per_capita: parseFloat(entryForCountry.land_use_change_co2_per_capita), coal_co2_per_capita: parseFloat(entryForCountry.coal_co2_per_capita), consumption_co2_per_capita: parseFloat(entryForCountry.consumption_co2_per_capita), methane_per_capita: parseFloat(entryForCountry.methane_per_capita), nitrous_oxide_per_capita: parseFloat(entryForCountry.nitrous_oxide_per_capita), oil_co2_per_capita: parseFloat(entryForCountry.oil_co2_per_capita), other_co2_per_capita: parseFloat(entryForCountry.other_co2_per_capita), // unknown: unknownValue, }; } else { return null; } }); 44:Tbda,co2_by_country = { // Specify the chart’s dimensions. const width = 900; const height = 625; // Specify the color scale. const color = d3.scaleOrdinal(emisiones_pais.children.map(d => d.name), d3.schemeTableau10); // Compute the layout. const root = d3.treemap() .tile(d3.treemapBinary) // e.g., d3.treemapSquarify .size([width, height]) .padding(1) .round(true) (d3.hierarchy(emisiones_pais) .sum(d => d.value) .sort((a, b) => b.value - a.value)); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, -120, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 80px sans-serif;"); // Increase font size here // Add a cell for each leaf of the hierarchy. const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); // Append a tooltip. const format = d3.format(",d"); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join(".")}\n${format(d.value)}`); // Append a color rectangle. leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Append a clipPath to ensure text does not overflow. leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); // Append multiline text. The last line shows the value and has a specific formatting. leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .attr("font-size", "40px") // Increase font size here .text(d => d); //title svg.append("text") .attr("x", width / 2) .attr("y", -60) // Adjusted y position for title .attr("text-anchor", "middle") .style("font-size", "40px") // Adjust title font size .style("font-weight", "bold") .text("CO2 by origin in "+ (leyes_filtradas.length > 0 ? (leyes_filtradas[0].name === "Congo, The Democratic Republic of the" ? "Dem. Rep. Congo" : leyes_filtradas[0].name) : ""),); // Add subtitle svg.append("text") .attr("x", width / 2) .attr("y", -15) // Adjusted y position for subtitle .attr("text-anchor", "middle") .style("font-size", "28px") // Adjust subtitle font size .style("fill", "gray") .text("during 2021, in millions of tons"); return Object.assign(svg.node(), {scales: {color}}); } 45:Tcc1,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html`