2f:Tca9,## 1. INTRODUCTION En un moment crític de la nostra història, la realitat de l'emergència climàtica ens confronta amb la urgència de comprendre i abordar les complexitats de les emissions de gasos d'efecte hivernacle (GEI). Ens trobem davant d'un desafiament global, on les conseqüències d'aquestes emissions no només impacten l'entorn ambiental, sinó també la salut, les economies i la seguretat de les poblacions. ![fotointroexercifinalvisualitzacio.webp](${await FileAttachment("fotointroexercifinalvisualitzacio.webp").url()}) En aquest escenari, comptem amb una eina invaluable: un conjunt de dades excepcionalment detallat i enriquit d'Our World In Data. Amb més de 70 anys d'informació exhaustiva a més de 50 indicadors per a 200 països, aquest tresor de dades ens brinda una visió profunda de les complexitats associades amb les emissions de CO₂ i altres factors crucials. Són una finestra cap a la comprensió de com les nostres eleccions i activitats quotidianes contribueixen al canvi climàtic. L'anàlisi d'aquestes dades va més enllà dels números; és una eina poderosa per informar polítiques, conscienciar la població i catalitzar accions significatives. Tot i que aquestes dades són diverses i abasten múltiples aspectes, el nostre enfocament principal serà analitzar i entendre la contribució de cada sector en les emissions de CO₂ per extreure conclusions valuoses que puguin guiar decisions informades i accions concretes, així abordar aquesta crisi de manera efectiva i sostenible. Ens submergirem en la riquesa d'aquestes dades, utilitzant eines visuals per simplificar-ne la complexitat, entendre-les i extreure'n informació rellevant. **Nota sobre les emissions relacionades amb el "Land Use Change"**: El terme "Land Use Change" es refereix generalment a les emissions resultants de les alteracions en l'ús del sòl. Aquests canvis poden incloure la deforestació, la reforestació, la urbanització i els canvis en les pràctiques agrícoles. Per exemple, quan els boscos són talats per a l'agricultura o el desenvolupament urbà (deforestació), el carboni emmagatzemat en els arbres és alliberat a l'atmosfera, generalment mitjançant la cremació o la descomposició, contribuint a l'augment dels nivells de CO₂. Els arbres i les plantes absorbeixen CO₂ mentre creixen (un procés conegut com a seqüestració de carboni), així que eliminar-los significa que menys CO₂ és retirat de l'atmosfera de manera natural. D'altra banda, la reforestació o l'aforestació, on es planten i gestionen nous arbres, pot conduir a una reducció del CO₂ atmosfèric al llarg del temps a mesura que el bosc en creixement seqüestra carboni. El "Land Use Change" és una variable crítica en els models i debats sobre el canvi climàtic, ja que els canvis en l'ús del sòl són una font significativa d'emissions de gasos d'efecte hivernacle, només superada per la combustió de combustibles fòssils. La gestió efectiva dels canvis en l'ús del sòl es considera una estratègia essencial per mitigar el canvi climàtic. -------------------------------------------------------------------------------------------------------------------------------------------------------30:Tf0f,## 3. USED DATA: PICKED VARIABLES Dins l'extens conjunt de dades, hem seleccionat i treballat amb certes variables per abordar el projecte. Les variables seleccionades de les dades necessàries són les següents: - _country:_ Country - Geographic location. Our World in Data - Regions (2022). - _year:_ Year - Year of observation. - _population:_ Population - Population by country, available from 10,000 BCE to 2100, based on data and estimates from different sources. - _cement-co2:_ Annual CO₂ emissions from cement - Annual emissions of carbon dioxide (CO₂) from cement, measured in million tonnes. - _cement-co2-per-capita:_ Annual CO₂ emissions from cement (per capita) - Annual emissions of carbon dioxide (CO₂) from cement, measured in tonnes per person. - _co2:_ Annual CO₂ emissions - Annual total emissions of carbon dioxide (CO₂), excluding land-use change, measured in million tonnes. - _co2-per-capita:_ Annual CO₂ emissions (per capita) - Annual total emissions of carbon dioxide (CO₂), excluding land-use change, measured in tonnes per person. - _coal-co2:_ Annual CO₂ emissions from coal - Annual emissions of carbon dioxide (CO₂) from coal, measured in million tonnes. - _coal-co2-per-capita:_ Annual CO₂ emissions from coal (per capita) - Annual emissions of carbon dioxide (CO₂) from coal, measured in tonnes per person. - _consumption-co2:_ Annual consumption-based CO₂ emissions - Annual consumption-based emissions of carbon dioxide (CO₂), measured in million tonnes. - _consumption-co2-per-capita:_ Per capita consumption-based CO₂ emissions - Annual consumption-based emissions of carbon dioxide (CO₂), measured in tonnes per person. - _flaring-co2:_ Annual CO₂ emissions from flaring - Annual emissions of carbon dioxide (CO₂) from flaring, measured in million tonnes. - _flaring-co2-per-capita:_ Annual CO₂ emissions from flaring (per capita) - Annual emissions of carbon dioxide (CO₂) from flaring, measured in tonnes per person. - _gas-co2:_ Annual CO₂ emissions from gas - Annual emissions of carbon dioxide (CO₂) from gas, measured in million tonnes. - _gas-co2-per-capita:_ Annual CO₂ emissions from gas (per capita) - Annual emissions of carbon dioxide (CO₂) from gas, measured in tonnes per person. - _land-use-change-co2:_ Annual CO₂ emissions from land-use change - Annual emissions of carbon dioxide (CO₂) from land-use change, measured in million tonnes. - _land-use-change-co2-per-capita:_ Annual CO₂ emissions from land-use change per capita - Annual emissions of carbon dioxide (CO₂) from land-use change, measured in tonnes per person. - _oil-co2:_ Annual CO₂ emissions from oil - Annual emissions of carbon dioxide (CO₂) from oil, measured in million tonnes. - _oil-co2-per-capita:_ Annual CO₂ emissions from oil (per capita) - Annual emissions of carbon dioxide (CO₂) from oil, measured in tonnes per person. - _other-co2-per-capita:_ Annual CO₂ emissions from other industry (per capita) - Annual emissions of carbon dioxide (CO₂) from other industry sources, measured in tonnes per person. - _other-industry-co2:_ Annual CO₂ emissions from other industry - Annual emissions of carbon dioxide (CO₂) from other industry sources, measured in million tonnes. - _temperature-change-from-co2:_ Change in global mean surface temperature caused by CO₂ emissions - Measured in °C. - _trade-co2:_ Annual CO₂ emissions embedded in trade - Annual net carbon dioxide (CO₂) emissions embedded in trade, measured in million tonnes. Treballarem amb els següents sectors contribuents a les emissions de CO2: **Cement, Coal, Flaring, Gas, Land Use Change, Oil, Trade i Other Industry.** -------------------------------------------------------------------------------------------------------------------------------------------------------31:T1641,//Gràfic anterior molt simple, he trobat aquest que es pot fer zoom chart3 = { // Specify the chart’s dimension const width = 1300; const height = 200; const marginTop = 50; const marginRight = 0; const marginBottom = 45; const marginLeft = 20; // Create the horizontal scale and its axis generator. const x = d3.scaleBand() .domain(temperatureChange.map(d => d.Year)) .range([marginLeft, width - marginRight]) .padding(0.1) const xAxis = d3.axisBottom(x).tickSizeOuter(0); // Create the vertical scale. const minTemp = d3.min(temperatureChange, d => d.Temperature); const maxTemp = d3.max(temperatureChange, d => d.Temperature); const y = d3.scaleLinear() .domain([minTemp, maxTemp]) .nice() .range([height - marginBottom, marginTop]); // Create the SVG container and call the zoom behavior. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // .call(zoom); // Añadir un contenedor para el tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); // Añadir un rectángulo al tooltip para resaltar el fondo tooltip.append("rect") .attr("width", 207) .attr("height", 20) .attr("fill", "hsl(210, 50%, 70%)") .attr("transform", "translate(-153, 0)") // Ajustar la posición del rectángulo .style("opacity", 0.8); // Añadir texto al tooltip const tooltipText = tooltip.append("text") .attr("x", -150) .attr("y", 15) .style("font-size", "12px"); // Añadir las barras. svg.append("g") .attr("class", "bars") .selectAll("rect") .data(temperatureChange) .join("rect") .attr("x", d => x(d.Year)) .attr("y", d => y(d.Temperature)) .attr("width", x.bandwidth()) .attr("height", d => height - marginBottom - y(d.Temperature)) .attr("fill", "red") .on("mouseover", function (event, d) { // Muestra el tooltip al pasar el ratón sobre la barra tooltip.style("display", "block").raise(); // Eleva el tooltip al frente }) .on("mouseout", function () { // Oculta el tooltip al retirar el ratón tooltip.style("display", "none"); }) .on("mousemove", function (event, d) { // Actualiza la posición y el contenido del tooltip al mover el ratón const [xPos, yPos] = d3.pointer(event); tooltip.attr("transform", `translate(${xPos + 10},${yPos - 40})`); tooltipText.text(`Year: ${d.Year}, Temp: ${d.Temperature}`); }); // Append the axes. // Append the x-axis with vertical labels. svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .selectAll(".tick text") .style("text-anchor", "end") // This style helps to keep the labels aligned properly after rotation .attr("dx", "-.8em") // Adjust the distance from the tick (x-direction) .attr("dy", ".15em") // Adjust the distance from the tick (y-direction) .style("font-size", "12px") .attr("transform", "rotate(-45)") // Rotate the text .filter((d, i) => i % 5 !== 0) // Filtrar solo los años impares .remove() // svg.append("g") // .attr("class", "y-axis") // .attr("transform", `translate(${marginLeft},0)`) // .call(d3.axisLeft(y)) // .call(g => g.select(".domain").remove()); // Añadir título al gráfico svg.append("text") .attr("x", (width + marginLeft - marginRight) / 2) .attr("y", marginTop) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Global Temperature Change Caused By CO₂"); // Añadir nombre del eje x svg.append("text") .attr("x", (width + marginLeft - marginRight) / 2) .attr("y", height) // Ajusta la posición vertical según tu diseño .attr("text-anchor", "middle") .style("font-size", "10px") .text("Years"); // // Añadir nombre del eje y // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("x", 0 - (height + marginTop - marginBottom) / 2) // .attr("y", 10) // Ajusta la posición vertical según tu diseño // .attr("text-anchor", "middle") // .style("font-size", "10px") // .text("Temperature Change (°C)"); // Append the vertical line to the SVG; initially position it off the chart var verticalLine = svg.append('line') .attr('x1', x(selectedYear)) .attr('x2', x(selectedYear)) .attr('y1', y(0)) .attr('y2', y(temperatureChange[selectedYear - 1750].Temperature)) .attr('stroke', '#3B5FC0') // or any color you prefer .attr('stroke-width', 5) .attr('opacity', 1); // start it as invisible if the initialYear is out of bounds svg.append("text") .attr("x", x(selectedYear)) .attr("y", y(temperatureChange[selectedYear - 1750].Temperature) - 3) // Ajusta la posición vertical según tu diseño .attr("text-anchor", "middle") .style("font-size", "16px") .text(selectedYear); // Return the SVG node. return svg.node(); // function zoom(svg) { // const extent = [[marginLeft, marginTop], [width - marginRight, height - marginTop]]; // svg.call(d3.zoom() // .scaleExtent([1, 8]) // .translateExtent(extent) // .extent(extent) // .on("zoom", zoomed)); // function zoomed(event) { // x.range([marginLeft, width - marginRight].map(d => event.transform.applyX(d))); // svg.selectAll(".bars rect") // .attr("x", d => x(d.Year)) // .attr("width", x.bandwidth()); // svg.selectAll(".x-axis").call(xAxis); // } // } }32:T15b3,mapChart = { // Chart’s dimensions. const width = 1200; const marginTop = 46; const height = width / 2 + marginTop; // Fit the projection. const projection = d3.geoEqualEarth().fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"}); const path = d3.geoPath(projection); const emissionConsumptionColor = ["Emission", "Consumption"].includes(selectedColor); const emissionVsConsumptionColor = ["Emission vs Consumption (Con / Em)"].includes(selectedColor); const isMostEmittedSectorSelected = (selectedColor == "Most emitted sector") const isEmissionSelected = (selectedColor == "Emission") let color = null; if (emissionConsumptionColor) { color = d3.scaleSequential(d3.extent([0, 20]), d3.interpolatePuRd); } else if (emissionVsConsumptionColor) { color = d3.scaleSequential(d3.extent([0, 2]), d3.interpolatePuRd) } let sectorColor = null; if (isMostEmittedSectorSelected || isEmissionSelected) { sectorColor = d3.scaleOrdinal() .domain(sectors) .range(d3.schemeTableau10); } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "5px") .style("width", "230px") .style("height", "215px") .style("box-shadow", "0 0 10px rgba(0, 0, 0, 0.3)") .style("visibility", "hidden") .style("z-index", 99999); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); let legendText; if (selectedColor == "Emission") legendText = "CO₂ emissions (tonnes per capita)" else if (selectedColor == "Consumption") legendText = "Consumption-based CO₂ emissions (tonnes per capita)" else if (selectedColor == "Emission vs Consumption (Con / Em)") legendText = "Tonnes of consumption-based CO₂ per tonne of emission-based CO₂ (per capita)" else legendText = "CO₂ emissions (tonnes per capita)" if (isMostEmittedSectorSelected || isEmissionSelected) { svg.append("g") .attr("transform", "translate(" + (width - 20 - 350) + ",0)") .append(() => Legend(sectorColor, {title: "Sectors", width: 350})); } if (!isMostEmittedSectorSelected) { svg.append("g") .attr("transform", "translate(20,0)") .append(() => Legend(color, {title: legendText, width: 350})); } // Add a white sphere with a black border. svg.append("path") .datum({type: "Sphere"}) .attr("fill", "white") .attr("stroke", "currentColor") .attr("d", path); // Gray lines if not found svg.append("defs") .append("pattern") .attr("id", "linePattern") .attr("width", 8) .attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(45)") .append("line") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", 8); // Add a path for each country and color it according te this data. svg.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => { if (isMostEmittedSectorSelected) { const value = getMostEmittedSector(d.properties.name, selectedYear) return value ? sectorColor(value) : "url(#linePattern)"; } else if (isEmissionSelected) { const value = getValue(d.properties.name, selectedYear, "co2_per_capita") return value ? color(value) : "url(#linePattern)" } else if (selectedColor == "Consumption") { const value = getValue(d.properties.name, selectedYear, "consumption_co2_per_capita") return value ? color(value) : "url(#linePattern)" } else if (selectedColor == "Emission vs Consumption (Con / Em)") { const value = getEmissionVsConsumptionValue(d.properties.name, selectedYear) return value ? color(value) : "url(#linePattern)"; } }) .attr("d", path) .on("mousemove", (event) => isMostEmittedSectorSelected || isEmissionSelected ? mousemove(event, tooltip) : null) .on("mouseover", (event, d) => isMostEmittedSectorSelected || isEmissionSelected ? mouseover(event, d, tooltip) : null ) .on("mouseout", (event, d) => isMostEmittedSectorSelected || isEmissionSelected ? mouseout(event, d, tooltip) : null) .append("title") .text(d => { if (selectedColor == "Consumption") { const value = getValue(d.properties.name, selectedYear, "consumption_co2_per_capita") return `${d.properties.name} - ${value != null ? (value.toFixed(2) + " t") : "No data"}` } else if (selectedColor == "Emission vs Consumption (Con / Em)") { const value = getEmissionVsConsumptionValue(d.properties.name, selectedYear) return `${d.properties.name} - ${value != null ? value.toFixed(2) : "No data"}` } else return null; }); // Add a white mesh. svg.append("path") .datum(countrymesh) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); // Añadir título al gráfico svg.append("text") .attr("x", width / 2) .attr("y", marginTop) .attr("text-anchor", "middle") .style("font-size", "30px") .text(selectedYear); return svg.node(); }33:T41e,viewof ViewDataPlot = { if (!DataTable || !DataTable.length) { return html`

