Emissions D3

2f:T65b,

Le dioxyde de carbone (CO2) est un gaz naturellement présent dans l'atmosphère terrestre. Il est produit par des processus biologiques et géologiques, ainsi que par les activités humaines telles que la combustion de combustibles fossiles (pétrole, gaz naturel, charbon) pour la production d'énergie, les transports, l'agriculture, l'industrie et la déforestation.

Le dioxyde de carbone est important à surveiller car il est considéré comme le principal gaz à effet de serre émis par les activités humaines. Les gaz à effet de serre piégent la chaleur dans l'atmosphère terrestre, entraînant un réchauffement de la planète et un changement climatique. Les émissions de dioxyde de carbone sont donc un facteur clé du changement climatique.

Il est important de surveiller les émissions de dioxyde de carbone pour évaluer l'ampleur et la tendance du changement climatique, comprendre les sources d'émissions et élaborer des politiques pour les réduire. Les mesures de surveillance peuvent inclure des relevés de gaz à effet de serre dans l'atmosphère, des estimations des émissions de dioxyde de carbone à partir de données sur les activités humaines et des modèles climatiques pour prédire l'impact futur des émissions sur le climat. Grâce à ces mesures, les décideurs politiques peuvent élaborer des stratégies pour réduire les émissions de dioxyde de carbone et atténuer les effets du changement climatique.

30:T562,

Le contexte du projet pourrait être la surveillance et l'analyse de l'évolution des émissions de dioxyde de carbone (CO2) au fil du temps. Les émissions de CO2 sont un facteur important dans le changement climatique et leur surveillance peut aider à comprendre l'impact de l'activité humaine sur l'environnement.

La visualisation des données est un outil précieux pour analyser et présenter les données d'émissions de CO2. Les graphiques peuvent aider à montrer comment les émissions ont évolué au fil du temps, comment les différentes sources d'émissions contribuent au total, et comment les émissions varient dans différents pays et régions. Les graphiques peuvent également aider à mettre en évidence les tendances et les modèles dans les données, ainsi qu'à identifier les points chauds ou les endroits où les émissions sont particulièrement élevées.

Une visualisation efficace des données d'émissions de CO2 peut aider les décideurs, les chercheurs et le grand public à mieux comprendre les impacts de l'activité humaine sur le climat et à éclairer les choix politiques et individuels pour réduire les émissions de CO2 et atténuer le changement climatique.

31:T6b2, Emissions D3

Emissions CO₂

Emissions Emissions Par habitant

Année en cours:

32:Tc20,Promise.all([ d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json"), d3.csv("https://raw.githubusercontent.com/Manal1Hachhach/visu/main/all_data.csv", function(row) { return { continent: row.Continent, country: row.Country, countryCode: row["Country Code"], emissions: +row["Emissions"], emissionsPerCapita: +row["Emissions Per Capita"], region: row.Region, year: +row.Year } }) ]).then(function([mapData, data]) { var extremeYears = d3.extent(data, d => d.year); var currentYear = extremeYears[0]; var currentDataType = d3.select('input[name="data-type"]:checked') .attr("value"); var geoData = topojson.feature(mapData, mapData.objects.countries).features; var width = +d3.select(".chart-container") .node().offsetWidth; var height = 300; createMap(width, width * 4 / 5); createPie(width, height); createBar(width, height); drawMap(geoData, data, currentYear, currentDataType); drawPie(data, currentYear); drawBar(data, currentDataType, ""); // AJOUT DIV const tooltip = d3.select("body").append("div") .attr("class", "tooltip2") .style("position", "absolute") .text("I'm a circle!"); d3.select("#year") .property("min", currentYear) .property("max", extremeYears[1]) .property("value", currentYear) .on("input", () => { currentYear = +d3.event.target.value; drawMap(geoData, data, currentYear, currentDataType); drawPie(data, currentYear); highlightBars(currentYear); }); d3.selectAll('input[name="data-type"]') .on("change", () => { var active = d3.select(".active").data()[0]; var country = active ? active.properties.country : ""; currentDataType = d3.event.target.value; drawMap(geoData, data, currentYear, currentDataType); drawBar(data, currentDataType, country); }); d3.selectAll("#map") .on("mousemove touchmove", updateTooltip); function updateTooltip() { var tooltip = d3.select(".tooltip2"); var tgt = d3.select(d3.event.target); var isCountry = tgt.classed("country"); var isBar = tgt.classed("bar"); var isArc = tgt.classed("arc"); var dataType = d3.select("input:checked") .property("value"); var units = dataType === "emissions" ? "thousand metric tons" : "metric tons per capita"; var data; var percentage = ""; if (isCountry) data = tgt.data()[0].properties; if (isArc) { data = tgt.data()[0].data; percentage = `

Percentage of total: ${getPercentage(tgt.data()[0])}

`; } if (isBar) data = tgt.data()[0]; // MISE A JOUR DIV tooltip .style("opacity", +(isCountry || isArc || isBar)) .style("left", (d3.event.pageX ) + "px") .style("top", (d3.event.pageY) + "px") .html("TEST") } }) 33:T583, function drawPie(data, currentYear) { var pie = d3.select("#pie"); var arcs = d3.pie() .sort((a,b) => { if (a.continent < b.continent) return -1; if (a.continent > b.continent) return 1; return a.emissions - b.emissions; }) .value(d => d.emissions); var path = d3.arc() .outerRadius(+pie.attr("height") / 2 - 50) .innerRadius(0); var yearData = data.filter(d => d.year === currentYear); var continents = []; for (var i = 0; i < yearData.length; i++) { var continent = yearData[i].continent; if (!continents.includes(continent)) { continents.push(continent); } } var colorScale = d3.scaleOrdinal() .domain(continents) .range(["#ab47bc", "#7e57c2", "#26a69a", "#42a5f5", "#78909c"]); var update = pie .select(".chart") .selectAll(".arc") .data(arcs(yearData)); update .exit() .remove(); update .enter() .append("path") .classed("arc", true) .attr("stroke", "#dff1ff") .attr("stroke-width", "0.25px") .merge(update) .attr("fill", d => colorScale(d.data.continent)) .attr("d", path); pie.select(".pie-title") .text("Les émissions totales par continent et région, " + currentYear); } 34:T914, function drawBar(data, dataType, country) { var bar = d3.select("#bar"); var padding = { top: 30, right: 30, bottom: 30, left: 110 }; var barPadding = 1; var width = +bar.attr("width"); var height = +bar.attr("height"); var countryData = data.filter(d => d.country === country) .sort((a, b) => a.year - b.year); var xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([padding.left, width - padding.right]); var yScale = d3.scaleLinear() .domain([0, d3.max(countryData, d => d[dataType])]) .range([height - padding.bottom, padding.top]); var barWidth = xScale(xScale.domain()[0] + 1) - xScale.range()[0]; var xAxis = d3.axisBottom(xScale) .tickFormat(d3.format(".0f")); d3.select(".x-axis") .attr("transform", "translate(0, " + (height - padding.bottom) + ")") .call(xAxis); var yAxis = d3.axisLeft(yScale); d3.select(".y-axis") .attr("transform", "translate(" + (padding.left - barWidth / 2) + ",0)") .transition() .duration(1000) .call(yAxis); var axisLabel = dataType === "emissions" ? "CO2 emissions, thousand metric tons" : "CO2 emissions, metric tons per capita"; var barTitle = country ? "CO2 Emissions, " + country : "Click on a country to see annual trends."; d3.select(".y-axis-label") .text(axisLabel); d3.select(".bar-title") .text(barTitle); var t = d3.transition() .duration(1000) .ease(d3.easeBounceOut); var update = bar .selectAll(".bar") .data(countryData); update .exit() .transition(t) .delay((d, i, nodes) => (nodes.length - i - 1) * 100) .attr("y", height - padding.bottom) .attr("height", 0) .remove(); update .enter() .append("rect") .classed("bar", true) .attr("y", height - padding.bottom) .attr("height", 0) .merge(update) .attr("x", d => (xScale(d.year) + xScale(d.year - 1)) / 2) .attr("width", barWidth - barPadding) .transition(t) .delay((d, i) => i * 100) .attr("y", d => yScale(d[dataType])) .attr("height", d => height - padding.bottom - yScale(d[dataType])); }35:T7ce, function drawMap(geoData, climateData, year, dataType) { var map = d3.select("#map"); var projection = d3.geoMercator() .scale(110) .translate([ +map.attr("width") / 2, +map.attr("height") / 1.4 ]); var path = d3.geoPath() .projection(projection); d3.select("#year-val").text(year); geoData.forEach(d => { var countries = climateData.filter(row => row.countryCode === d.id); var name = ''; if (countries.length > 0) name = countries[0].country; d.properties = countries.find(c => c.year === year) || { country: name }; }); var colors = ["#f1c40f", "#e67e22", "#e74c3c", "#c0392b"]; var domains = { emissions: [0, 2.5e5, 1e6, 5e6], emissionsPerCapita: [0, 0.5, 2, 10] }; var mapColorScale = d3.scaleLinear() .domain(domains[dataType]) .range(colors); var update = map.selectAll(".country") .data(geoData); update .enter() .append("path") .classed("country", true) .attr("d", path) .on("click", function() { var currentDataType = d3.select("input:checked") .property("value"); var country = d3.select(this); var isActive = country.classed("active"); var countryName = isActive ? "" : country.data()[0].properties.country; drawBar(climateData, currentDataType, countryName); highlightBars(+d3.select("#year").property("value")); d3.selectAll(".country").classed("active", false); country.classed("active", !isActive); }) .merge(update) .transition() .duration(750) .attr("fill", d => { var val = d.properties[dataType]; return val ? mapColorScale(val) : "#ccc"; }) d3.select(".map-title") .text("Carbon dioxide " + graphTitle(dataType) + ", " + year); } 36:[{"id":"4cabdac5465c137be559b110946892226c1e1be74f487cf2b66f465a518cec327e87d3bd5c310b044c2acfbac1d38563c4aae3db84dc5afa35b41246ff5b9393","href":"https://static.observableusercontent.com/files/4cabdac5465c137be559b110946892226c1e1be74f487cf2b66f465a518cec327e87d3bd5c310b044c2acfbac1d38563c4aae3db84dc5afa35b41246ff5b9393","name":"pt.png","type":"image/jpeg","lastModified":1677750090753.572,"size":64145},{"id":"7c08bc83ca9351abf6c5fb57ae611dadc5c88adeafe6deea63342453771a9ff5d4ebbf8924508b586c4a53406e27f7edc0d77f21cf1f61ab78928f7df4a9fcb3","href":"https://static.observableusercontent.com/files/7c08bc83ca9351abf6c5fb57ae611dadc5c88adeafe6deea63342453771a9ff5d4ebbf8924508b586c4a53406e27f7edc0d77f21cf1f61ab78928f7df4a9fcb3","name":"pp.jpg","type":"image/jpeg","lastModified":1677750090753.572,"size":124776},{"id":"fffdb5b74fad8295cad277f8c48ab0ecf87b11b3469b406297de6b5454673463e264d0cb8b08d1ba2a44e390e9889b7e7e14f9e75ad624bb5ed1e26fddcd3203","href":"https://static.observableusercontent.com/files/fffdb5b74fad8295cad277f8c48ab0ecf87b11b3469b406297de6b5454673463e264d0cb8b08d1ba2a44e390e9889b7e7e14f9e75ad624bb5ed1e26fddcd3203","name":"all_data.csv","type":"text/csv","lastModified":1677750090753.572,"size":306190},{"id":"b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","href":"https://static.observableusercontent.com/files/b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","name":"50m.json","type":"application/json","lastModified":1677750090753.572,"size":747178}] 2d:{"title":"","cells":[{"id":1015,"value":"\n\n

Visualisation interactive de données

\"Évolution des émissions de dioxyde de carbone\"

Réaliser par : Manal Hachhach

Encadré par : Romain Vuillemot

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1146,"value":"

Qu'est-ce que le dioxyde de carbone et pourquoi est-il important de surveiller ses émissions ?

","pinned":false,"hidden":false,"mode":"html"},{"id":1155,"value":"FileAttachment(\"pt.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":1174,"value":"

Contexte du projet

","pinned":false,"hidden":false,"mode":"html"},{"id":1178,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":1186,"value":"pp = FileAttachment(\"pp.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"## Chargement le jeu de données","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"data=FileAttachment(\"all_data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"d3.pointer","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":308,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"function createPie(width, height) {\n var pie = d3.select(\"#pie\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n pie.append(\"g\")\n .attr(\"transform\", \"translate(\" + width / 2 + \", \" + (height / 2 + 10) + \")\")\n .classed(\"chart\", true);\n\n pie.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", \"1em\")\n .attr(\"font-size\", \"1.5em\")\n .style(\"text-anchor\", \"middle\")\n .classed(\"pie-title\", true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"function createMap(width, height) {\n d3.select(\"#map\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", \"1em\")\n .attr(\"font-size\", \"1.5em\")\n .style(\"text-anchor\", \"middle\")\n .classed(\"map-title\", true);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"function graphTitle(str) {\n return str.replace(/[A-Z]/g, c => \" \" + c.toLowerCase());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"function createBar(width, height) {\n var bar = d3.select(\"#bar\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n bar.append(\"g\")\n .classed(\"x-axis\", true);\n\n bar.append(\"g\")\n .classed(\"y-axis\", true);\n\n bar.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", - height / 2)\n .attr(\"dy\", \"1em\")\n .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"1em\")\n .classed(\"y-axis-label\", true);\n\n bar.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", \"1em\")\n .attr(\"font-size\", \"1.5em\")\n .style(\"text-anchor\", \"middle\")\n .classed(\"bar-title\", true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"\nfunction highlightBars(year) {\n d3.select(\"#bar\")\n .selectAll(\"rect\")\n .attr(\"fill\", d => d.year === year ? \"#16a085\" : \"#1abc9c\");\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"function getPercentage(d) {\n var angle = d.endAngle - d.startAngle;\n var fraction = 100 * angle / (Math.PI * 2);\n return fraction.toFixed(2) + \"%\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"function formatDataType(key) {\n return key[0].toUpperCase() + key.slice(1).replace(/[A-Z]/g, c => \" \" + c);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"{ \n var data = await d3.csv(\"https://raw.githubusercontent.com/Manal1Hachhach/visu/main/all_data.csv\");\n return data[0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"d3.json(\"https://unpkg.com/world-atlas@1.1.4/world/50m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"m = FileAttachment(\"50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"bannerHeight = 450 //320","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"import {bannerTitle} from \"@observablehq/banner\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1250,"value":"styles = html`\n `","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}

Emissions CO2

Emissions CO₂