Error: DataTable no está definido o es una matriz vacía

`; } const maxHeight = 400; // Puedes ajustar la altura máxima según tus necesidades const tableContainer = html`

`; const table = html``; const thead = html`${Object.keys(DataTable[0]).map(column => html``)}`; const tbody = html`${[...new Set(DataTable .filter(row => row[Object.keys(row)[2]] !== null && row[Object.keys(row)[2]] !== undefined && row[Object.keys(row)[2]] !== '' && row.Country.toLowerCase() !== 'world' ) .map(row => JSON.stringify(row))) ].map(rowString => JSON.parse(rowString)).map(row => html`${Object.values(row).map(value => html``)}`) }`; table.append(thead, tbody); tableContainer.append(table); const div = html`

`; div.append(tableContainer); return div; } 34:T12f3,En el mapa interactiu es pot analitzar per cada país el sector que més emetia per cada any. També pots comprar les emissions CO₂ entre els països, així com la consumption, i mirar quanta discrepància hi ha entre les dues. ### “Most emitted sector” per continents **Europa:** En la dècada dels 90 destaca principalment l'emissió de carbó. Per exemple, tenim la Gran Bretanya amb emissions de 10 tones per capita, Alemania 5.8 tones i Bèlgica 7.4 tones. Valors que es mantenen al llarg del temps. En el 1955 comença a destacar les emissions de CO₂ de petroli en els països d'Itàlia i Portugal. En l'actualitat, els sectors principals d'emissions del CO₂ a Europa són una combinació de gas, petroli, en canvi, en algunes zones com per exemple Ucraïna i Polònia, contaminen més amb el carbó. **Africa:** En termes generals, el principal sector emissor de CO₂ és el land use change. En l'any 1948, Egipte comença a destacar per les seves emissions de petroli. És curiós notar que a Líbia, el 1967, comença a tenir un alt nivell de contaminació a causa del "flaring", arribant a les 9 tones per càpita. **Amèrica:** Amèrica del Nord experimenta un notable increment en les emissions procedents del carbó a partir de l'any ~1870, poc després de la seva Guerra Civil, que va tenir lloc entre el 1861 i el 1865. Des d'aquest moment, el carbó domina les emissions fins al voltant de ~1950, quan el petroli passa a ser el sector més contribuent a les emissions, coincidint amb el boom industrial i econòmic posterior a la Segona Guerra Mundial. Aquest augment vertiginós és necessari per cobrir les noves necessitats energètiques derivades del ràpid creixement de la població: tant el petroli com el carbó s'utilitzen principalment per produir energia (per al transport de mercaderies, la generació d'electricitat, etc.). **Asia:** Fins al 1910, la principal font d'emissions és el land use change. A partir de 1910, s'observa com Japó comença a adquirir una major importància en les emissions de carbó. Durant la dècada de 1930, la regió occidental, incloent-hi l'Iran i els seus voltants, comença a destacar en l'ús del petroli... No és fins als anys 1960 que la Xina comença a emetre CO₂ principalment a través del carbó. I no és fins a l'aproximadament 2000 que la Xina comença a experimentar un notable augment en les emissions de CO₂. **Oceania:** La tendència de les emissions apunta cap al "land use change" i al carbó, amb períodes en què les emissions de "land use change" es destaquen significativament. ### “Emissions” Mirant les emissions, es pot observar una tendència clara: sempre han anat en augment... EXCEPTE en les últimes aproximadament dues dècades, on els països més desenvolupats han començat a mostrar una reducció en les seves emissions respecte dels anys anteriors. ### “Consumption”: En el mapa podem observar també la quantitat d’emissions associades al consum de les persones en els diferents països. El mapa ens aporta informació a partir de l’any 1990, any en el qual es va començar a tenir informació del consum. Inicialment, països com Estats Units, Canada, Australia, Arabia Saudita, russia i alguns països europeus son els que més destaquen de manera que la població d’aquests tenen un major impacte mediambiental individual. Al llarg dels anys fins 2021, aquest fet es manté amb petits canvis lleugers. ### “Emissions vs Consumption”. Cal destacar que en els països més desenvolupats hi ha una discrepància més gran entre les emissions pròpies i les associades al consum: el consum és més alt que les emissions (això es veu a Europa, Rússia, Amèrica del Nord, el Japó i, curiosament, alguns països sud-africans). Podem observar que els principals països productors (fabricants de productes / fàbriques del món, com la Xina i el Vietnam) mantenen una discrepància relativament baixa al llarg dels anys, mentre que els grans importadors mostren discrepàncies significatives de forma habitual. ### Gràfic de barres Sectors (Tooltip): En els mapes corresponents a Most Emitted Sector i Emissions, al posicionar-se sobre un país, es mostra un gràfic de barres horitzontal que representa les emissions de cada sector en aquell país i any. Això permet visualitzar la distribució i la implicació dels sectors en les emissions d'un país determinat. ### Temperatura: Encara que no es mostri l'escala a l'eix Y, cal destacar que va des de 0 fins a 6 graus Celsius. Es mostra el gràfic del canvi de temperatura global per contextualitzar les dades visuals que es mostren al mapa. Podem observar que a mesura que les principals emissions dels països es deuen als combustibles fòssils, la temperatura global augmenta de manera més ràpida (el pendent de la corba és més pronunciat). 35:T529,**Com han sigut les emissions globals de cada sector al llarg del anys?** Des d'aproximadament 1750-1850, les emissions globals de CO₂ estaven dominades pel sector del carbó. No obstant això, al voltant de 1850, el sector de canvi d'ús de la terra (Land Use Change) va començar a destacar i va experimentar un augment significatiu a les emissions, superant eventualment el sector del carbó. Durant molts anys, el sector de canvi d'ús de la terra va ser el principal contribuent a les emissions, tot i que el sector del carbó va continuar augmentant. Cap al 1950, el sector del petroli també va experimentar un gran augment en les emissions, superant els sectors destacats anteriorment (carbó i canvi d'ús de la terra) cap al 1970. A partir del 1970, els sectors del carbó i el petroli es van equilibrar en termes d'emissions. Aquell mateix any, les emissions degudes al gas van començar a augmentar considerablement. Pels volts de l'any 2000, el sector de canvi d'ús de la terra va començar a contribuir menys a les emissions. Actualment, s'observa que el sector del carbó és el que produeix més emissions, seguit pel petroli i el gas. Els sectors de canvi dús de la terra, ciment, flareig i altres indústries també emeten, però en menor mesura en comparació amb els sectors més contaminants.36:T4a4,Destacar que està elevat al cub (per exagerar les diferències entre valors grans i petits). Podem destacar per la seva correl·lació de més del 80% les del Cement amb Coal i Oil amb Gas. La forta correlació entre el ciment i el carbó podria indicar que la producció de ciment implica la quema de carbó com a font d’energia. Especulem que la connexió entre el petroli i el gas és deguda als següents punts: 1. **Producció i Ús Combinats:** Les companyies que es dediquen al petroli també explotan el gas. 2. **Influència Regulatòria:** Els canvis de política que tenen com a objectiu la indústria de combustibles fòssils sovint impacten tant el petroli com el gas. Per exemple, un impost sobre el carbono o un límit a les emissions probablement afectaria els patrons de producció i consum de tots dos. 3. **Dependència del Sector Energètic:** Tant el petroli com el gas són combustibles primaris per al sector energètic. Quan la demanda d'energia augmenta, tendeix a incrementar simultàniament l'ús tant de petroli (per al transport i certs tipus de generació d'energia) com de gas (per a la calefacció, la generació d'electricitat i l'ús industrial). 37:T708,Comparació d'Espanya amb els països considerats d'interès i que són els contribuents més grans a les emissions de CO2: Estats Units, Xina, Canadà, Aràbia Saudita, Rússia i Austràlia. Fins al 1850, possiblement a causa de la falta prèvia de dades, que el canvi en l'ús del sòl emergeix com el factor més important a les emissions, destacant Canadà com el major emissor i Aràbia Saudita com el menor. Observem que Espanya contribueix de manera modesta a aquest sector. Al llarg dels anys, generalment es manté la predominància del canvi en l'ús del sòl i l'ordre dels països, encara que en alguns anys s'hi intercalen. A més, notem que les emissions de carbó comencen a destacar i augmentar. Posteriorment, a mesura que transcorren els anys, els sectors del petroli i el gas comencen a destacar a les emissions anuals dels països. El 1970, la diferència en les emissions anuals entre els països comença a disminuir, eliminant les grans disparitats entre ells. Al llarg dels anys, les emissions degudes al canvi en l'ús del sòl es redueixen, deixant de ser actualment un sector d'emissions predominant. Amb el temps, hem passat de tenir els Estats Units, Canadà i Austràlia com a països predominants a tenir el 2022 l'Aràbia Saudita com a predominant, seguit dels esmentats anteriorment, sense grans diferències a nivell d'escala entre ells. La proporció d'emissions de cada sector en aquests països és generalment semblant, amb alguns sectors que destaquen lleugerament més. En determinats anys hi ha paisos que predominent i augmenten les seves emissions en alguns sectors, que molts es troben relacionats amb esdeveniments històrics. Fins al (any) Canadà és el que més destaca i li segueix USA. Però després pasa una cosa especial en el 1894… 38:Ta3f,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html` `; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }39:Tea9,heatmapPlot = { // set the dimensions and margins of the graph const margin = { top: 80, right: 25, bottom: 130, left: 130 }, height = 400, width = 400; // append the svg object to the body of the page const svg = d3.create("svg") .attr("viewBox", [-150, 0, width + 150, height + 50]) .attr("style", "max-width: 100%; height: auto;") .attr("width", width) // + margin.left + margin.right .attr("height", height); // + margin.top + margin.bottom // Assuming resultatsCor is your correlation data const myGroups = [...new Set(resultatsCor.map(d => d.sector1))]; const myVars = [...new Set(resultatsCor.map(d => d.sector2))]; // Build X scales and axis: const x = d3.scaleBand() .range([0, width]) .domain(myGroups) .padding(0.05); svg.append("g") .style("font-size", 15) .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x).tickSize(0)) .selectAll("text") .style("text-anchor", "end") // Alinea el texto al final .attr("transform", "rotate(-45) translate(-10, 0)") // Rota el texto en -45 grados .select(".domain").remove(); // Build Y scales and axis: const y = d3.scaleBand() .range([height, 0]) .domain(myVars) .padding(0.05); svg.append("g") .style("font-size", 15) .call(d3.axisLeft(y).tickSize(0)) .select(".domain").remove(); // Build color scale const myColor = d3.scaleSequential() .interpolator(d3.interpolateOrRd) .domain([-1, 1]); // Assuming your correlations are between -1 and 1 // create a tooltip const tooltip = d3.select("#my_dataviz") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px"); // Three functions that change the tooltip when user hover / move / leave a cell const mouseover = function (event, d) { tooltip .style("opacity", 1); d3.select(this) .style("stroke", "black") .style("opacity", 1); }; const mousemove = function (event, d) { tooltip .html(`${d.sector1} - ${d.sector2}
Correlation: ${d.correlation.toFixed(2)}`) .style("left", (event.x) / 2 + "px") .style("top", (event.y) / 2 + "px"); }; const mouseleave = function (event, d) { tooltip .style("opacity", 0); d3.select(this) .style("stroke", "none") .style("opacity", 0.8); }; // add the squares const squares = svg.selectAll() .data(resultatsCor) .enter() .append("g") .attr("transform", d => `translate(${x(d.sector1)}, ${y(d.sector2)})`); squares.append("rect") .attr("rx", 4) .attr("ry", 4) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .style("fill", d => myColor(d.correlation)) .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); squares.append("text") .attr("x", x.bandwidth() / 2) .attr("y", y.bandwidth() / 2) .attr("dy", "0.35em") .style("text-anchor", "middle") .style("font-size", "12px") .text(d => d.correlation.toFixed(2)); // Add title to graph svg.append("text") .attr("x", 10) .attr("y", -30) .attr("text-anchor", "left") .style("font-size", "20px") .text("HeatMap about Relations between sectors"); // Add subtitle to graph svg.append("text") .attr("x", 0) .attr("y", -20) .attr("text-anchor", "left") .style("font-size", "14px") .style("fill", "grey") .style("max-width", 400); return svg.node(); }3a:T7b8,sectorEmissions2 = { var data = d3.rollups( ArrayEmissions, v => { const sumCement = d3.sum(v, d => d.cement_co2); const sumCoal = d3.sum(v, d => d.coal_co2); const sumFlaring = d3.sum(v, d => d.flaring_co2); const sumGas = d3.sum(v, d => d.gas_co2); const sumLandUseChange = d3.sum(v, d => d.land_use_change_co2); const sumOil = d3.sum(v, d => d.oil_co2); const sumOtherIndustry = d3.sum(v, d => d.other_industry_co2); return { sumCement, sumCoal, sumFlaring, sumGas, sumLandUseChange, sumOil, sumOtherIndustry }; }, d => d.year // Agrupar por año ) .sort((a, b) => a[0] - b[0]) // Ordenar per any .map(([year, summary]) => { // Ben estructurat return { Year: year, Cement: parseFloat(summary.sumCement), Coal: parseFloat(summary.sumCoal), Flaring: parseFloat(summary.sumFlaring), Gas: parseFloat(summary.sumGas), LandUseChange: parseFloat(summary.sumLandUseChange), Oil: parseFloat(summary.sumOil), OtherIndustry: parseFloat(summary.sumOtherIndustry) }; }); // Initialize a new array to hold the transformed objects const transformed = []; // Iterate over each entry in the original data data.forEach((entry) => { // Extract the year and delete from the entry since we'll add it manually to each new object const year = entry.Year; delete entry.Year; // Iterate over the remaining keys in the entry object for (const [key, value] of Object.entries(entry)) { // For each key, create a new object with the structure { Year, Emissions, Sector } // and push it into the transformed array transformed.push({ Year: year, Emissions: parseFloat(value), // This ensures that the number is rounded to two decimal places Sector: key }); } }); // Return the new array return transformed; } 3b:T66e,plt1 = Plot.plot({ // width: width, x: { grid: true }, y: { grid: true, label: "CO₂ Emissions" }, marks: [ Plot.ruleY([0]), Plot.line(sectorEmissions, { x: "Year", y: "Cement", stroke: "Cement" === selectSector ? "red" : "#4E79A7", opacity: "Cement" === selectSector ? 1 : 0.5, strokeWidth: "Cement" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "Coal", stroke: "Coal" === selectSector ? "red" : "#F28E2B", opacity: "Coal" === selectSector ? 1 : 0.5, strokeWidth: "Coal" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "Flaring", stroke: "Flaring" === selectSector ? "red" : "#E15759", opacity: "Flaring" === selectSector ? 1 : 0.5, strokeWidth: "Flaring" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "Gas", stroke: "Gas" === selectSector ? "red" : "#76B7B2", opacity: "Gas" === selectSector ? 1 : 0.5, strokeWidth: "Gas" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "LandUseChange", stroke: "LandUseChange" === selectSector ? "red" : "#59A14F", opacity: "LandUseChange" === selectSector ? 1 : 0.5, strokeWidth: "LandUseChange" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "Oil", stroke: "Oil" === selectSector ? "red" : "#EDC948", opacity: "Oil" === selectSector ? 1 : 0.5, strokeWidth: "Oil" === selectSector ? 3 : 1 }), Plot.line(sectorEmissions, { x: "Year", y: "OtherIndustry", stroke: "OtherIndustry" === selectSector ? "red" : "#B07AA1", opacity: "OtherIndustry" === selectSector ? 1 : 0.5, strokeWidth: "OtherIndustry" === selectSector ? 3 : 1 }), ] });3c:T527,sectorEmissions = d3.rollups( ArrayEmissions, v => { const sumCement = d3.sum(v, d => d.cement_co2); const sumCoal = d3.sum(v, d => d.coal_co2); const sumFlaring = d3.sum(v, d => d.flaring_co2); const sumGas = d3.sum(v, d => d.gas_co2); const sumLandUseChange = d3.sum(v, d => d.land_use_change_co2); const sumOil = d3.sum(v, d => d.oil_co2); const sumOtherIndustry = d3.sum(v, d => d.other_industry_co2); // Calcular la suma total después de haber definido todas las variables const TotalCo2 = sumCement + sumCoal + sumFlaring + sumGas + sumLandUseChange + sumOil + sumOtherIndustry; return { sumCement, sumCoal, sumFlaring, sumGas, sumLandUseChange, sumOil, sumOtherIndustry, TotalCo2 }; }, d => d.year // Agrupar por año ) .sort((a, b) => a[0] - b[0]) // Ordenar per any .map(([year, summary]) => { // Ben estructurat return { Year: year, Cement: parseFloat(summary.sumCement), Coal: parseFloat(summary.sumCoal), Flaring: parseFloat(summary.sumFlaring), Gas: parseFloat(summary.sumGas), LandUseChange: parseFloat(summary.sumLandUseChange), Oil: parseFloat(summary.sumOil), OtherIndustry: parseFloat(summary.sumOtherIndustry), TotalCo2: parseFloat(summary.TotalCo2) }; }); 3d:T5a5,//Convertir archivo json lleido en array ArrayEmissions = { // Objeto para almacenar las columnas disponibles const allColumns = {}; // Iterar a través de los países for (const country in emissions) { if (emissions.hasOwnProperty(country)) { // Obtener los datos de emisiones para cada país const emissionsData = emissions[country].data; // Iterar a través de los datos de emisiones para cada país for (const entry of emissionsData) { // Obtener las claves (columnas) de cada entrada const entryKeys = Object.keys(entry); // Agregar las claves al objeto de columnas disponibles entryKeys.forEach(key => { allColumns[key] = true; }); } } } // Construir la tabla consolidada const consolidatedTable = []; // Iterar a través de los países for (const country in emissions) { if (emissions.hasOwnProperty(country)) { // Obtener los datos de emisiones para cada país const emissionsData = emissions[country].data; // Iterar a través de los datos de emisiones para cada país for (const entry of emissionsData) { // Construir un objeto con todas las columnas disponibles const row = { country: country, // Agregar la columna "country" ...entry, // Agregar todas las columnas de la entrada actual }; // Agregar la fila a la tabla consolidada consolidatedTable.push(row); } } } return consolidatedTable; }3e:T4e7,CountryYearSectors = d3.rollups( ArrayEmissions, v => { const sumCement = d3.sum(v, d => d.cement_co2); const sumCoal = d3.sum(v, d => d.coal_co2); const sumFlaring = d3.sum(v, d => d.flaring_co2); const sumGas = d3.sum(v, d => d.gas_co2); const sumLandUseChange = d3.sum(v, d => d.land_use_change_co2); const sumOil = d3.sum(v, d => d.oil_co2); const sumOtherIndustry = d3.sum(v, d => d.other_industry_co2); return { sumCement, sumCoal, sumFlaring, sumGas, sumLandUseChange, sumOil, sumOtherIndustry }; }, d => [d.country, d.year] // Agrupar por país y año ) .sort((a, b) => { const yearComparison = a[0][1] - b[0][1]; return yearComparison !== 0 ? yearComparison : a[0][0].localeCompare(b[0][0]); }) // Ordenar por año y país .map(([[country, year], summary]) => { // Bien estructurado return { Country: country, Year: year, Cement: parseFloat(summary.sumCement), Coal: parseFloat(summary.sumCoal), Flaring: parseFloat(summary.sumFlaring), Gas: parseFloat(summary.sumGas), LandUseChange: parseFloat(summary.sumLandUseChange), Oil: parseFloat(summary.sumOil), OtherIndustry: parseFloat(summary.sumOtherIndustry) }; }); 3f:T539,CountryYearSectorsperCap = d3.rollups( ArrayEmissions, v => { const sumCement = d3.sum(v, d => d.cement_co2_per_capita); const sumCoal = d3.sum(v, d => d.coal_co2_per_capita); const sumFlaring = d3.sum(v, d => d.flaring_co2_per_capita); const sumGas = d3.sum(v, d => d.gas_co2_per_capita); const sumLandUseChange = d3.sum(v, d => d.land_use_change_co2_per_capita); const sumOil = d3.sum(v, d => d.oil_co2_per_capita); const sumOtherIndustry = d3.sum(v, d => d.other_industry_co2_per_capita); return { sumCement, sumCoal, sumFlaring, sumGas, sumLandUseChange, sumOil, sumOtherIndustry }; }, d => [d.country, d.year] // Agrupar por país y año ) .sort((a, b) => { const yearComparison = a[0][1] - b[0][1]; return yearComparison !== 0 ? yearComparison : a[0][0].localeCompare(b[0][0]); }) // Ordenar por año y país .map(([[country, year], summary]) => { // Bien estructurado return { Country: country, Year: year, Cement: parseFloat(summary.sumCement), Coal: parseFloat(summary.sumCoal), Flaring: parseFloat(summary.sumFlaring), Gas: parseFloat(summary.sumGas), LandUseChange: parseFloat(summary.sumLandUseChange), Oil: parseFloat(summary.sumOil), OtherIndustry: parseFloat(summary.sumOtherIndustry) }; });40:T4bf,fixCountryName = (countryName) => { var countryToUse = countryName; if (countryToUse === "United States of America") { countryToUse = "United States"; } else if (countryToUse === "Dem. Rep. Congo") { countryToUse = "Dominican Republic"; } else if (countryToUse === "Central African Rep.") { countryToUse = "Central African Republic"; } else if (countryToUse === "S. Sudan") { countryToUse = "South Sudan"; } else if (countryToUse === "Dominican Rep.") { countryToUse = "Dominican Republic"; } else if (countryToUse === "eSwatini") { countryToUse = "Eswatini"; } else if (countryToUse === "Somaliland") { countryToUse = "Somalia"; // No me la contis lmao } else if (countryToUse === "Côte d'Ivoire") { countryToUse = "Cote d'Ivoire"; } else if (countryToUse === "Eq. Guinea") { countryToUse = "Equatorial Guinea"; } else if (countryToUse === "W. Sahara") { countryToUse = "Morocco"; // No me la contis lmao } else if (countryToUse === "Bosnia and Herz.") { countryToUse = "Bosnia and Herzegovina"; } else if (countryToUse === "N. Cyprus") { countryToUse = "Cyprus"; // No me la contis lmao } return countryToUse; }41:T491,mouseover = (event, d, tooltip) => { const svgContainer = barPlotSectorsofCountryYear(d.properties.name, selectedYear); const tempDiv = document.createElement('div'); tempDiv.appendChild(svgContainer); // Convierte el contenido SVG del div temporal a una cadena const svgContent = tempDiv.innerHTML // Osea, hay que engañarle. Yep. It is what it is. const htmlContent = `

${d.properties.name} ${selectedYear}

CO₂ emissions in tonnes by sector (per capita)

${svgContainer.outerHTML}

`; tooltip .html(htmlContent) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px") .style("visibility", "visible"); d3.select(event.currentTarget) .style("cursor", "pointer") //.attr("stroke-width", 1.5) //.attr("stroke", "#000") .attr("filter", "brightness(80%)"); //.raise(); }42:T57d,sectorEmissionsPerCapita = d3.rollups( ArrayEmissions, v => { const sumCement = d3.sum(v, d => d.cement_co2_per_capita); const sumCoal = d3.sum(v, d => d.coal_co2_per_capita); const sumFlaring = d3.sum(v, d => d.flaring_co2_per_capita); const sumGas = d3.sum(v, d => d.gas_co2_per_capita); const sumLandUseChange = d3.sum(v, d => d.land_use_change_co2_per_capita); const sumOil = d3.sum(v, d => d.oil_co2_per_capita); const sumOtherIndustry = d3.sum(v, d => d.other_industry_co2_per_capita); // Calcular la suma total después de haber definido todas las variables const TotalCo2 = sumCement + sumCoal + sumFlaring + sumGas + sumLandUseChange + sumOil + sumOtherIndustry; return { sumCement, sumCoal, sumFlaring, sumGas, sumLandUseChange, sumOil, sumOtherIndustry, TotalCo2 }; }, d => d.year // Agrupar por año ) .sort((a, b) => a[0] - b[0]) // Ordenar per any .map(([year, summary]) => { // Ben estructurat return { Year: year, Cement: parseFloat(summary.sumCement), Coal: parseFloat(summary.sumCoal), Flaring: parseFloat(summary.sumFlaring), Gas: parseFloat(summary.sumGas), LandUseChange: parseFloat(summary.sumLandUseChange), Oil: parseFloat(summary.sumOil), OtherIndustry: parseFloat(summary.sumOtherIndustry), TotalCo2: parseFloat(summary.TotalCo2) }; }); 43:T501,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((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .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((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value) + " t")) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }44:T613,DataTable = { const countriesForYear = []; for (const feature of countries.features){ if (selectedColor === "Most emitted sector") { for (const [country, sectorMap] of mostEmissionSector){ if (sectorMap.has(selectedYear)){ const dataForYear = sectorMap.get(selectedYear); const countryData = { Country: country, Year: selectedYear, }; countryData.MostEmittedSector = getMostEmittedSector(countryData.Country, selectedYear) countriesForYear.push(countryData) } } } else { for (const [country, yearDataMap] of emissionsMap){ if (yearDataMap.has(selectedYear)){ const dataForYear = yearDataMap.get(selectedYear); const countryData = { Country: country, Year: selectedYear, }; if (selectedColor === "Emission" && dataForYear.hasOwnProperty("co2_per_capita")){ countryData.Emissions = dataForYear.co2_per_capita } else if (selectedColor === "Consumption" && dataForYear.hasOwnProperty("consumption_co2")){ countryData.Consumption = dataForYear.consumption_co2_per_capita } else if (selectedColor === "Emission vs Consumption (Con / Em)"){ countryData.EmissionVSConssumption = getEmissionVsConsumptionValue(countryData.Country, selectedYear) } countriesForYear.push(countryData) } } } } return countriesForYear; }45:[{"id":"584a10005ab8b5c9ef1590750a37f7eae6f04263939ce03790fc1a646eb5106acdbb442101c0034caae79bed75bf529d9ae9b2943dcbe86f5318847f4920491f","href":"https://static.observableusercontent.com/files/584a10005ab8b5c9ef1590750a37f7eae6f04263939ce03790fc1a646eb5106acdbb442101c0034caae79bed75bf529d9ae9b2943dcbe86f5318847f4920491f","name":"image.png","type":"image/png","lastModified":1705333846216.822,"size":344715},{"id":"36a68cc6f0a97b2fd4e09c01bc88849ff5adee1035078f8fcdeb7fe8bd524581ff40cf61d4d1ac558af7c2a0c6eba53b294a577d9b093767df4bbfb14f283c0d","href":"https://static.observableusercontent.com/files/36a68cc6f0a97b2fd4e09c01bc88849ff5adee1035078f8fcdeb7fe8bd524581ff40cf61d4d1ac558af7c2a0c6eba53b294a577d9b093767df4bbfb14f283c0d","name":"play-icon.svg","type":"image/svg+xml","lastModified":1705018981857.39,"size":409},{"id":"a91a7fa6db88498b776db3285fb696449e58e212c9bd888837eb2899b1f6722da36d5b62669592e159b0cc04033f87cbd2f763467163bd305800894644279e6c","href":"https://static.observableusercontent.com/files/a91a7fa6db88498b776db3285fb696449e58e212c9bd888837eb2899b1f6722da36d5b62669592e159b0cc04033f87cbd2f763467163bd305800894644279e6c","name":"fotointroexercifinalvisualitzacio.webp","type":"image/webp","lastModified":1705450758951.65,"size":28886},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1705143262944.195,"size":756420}] 2d:{"title":"CO2 Over Time: An Analysis of Sectors and Contributing Countries","cells":[{"id":0,"value":"# CO2 Over Time: An Analysis of Sectors and Contributing Countries\n-------------------------------------------------------------------------------------------------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md"},{"id":3145,"value":"## SECTIONS\n1. Introduction\n2. Goal\n3. Used data: Picked variables\n4. Data questions to achieve the goal\n5. Visualizations of the questions and findings\n6. Conclusive Insights\n7. (Distribució per realitzar el projecte i conclusió de l'equip?)\n\n-------------------------------------------------------------------------------------------------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"## 2. GOAL\nL'objectiu general del projecte és comprendre i analitzar les contribucions dels diversos sectors a les emissions de CO₂ a nivell global al llarg del temps, amb el propòsit de conscienciar el públic sobre la crisi climàtica i facilitar la presa de decisions informades per abordar-la de manera efectiva.\n\n-------------------------------------------------------------------------------------------------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md"},{"id":3157,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"---\n## Summary","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"toc({\n title: null,\n headers: 'h3'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3177,"value":"------\n## 4. VISUALITZATIONS OF THE QUESTIONS AND FINDINGS","pinned":false,"hidden":false,"mode":"md"},{"id":3685,"value":"Per comprendre el panorama de les emissions de CO₂ a escala mundial, ens endinsarem en un anàlisi detallat de com aquestes emissions han evolucionat a cada país.","pinned":false,"hidden":false,"mode":"md"},{"id":2547,"value":"### Quines són les emissions per país, anualment, i com ha afectat a la temperatura global?","pinned":false,"hidden":false,"mode":"md"},{"id":2565,"value":"viewof selectedColor = Inputs.radio([\"Most emitted sector\", \"Emission\", \"Consumption\", \"Emission vs Consumption (Con / Em)\"], {label: \"Select one\", value: \"Most emitted sector\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2906,"value":"viewof selectedYear = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2569,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3634,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3826,"value":"En emissions vs. consum es veu que generalment els països més desenvolupats tenen una discrepància més gran entre el CO₂ que emeten per si mateixos i el CO₂ que emeten per consum (el consum és més alt que les emissions).","pinned":false,"hidden":false,"mode":"md"},{"id":4223,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"---\n### Com han canviat les emissions de cada sector anualment?","pinned":false,"hidden":false,"mode":"md"},{"id":2749,"value":"\nEmissions globals anuals de CO₂ de cada sector al llarg del temps.","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"viewof replay = {\n const buttonStyles = `\n background-color: #4CAF50;\n color: white;\n padding: 10px 16px;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n display: flex; justify-content: center; align-items: center; gap: 5px;\n `;\n\n const playIconStyles = `\n height: 18px;\n width: 18px;\n filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(252deg) brightness(107%) contrast(104%);\n `;\n \n const playIconUrl = \"https://www.svgrepo.com/show/157838/play-button.svg\"\n \n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3834,"value":"

\n ${tableau10.map(swatch => html`\n

${swatch.label}

\n `)}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":986,"value":"chart = {\n replay;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n\n yield svg.node();\n\n for (const keyframe of keyframes) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateTicker(keyframe, transition);\n\n invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"viewof selectSector = Inputs.select(sectors, {label: \"Select Sector\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"// Create the swatches legend HTML\nhtml`\n

\n ${tableau10.map(swatch => html`\n

${swatch.label}

\n `)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2800,"value":"\n \n \n \n

\n ${plt1}\n

\n ${plt2}\n

\n \n","pinned":false,"hidden":false,"mode":"html"},{"id":3852,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":4225,"value":"Des del 1750, degut a la revolució industrial (del 1750 fins al 1850 aproximadament) el carbó domina.\n\nA partir del 1850 comencem a tenir dades sobre el \"land use change\", que domina, juntament amb el carbó, fins el 1960 aproximadament. Hi havia moltíssima desforestació per tant el \"land use change\" és d’esperar que dominés.\n\nPer altra banda el petroli (oil) no comença a ser rellevant fins el 1950, moment en què hi ha un punt d'inflexió i comença a creixer pseudo-exponencialment fins que al ~1970 passa a ser el contribuidor principal a les emissions globals.\n","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"---\n### Hi ha correlacions entre els sectors en termes de tendències d'emissions?","pinned":false,"hidden":false,"mode":"md"},{"id":836,"value":"viewof sector1 = Inputs.select([\"Cement\", \"Coal\", \"Flaring\", \"Gas\", \"LandUseChange\", \"Oil\", \"OtherIndustry\"], {label: \"Select sector 1\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"viewof sector2 = Inputs.select([\"Cement\", \"Coal\", \"Flaring\", \"Gas\", \"LandUseChange\", \"Oil\", \"OtherIndustry\"].filter(d => d !== sector1), {label: \"Select sector 2\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3308,"value":"\n \n \n \n

\n ${scatterPlot}\n

\n ${heatmapPlot}\n

\n \n","pinned":false,"hidden":false,"mode":"html"},{"id":4213,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":4233,"value":"### Quina és la distribució anual d’emissions per sector als països d'interès?","pinned":false,"hidden":false,"mode":"md"},{"id":3901,"value":"viewof selectedYear2 = Scrubber(d3.range(1850, 2022), {loop: false, delay: 100, autoplay: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3714,"value":"resultt = {\n const datosAñoEspecifico = dataGroupedBar.filter(item => item.year === selectedYear2);\n // Extraer la columna \"value\" para la escala\n //const values = datosAñoEspecifico .map(item => item.value);\n \n // Calcular el valor mínimo y máximo\n //const minValue = Math.min(...values);\n //const maxValue = Math.max(...values);\n \n // Aplicar la escala lineal\n //datosAñoEspecifico .forEach(item => {\n // item.emissions = (item.value - minValue) / (maxValue - minValue) * 100;\n //});\n \n const p = Plot.plot({\n // x: {axis: null},\n y: {tickFormat: \"s\", grid: true, domain: [0, 60]},\n color: {scheme: \"Tableau10\", legend: true},\n marks: [\n Plot.barY(datosAñoEspecifico, {\n x: \"country\",\n y: \"value\",\n fill: \"sector\",\n sort: {x: null, color: null, x: {value: \"-y\"}}\n }),\n Plot.ruleY([0])\n ]\n })\n \n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4219,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":3879,"value":"“In the 1950s, southwestern Western Australia was largely cleared for wheat production”\n\n-- [Little left to lose: deforestation and forest degradation in Australia since European colonization | Journal of Plant Ecology | Oxford Academic (oup.com)](https://academic.oup.com/jpe/article/5/1/109/1294916?login=false)","pinned":false,"hidden":false,"mode":"md"},{"id":4199,"value":"### Quins son els països que més han contribuït en les emissions de CO₂ per cada sector?","pinned":false,"hidden":false,"mode":"md"},{"id":4195,"value":"\n \n \n \n TOP 3 COUNTRIES WITH THE HIGHEST CO₂ EMISSIONS BY SECTORS\n

\n ${lineChart1}\n

\n ${lineChart2}\n

\n ${lineChart3}\n

\n ${lineChart4}\n

\n ${lineChart5}\n

\n ${lineChart6}\n

\n \n","pinned":false,"hidden":false,"mode":"html"},{"id":4259,"value":"La intenció dels gràfics és per consciencar i conèixer la realitat, identificar tendències i comparar amb altres països, més que assenyalar específicament els principals contribuents en cada sector.\n\nÉs interessant notar que hi ha un país en particular que apareix al top 3 en els 6 sectors: els Estats Units. Aquest destaca el seu paper com un dels principals emissors de CO₂ en sectors com el gas, el petroli i el \"flaring\". D'altra banda, veiem que la Xina també figura en tres sectors, però és el principal emissor en emissions de CO₂ amb el carbó i el ciment, amb una diferència significativa respecte als altres països.\n\nPel que fa al \"land use change\", sembla que la tendència ha estat a la baixa. Això pot ser un indicador de canvis en les pràctiques de gestió dels recursos naturals en diversos països.","pinned":false,"hidden":false,"mode":"md"},{"id":3179,"value":"-----\n## 6. CONCLUSIVE INSIGHTS \n\nActualment, la indústria petrolera es troba entre els sectors més influents del món. Ha jugat un paper crític en l'impuls de les economies de molts països del Sud Global.\n\nCom a individu, pot semblar desalentador abordar qüestions com l'escalfament global i el domini de la indústria petrolera. No obstant això, cadascú de nosaltres té la capacitat de fer una diferència a la seva manera. Optar per fonts d'energia renovable per a les nostres llars, com l'energia solar o eòlica, i triar vehicles elèctrics o bicicletes en lloc dels que funcionen amb combustibles fòssils són passos pràctics que podem integrar en la nostra vida diària per ajudar al medi ambient.\n","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"---\n## 7. ADDENDUM: \n\nData, libraries, other ... \n(CAL ELIMINAR ELS QUE NO CALEN)","pinned":false,"hidden":false,"mode":"md"},{"id":3903,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"scatterPlot = Plot.plot({\n marks: [\n Plot.dot(sectorEmissions, {x: sector1, y: sector2, z: \"Year\", tip: true, opacity: 0.5}),\n Plot.linearRegressionY(sectorEmissions, {x: sector1, y: sector2, stroke: \"Red\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3369,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3226,"value":"resultatsCor = {\n const correlationsArray = [];\n\n name_sectors.forEach((sector1, i) => {\n name_sectors.forEach(sector2 => {\n const correlationValue = corr(\n ArrayEmissions.map(d => d[sector1]),\n ArrayEmissions.map(d => d[sector2])\n );\n\n const r2 = correlationValue * correlationValue * correlationValue;\n\n correlationsArray.push({\n sector1: sector1.replace(\"_co2\", \"\"),\n sector2: sector2.replace(\"_co2\", \"\"),\n correlation: r2,\n });\n });\n });\n\n return correlationsArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3205,"value":"// Funció càlcul correlació\nfunction corr(x, y) {\n const n = x.length;\n if (y.length !== n)\n throw new Error(\"The two columns must have the same length.\");\n const x_ = d3.mean(x);\n const y_ = d3.mean(y);\n const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));\n const XX = d3.sum(x, (d) => (d - x_) ** 2);\n const YY = d3.sum(y, (d) => (d - y_) ** 2);\n return XY / Math.sqrt(XX * YY);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3694,"value":"paisesSeleccionados = [\"United States of America\", \"China\", \"Canada\", \"Saudi Arabia\", \"Russia\", \"Australia\", \"Spain\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":3697,"value":"dataGroupedBar = {\n const dataPaisesSeleccionados = CountryYearSectorsperCap\n .filter(item => paisesSeleccionados.includes(item.Country))\n .map(item => {\n // Crear un array de objetos para cada sector\n const valoresPorSector = sectors.map(sector => ({\n country: item.Country,\n year: item.Year,\n sector,\n value: item[sector]\n }));\n \n return valoresPorSector;\n })\n .flat(); // Aplanar el array de arrays\n return dataPaisesSeleccionados;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"plt2 = Plot.plot({\n marginLeft: 50,\n color: {\n type: \"categorical\",\n scheme: \"Tableau10\"\n },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.areaY(sectorEmissions2, {x: \"Year\", y: \"Emissions\", z: \"Sector\", fill: \"Sector\", curve: \"basis\", opacity: 0.8, order: \"value\"}),\n Plot.ruleY([0])\n ]\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2210,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"temperatureChange = d3.rollups(\n ArrayEmissions,\n v => {\n const temperatureChange = d3.sum(v, d => d.temperature_change_from_co2);\n\n return {\n temperatureChange\n };\n },\n d => d.year // Agrupar por año\n)\n.sort((a, b) => a[0] - b[0]) // Ordenar per any\n.map(([year, summary]) => { // Ben estructurat\n return {\n Year: year,\n Temperature: parseFloat(summary.temperatureChange)\n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2822,"value":"// Define the Tableau 10 color scheme\ntableau10 = {\nconst tableau10 = [\n { color: \"#4E79A7\", label: \"Cement\" },\n { color: \"#F28E2B\", label: \"Coal\" },\n { color: \"#E15759\", label: \"Flaring\" },\n { color: \"#76B7B2\", label: \"Gas\" },\n { color: \"#59A14F\", label: \"LandUseChange\" },\n { color: \"#EDC948\", label: \"Oil\" },\n { color: \"#B07AA1\", label: \"OtherIndustry\" }\n ];\n\n return tableau10\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"emissions = (\n await fetch(\n \"https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2791,"value":"transform = {\n emissions[\"United States of America\"] = emissions[\"United States\"];\n delete emissions[\"United States\"];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"sectors = [\"Cement\", \"Coal\", \"Flaring\", \"Gas\", \"LandUseChange\", \"Oil\", \"OtherIndustry\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":3210,"value":"name_sectors = [\n 'cement_co2',\n 'coal_co2',\n 'flaring_co2',\n 'gas_co2',\n 'land_use_change_co2',\n 'oil_co2',\n 'other_industry_co2'\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"// Ignore this\ndata_countries = Object.keys(emissions).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"// Ignore this\nworld_countries = world.objects.countries.geometries.map(g => g.properties.name).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"// Ignore this, I was just watching which countries were missing\nworld_countries.map(c => { return {exist: data_countries.includes(c), country: c}}).filter(c => !c.exist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"// Same as the previous\ndata_countries.map(c => { return {exist: world_countries.includes(c), country: c}}).filter(c => !c.exist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3746,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1935,"value":"EmissionsConsumptionCountryYear per definir escala de colors dels paisos segons el botó que es seleccioni","pinned":false,"hidden":false,"mode":"md"},{"id":1931,"value":"EmissionsConsumptionCountryYear = d3.rollups(\n ArrayEmissions,\n v => {\n const sumEmissions = d3.sum(v, d => d.co2);\n const sumConsumption = d3.sum(v, d => d.consumption_co2);\n\n return {\n sumEmissions,\n sumConsumption\n };\n },\n d => [d.country, d.year] // Agrupar por país y año\n)\n.sort((a, b) => {\n const yearComparison = a[0][1] - b[0][1];\n return yearComparison !== 0 ? yearComparison : a[0][0].localeCompare(b[0][0]);\n}) // Ordenar por año y país\n.map(([[country, year], summary]) => { // Bien estructurado\n return {\n Country: country,\n Year: year,\n Emissions: parseFloat(summary.sumEmissions),\n Consumption: parseFloat(summary.sumConsumption)\n };\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2593,"value":"\"What are the per-country sector emissions, annually\" questions data and functions...","pinned":false,"hidden":false,"mode":"md"},{"id":2625,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"// Data for consumptions and emitted CO2 color of the map\nemissionsMap = new Map(Object.keys(emissions).map(country => [\n country,\n new Map(emissions[country].data.map(c => [c.year, c]))\n]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2633,"value":"mostEmissionSector = {\n const mostEmitted = (yearData) => {\n const yearDataSectors = [\n { name: \"Cement\", value: yearData.cement_co2 },\n { name: \"Coal\", value: yearData.coal_co2 },\n { name: \"Flaring\", value: yearData.flaring_co2 },\n { name: \"Gas\", value: yearData.gas_co2 },\n { name: \"LandUseChange\", value: yearData.land_use_change_co2 },\n { name: \"Oil\", value: yearData.oil_co2 },\n { name: \"OtherIndustry\", value: yearData.other_industry_co2 }\n ];\n \n const mostEmittedSector = yearDataSectors.reduce((maxSector, currentSector) => {\n return currentSector.value !== null && currentSector.value > (maxSector.value || 0)\n ? currentSector\n : maxSector;\n }, {});\n \n return mostEmittedSector.name ? mostEmittedSector.name : null;\n };\n \n return new Map(Object.keys(emissions).map(country => [\n country,\n new Map(emissions[country].data.map(yearData => [yearData.year, mostEmitted(yearData)]))\n ]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3044,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":2637,"value":"getMostEmittedSector = (country, year) => {\n const countryToUse = fixCountryName(country);\n const countryData = mostEmissionSector.get(countryToUse);\n const sectorData = countryData?.get(year);\n\n return sectorData ?? null; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2641,"value":"getValue = (country, year, field) => {\n const countryToUse = fixCountryName(country);\n const countryData = emissionsMap.get(countryToUse);\n const yearData = countryData?.get(year);\n\n return yearData?.[field] ?? null;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":3465,"value":"getEmissionVsConsumptionValue = (country, year) => {\n const valueEmission = getValue(country, year, \"co2_per_capita\")\n const valueConsumption = getValue(country, year, \"consumption_co2_per_capita\")\n if (valueEmission && valueConsumption) {\n const value = (valueConsumption / valueEmission) * Math.abs(valueConsumption - valueEmission);\n return value ? value : null;\n } else {\n return null\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2645,"value":"domainColorField = (field) => {\n const result = []\n\n Object.keys(emissions).forEach(country => {\n emissions[country].data.forEach(yearData => {\n if(yearData[field]) result.push(yearData[field]);\n })\n })\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"getEmissionsPerCapitaBySectors = (country, year) => {\n const countryToUse = fixCountryName(country);\n const countryData = emissionsMap.get(countryToUse);\n const yearData = countryData?.get(year);\n\n const cement = {sector: \"Cement\", value: yearData?.cement_co2_per_capita ?? 0};\n const coal = {sector: \"Coal\", value: yearData?.coal_co2_per_capita ?? 0};\n const flaring = {sector: \"Flaring\", value: yearData?.flaring_co2_per_capita ?? 0};\n const gas = {sector: \"Gas\", value: yearData?.gas_co2_per_capita ?? 0};\n const landUseChange = {sector: \"LandUseChange\", value: yearData?.land_use_change_co2_per_capita ?? 0};\n const oil = {sector: \"Oil\", value: yearData?.oil_co2_per_capita ?? 0};\n const otherIndustry = {sector: \"OtherIndustry\", value: yearData?.other_industry_co2_per_capita ?? 0};\n\n return [cement, coal, flaring, gas, landUseChange, oil, otherIndustry]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2599,"value":"mousemove = (event, tooltip) => {\n tooltip\n .style(\"left\", (event.pageX + 10) + \"px\")\n .style(\"top\", (event.pageY + 10) + \"px\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":2605,"value":"mouseout = (event, d, tooltip) => {\n tooltip.style(\"visibility\", \"hidden\");\n \n d3.select(event.currentTarget)\n .attr(\"filter\", null);\n //.attr(\"stroke\", null).lower();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2608,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2614,"value":"barPlotSectorsofCountryYear = (selectedCountry, selectedYear) => {\n const plotData = getEmissionsPerCapitaBySectors(selectedCountry, selectedYear);\n\n const colorScale = d3.scaleOrdinal()\n .domain(sectors)\n .range(d3.schemeTableau10);\n \n // Configurar y mostrar el gráfico de barras horizontales con escala de colores\n const plot = Plot.plot({\n width: 180,\n height: 150,\n marginRight: 30,\n y: {\n axis: null\n },\n x: {\n axis: null\n },\n marks: [\n Plot.barX(plotData, {\n x: \"value\",\n y: \"sector\",\n sort: { y: \"x\", reverse: true },\n fill: d => colorScale(d.sector), // Asignar color directamente a cada barra\n }),\n Plot.text(plotData, {\n x: \"value\",\n y: \"sector\",\n text: d => `${d.value.toFixed(1)} t`,\n textAnchor: \"start\",\n fontSize: 10,\n fontStyle: \"italic\",\n dx: 3\n })\n ]\n });\n\n // Mostrar el gráfico en el elemento de Observable\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2656,"value":"\"Which sector contributes the most to CO₂ emissions annually\" questions data and functions","pinned":false,"hidden":false,"mode":"html"},{"id":3740,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"CO2_by_sector = {\n const data = []\n\n sectorEmissions.forEach(v => {\n data.push({year: v.Year, sector: \"Cement\", co2: v.Cement})\n data.push({year: v.Year, sector: \"Coal\", co2: v.Coal})\n data.push({year: v.Year, sector: \"Flaring\", co2: v.Flaring})\n data.push({year: v.Year, sector: \"Gas\", co2: v.Gas})\n data.push({year: v.Year, sector: \"LandUseChange\", co2: v.LandUseChange})\n data.push({year: v.Year, sector: \"Oil\", co2: v.Oil})\n data.push({year: v.Year, sector: \"OtherIndustry\", co2: v.OtherIndustry})\n })\n\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2664,"value":"duration = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":2667,"value":"n = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":2670,"value":"names = [\"Cement\", \"Coal\", \"Flaring\", \"Gas\", \"LandUseChange\", \"Oil\", \"OtherIndustry\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"datevalues = Array.from(d3.rollup(CO2_by_sector, ([d]) => d.co2, d => +d.year, d => d.sector))\n .map(([year, data]) => [year, data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"k = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2682,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n const dateKa = new Date(ka, 0, 1)\n const dateKb = new Date(kb, 0, 1)\n keyframes.push([\n new Date(dateKa * (1 - t) + dateKb * t),\n rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb, 0, 1), rank(name => b.get(name) || 0)]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2685,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2688,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2691,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2694,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n // .attr(\"fill-opacity\", 0.6)\n .selectAll(\"rect\");\n\n return ([date, data], transition) => bar = bar\n .data(data.slice(0, n), d => d.name)\n .join(\n enter => enter.append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", d => y((prev.get(d) || d).rank))\n .attr(\"width\", d => x((prev.get(d) || d).value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", d => y((next.get(d) || d).rank))\n .attr(\"width\", d => x((next.get(d) || d).value) - x(0))\n )\n .call(bar => bar.transition(transition)\n .attr(\"y\", d => y(d.rank))\n .attr(\"width\", d => x(d.value) - x(0)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2697,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":2700,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n this.textContent = formatNumber(i(t));\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"tickFormat = undefined // override as desired","pinned":false,"hidden":false,"mode":"ojs"},{"id":2710,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${marginTop})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160, tickFormat)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2713,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", marginTop + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => {\n now.text(formatDate(date))\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2716,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n scale.domain(names);\n return d => scale(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2719,"value":"formatDate = d3.utcFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2722,"value":"x = d3.scaleLinear([0, 1], [marginLeft, width - marginRight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2725,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([marginTop, marginTop + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2728,"value":"height = marginTop + barSize * n + marginBottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"barSize = 48","pinned":false,"hidden":false,"mode":"ojs"},{"id":2734,"value":"marginTop = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":2737,"value":"marginRight = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":2740,"value":"marginBottom = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"marginLeft = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":3581,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":3951,"value":"","pinned":false,"hidden":false,"mode":"sql","output":"","database":"var:ArrayEmissions"},{"id":3954,"value":"dataMostEmittedSector = {\n const result = []\n \n ArrayEmissions.forEach(a => {\n if (!removeCountries.includes(a.country)) {\n result.push({ country: a.country, year: a.year, sector: \"Coal\", co2: a.coal_co2 ?? 0})\n result.push({ country: a.country, year: a.year, sector: \"Cement\", co2: a.cement_co2 ?? 0})\n result.push({ country: a.country, year: a.year, sector: \"Oil\", co2: a?.oil_co2 ?? 0})\n result.push({ country: a.country, year: a.year, sector: \"Gas\", co2: a?.gas_co2 ?? 0})\n result.push({ country: a.country, year: a.year, sector: \"LandUseChange\", co2: a?.land_use_change_co2\t?? 0})\n result.push({ country: a.country, year: a.year, sector: \"Flaring\", co2: a?.flaring_co2 ?? 0})\n }\n })\n\n return result;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3979,"value":"countriesMostCoalEmitter = [\"China\", \"United States of America\", \"Germany\"]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3984,"value":"countriesMostGasEmitter = [\"Russia\", \"Canada\", \"United States of America\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3993,"value":"countriesMostOilEmitter = [\"United States of America\", \"China\", \"Russia\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3999,"value":"countriesMostFlaringEmitter = [\"United States of America\", \"Iran\", \"Russia\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4006,"value":"countriesMostLandUseChangeEmitter = [\"United States of America\", \"Brazil\", \"Russia\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4011,"value":"countriesMostCementEmitter = [\"China\", \"United States of America\", \"India\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4038,"value":"removeCountries = [\"World\", \"Asia\", \"Upper-middle-income countries\" , \"High-income countries\", \"Asia (excl. China and India)\", \"Europe\", \"Lower-middle-income countries\", \"European Union (28)\", \"European Union (27)\", \"North America\", \"Europe (excl. EU-27)\", \"Europe (excl. EU-28)\", \"Africa\", \"South America\", \"North America (excl. USA)\", \"Low-income countries\", \"International shipping\", \"International aviation\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3970,"value":"SELECT d.country, sum(d.co2) as total FROM dataMostEmittedSector d\nWHERE d.sector = 'LandUseChange'\nGROUP BY d.country, d.sector\nORDER BY total desc","pinned":false,"hidden":false,"mode":"sql","output":"","database":"var:dataMostEmittedSector"},{"id":4064,"value":"lineChart1 = Plot.plot({\n marginRight: 100,\n title: \"Coal\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n // color:{legend: true},\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Coal\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Coal\" && countriesMostCoalEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"Coal\" && countriesMostCoalEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4092,"value":"lineChart2 = Plot.plot({\n marginRight: 100,\n title: \"Gas\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Gas\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Gas\" && countriesMostGasEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"Gas\" && countriesMostGasEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4097,"value":"lineChart3 = Plot.plot({\n marginRight: 100,\n title: \"Oil\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Oil\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Oil\" && countriesMostOilEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"Oil\" && countriesMostOilEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4103,"value":"lineChart4 = Plot.plot({\n marginRight: 100,\n title: \"Flaring\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Flaring\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Flaring\" && countriesMostFlaringEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"Flaring\" && countriesMostFlaringEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4109,"value":"lineChart5 = Plot.plot({\n marginRight: 100,\n title: \"Land Use Change\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"LandUseChange\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"LandUseChange\" && countriesMostLandUseChangeEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"LandUseChange\" && countriesMostLandUseChangeEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4113,"value":"lineChart6 = Plot.plot({\n marginRight: 100,\n title: \"Cement\",\n x: { grid: true },\n y: {\n grid: true,\n label: \"CO₂ Emissions\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Cement\"), { x: \"year\", y: \"co2\", z: \"country\", }),\n Plot.line(dataMostEmittedSector.filter(d => d.sector == \"Cement\" && countriesMostCementEmitter.includes(d.country)), { x: \"year\", y: \"co2\", z: \"country\", stroke: \"country\", strokeWidth: 3 }),\n Plot.text(dataMostEmittedSector.filter(d => d.sector == \"Cement\" && countriesMostCementEmitter.includes(d.country) && d.year === dataMostEmittedSector[dataMostEmittedSector.length - 1].year), { x: \"year\", y: \"co2\", text: d => d.country, dx: 5, fontSize: 15, textAnchor: \"start\"})\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W45","stdlib":"1","titling":"auto"}

${column}
${value}