Emissions D3

29:null 2a:["$","title",null,{"children":"Untitled | manal hachhach | Observable"}] 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:T5a6,

Le dashboard que on a réalisé a pour utilité de permettre à l'utilisateur de visualiser rapidement et facilement les tendances d'émission de dioxyde de carbone dans différents pays du monde. Les différents graphiques présentent des informations complémentaires pour donner une vue d'ensemble de l'évolution de ces émissions.

- La carte montre la répartition géographique des émissions de dioxyde de carbone dans le monde, permettant à l'utilisateur de voir rapidement quels sont les pays les plus émetteurs et comment ces émissions sont réparties sur le globe.
- Le graphique en barres permet à l'utilisateur de sélectionner un pays et de voir l'évolution de ses émissions de dioxyde de carbone au fil du temps. Cela permet de visualiser les tendances à long terme et de comparer les émissions de différents pays.
-Le graphique en circulaire montre la répartition des émissions totales par continent et région dans un année précis.

En résumé, le dashboard permet de synthétiser une grande quantité d'informations complexes et de les présenter de manière claire et facilement accessible, afin de faciliter la compréhension et l'analyse des tendances d'émissions de dioxyde de carbone dans le monde.

32:T7e8,

Nous avons envisagé d'intégrer des fonctionnalités interactives dans notre tableau de bord. Ces fonctionnalités d'interaction faciliteront la navigation et la personnalisation de l'affichage du tableau de bord pour les utilisateurs, en leur permettant de sélectionner les informations pertinentes en fonction de plusieurs dimensions d'étude telles que l'année, le pays , et la région...
-Selecteur des année: Dans toute les visualisations , si l'on choisit une année spécifique , le dashboard affichera les données correspondantes à cette période
-Tooltip: En ce qui concerne la carte, lorsque l'utilisateur sélectionne une année spécifique, La valeur des émissions de CO2 correspondantes pour chaque pays ou région sont affichées sous forme de couleurs ou de nuances différentes sur la carte. En plaçant le curseur de la souris sur une ville ou une région spécifique, une fenêtre contextuelle s'affiche, affichant les émissions de CO2 de cette pays ou région pour l'année sélectionnée. Cette fonctionnalité permet à l'utilisateur d'obtenir des informations plus détaillées sur les émissions de CO2 dans une zone géographique spécifique, contribuant ainsi à une compréhension plus approfondie de l'impact des émissions de CO2 sur l'environnement.
-Changement des couleurs :
-Dans la carte , Si on augmente la valeur de l'année dans le sélécteur , la couleur des quelques zone géographique pour des pays qui entrent dans les emissions de co2 s'affichent .
-Dans le pie chart , nous avons associer une couleur à chaque continent et à chaque région présent dans les données.
-Dans le diagramme à barre , à chaque élément sélectionné, qui vérifie si l'année de l'élément correspond à l'année donnée en paramètre. Si c'est le cas, elle change la couleur de remplissage de l'élément en bleu foncé, sinon elle utilise une couleur bleu plus clair

33:Tc83, Emissions D3

Emissions CO₂

Année en cours:

Emissions Emissions Par habitant

34:T15fe,/* Dans ce code j ai utilisé la méthode Promise.all() de JavaScript pour charger deux sources de données , le premier fichier c'est un fichier JSON contenant des données cartographiques (le fichier JSON contient les données géographiques utilisées pour dessiner la carte, telles que les coordonnées de chaque pays et de ses frontières. En utilisant d3.json() pour charger ce fichier dans notre script, nous pouvons facilement extraire ces données et les utiliser pour dessiner la carte.) et un fichier CSV contenant des données sur les émissions . Les données CSV sont transformées en un objet JavaScript avec des propriétés spécifiques et sont stockées dans la variable data. Une fois les données chargées, le code utilise les données pour créer une carte, un graphique à secteurs et un graphique à barres pour visualiser les émissions de gaz à effet de serre dans différents pays et régions au fil du temps. j'ai fait également des événements pour permettre à l'utilisateur de sélectionner une année et un type de données spécifique à afficher. So enfin, le code crée une infobulle (tooltip) qui affiche des informations détaillées sur les pays, régions et données affichées lorsque l'utilisateur passe la souris sur les éléments de la carte, des graphiques à secteurs ou des graphiques à barres. */ 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]) { /* j'ai utilisé les données récupérées précédemment à partir du fichier JSON et du fichier CSV pour créer différentes visualisations de données. Il commence par trouver les années les plus anciennes et les plus récentes dans les données et stocke la plus ancienne dans la variable currentYear. Ensuite, il utilise la méthode d3.select pour sélectionner l'élément HTML correspondant à la case à cocher radio pour le type de données sélectionné par user et stocke sa valeur dans la variable currentDataType. et les fonctions createMap, createPie et createBar sont appelées pour créer les différents types de visualisations, suivies des fonctions drawMap, drawPie et drawBar */ 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, ""); const tooltip = d3.select("body").append("div") .attr("class", "tooltip2") .style("position", "absolute") .text("I'm a MAP!"); 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("svg") .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" ? "milliers de tonnes métriques" : "milliers de tonnes métriques"; 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]; tooltip .style("opacity", +(isCountry || isArc || isBar)) .style("left", (d3.event.pageX - tooltip.node().offsetWidth / 2) + "px") .style("top", (d3.event.pageY - tooltip.node().offsetHeight - 10) + "px"); if (data) { var dataValue = data[dataType] ? data[dataType].toLocaleString() + " " + units : "Data Not Available"; tooltip .html(` Country: ${data.country}

${formatDataType(dataType)}: ${dataValue}

Year: ${data.year || d3.select("#year").property("value")}

${percentage} `); } } }) 35:Ta79,/* Cette fonction drawPie() dessine un graphique en forme de "pie chart" représentant les émissions totales de CO2 par continent et région pour une année donnée La fonction sélectionne l'élément HTML correspondant au graphique en utilisant la méthode d3.select(). Ensuite, j'ai utilise la méthode d3.pie() pour générer une structure de données pour les angles des secteurs du "pie chart" à partir des données d'émissions de CO2 par continent et région. La méthode d3.arc() est utilisée pour créer une fonction qui génère les chemins SVG pour chaque secteur du graphique. La fonction sélectionne les données d'émissions de CO2 pour l'année donnée à l'aide de la méthode data.filter(). Ensuite, elle crée une liste des continents présents dans les données pour cette année. Elle crée une échelle de couleurs (colorScale) en utilisant la méthode d3.scaleOrdinal() pour associer une couleur à chaque continent présent dans les données. La fonction met à jour les éléments SVG correspondant à chaque secteur du graphique en utilisant les données générées par la méthode d3.pie(), en ajoutant les nouveaux éléments SVG nécessaires avec la méthode enter() et en retirant les éléments inutiles avec la méthode exit(). */ 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(["#853CF5", "#380881", "#6500FF", "#0C00FF", "#00B9FF"]); 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); } 36:Td89,/*La fonction définit une projection géographique utilisant la méthode d3.geoMercator(). Elle définit également une variable "path" utilisant la méthode d3.geoPath() pour dessiner les chemins des pays sur la carte. Ensuite, elle boucle à travers chaque objet dans les données géographiques. Si des données sont trouvées, elles sont stockées dans la propriété "properties" de l'objet géographique. Si aucune donnée n'est trouvée, la propriété "properties" stocke simplement le nom du pays. La fonction sélectionne tous les éléments avec la classe "country" (pays) sur la carte et les associe aux données géographiques. Si des nouveaux pays sont ajoutés, ils seront créés en tant que nouveaux éléments "path". Chaque élément "path" est défini avec une classe "country", un attribut "d" contenant les coordonnées pour dessiner le pays sur la carte, et un événement "click" qui déclenche la fonction drawBar() avec les données climatiques correspondantes pour le pays sélectionné. La fonction drawMap() met également à jour l'état de la classe "active" pour chaque pays afin de maintenir un seul pays sélectionné à la fois. Enfin, la fonction met à jour la couleur de chaque pays sur la carte en fonction des données de la propriété "properties" et du type de données sélectionné. Elle définit également le texte de la classe "map-title" pour afficher l'année sélectionnée et le type de données. */ function drawMap(geoData, climateData, year, dataType) { var map = d3.select("#map"); var projection = d3.geoMercator() .scale(190) .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 = ["#AED6F1", "#0398FE", "#1671AF", "#094671"]; 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("Année " +year +":"+" Dioxyde de carbone " + graphTitle(dataType)); } 37:Te74,/*la fonction dessine un graphique à barres pour les émissions de CO2 d'un pays donné sur une période de temps donnée. La fonction prend en entrée les données, le type de données (émissions totales ou émissions par habitant) et le pays pour lequel le graphique doit être dessiné. Ensuite, la fonction crée une échelle linéaire pour l'axe x (l'année) en utilisant la fonction d3.scaleLinear(). L'échelle utilise les valeurs minimales et maximales de l'année dans les données pour définir le domaine de l'échelle et la largeur et le rembourrage pour définir la plage de l'échelle. La fonction crée également une échelle linéaire pour l'axe y (les émissions de CO2) en utilisant la fonction d3.scaleLinear(). L'échelle utilise la valeur maximale des émissions pour le pays spécifié pour définir le domaine de l'échelle et la hauteur et le rembourrage pour définir la plage de l'échelle. La fonction crée également un axe x en utilisant la fonction d3.axisBottom() et un axe y en utilisant la fonction d3.axisLeft(). Les fonctions d3.select() et d3.transition() sont utilisées pour sélectionner les éléments d'axe correspondants et les mettre à jour avec les nouvelles échelles et formats d'axe. La fonction utilise également les données de type de données pour mettre à jour le label d'axe correspondant. */ 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 ? "Les émissions de CO2, " + country : "Cliquez sur un pays pour voir les tendances annuelles "; 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])); }38:[{"id":"4cabdac5465c137be559b110946892226c1e1be74f487cf2b66f465a518cec327e87d3bd5c310b044c2acfbac1d38563c4aae3db84dc5afa35b41246ff5b9393","href":"https://static.observableusercontent.com/files/4cabdac5465c137be559b110946892226c1e1be74f487cf2b66f465a518cec327e87d3bd5c310b044c2acfbac1d38563c4aae3db84dc5afa35b41246ff5b9393","name":"pt.png","type":"image/jpeg","lastModified":1677936108961.339,"size":64145},{"id":"7c08bc83ca9351abf6c5fb57ae611dadc5c88adeafe6deea63342453771a9ff5d4ebbf8924508b586c4a53406e27f7edc0d77f21cf1f61ab78928f7df4a9fcb3","href":"https://static.observableusercontent.com/files/7c08bc83ca9351abf6c5fb57ae611dadc5c88adeafe6deea63342453771a9ff5d4ebbf8924508b586c4a53406e27f7edc0d77f21cf1f61ab78928f7df4a9fcb3","name":"pp.jpg","type":"image/jpeg","lastModified":1677936108961.339,"size":124776},{"id":"b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","href":"https://static.observableusercontent.com/files/b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","name":"50m.json","type":"application/json","lastModified":1677936108961.339,"size":747178},{"id":"59647809de3474766fa47e79dbf4b26d5b08531e056fffdc1a45e6bfa6388e044ae700aa08c68780f6823732b269ffd71c26e14fc1b699476967d15728afc009","href":"https://static.observableusercontent.com/files/59647809de3474766fa47e79dbf4b26d5b08531e056fffdc1a45e6bfa6388e044ae700aa08c68780f6823732b269ffd71c26e14fc1b699476967d15728afc009","name":"WhatsApp Image 2023-03-04 at 18.20.31.jpeg","type":"image/jpeg","lastModified":1677950456839.582,"size":112813},{"id":"8f057fa167d69463d18d59b2716030420ea65b7c0623e4b8ba3d3f48f88dec0137c957eb7acabffa46ef52d537e327232849ffa9dc460ef5328ea2b9168b03af","href":"https://static.observableusercontent.com/files/8f057fa167d69463d18d59b2716030420ea65b7c0623e4b8ba3d3f48f88dec0137c957eb7acabffa46ef52d537e327232849ffa9dc460ef5328ea2b9168b03af","name":"data.csv","type":"text/csv","lastModified":1677952475397.55,"size":302255},{"id":"1e7d4b4c85aea538ab5bd9be909c13c234aec304bc6d44e84edc6c3adec424fa5dc0320eb55e079c3ccc62ff670ea93bdae287ce93532a8fdb78126043039e6f","href":"https://static.observableusercontent.com/files/1e7d4b4c85aea538ab5bd9be909c13c234aec304bc6d44e84edc6c3adec424fa5dc0320eb55e079c3ccc62ff670ea93bdae287ce93532a8fdb78126043039e6f","name":"i1.png","type":"image/jpeg","lastModified":1678636808607.471,"size":353740}] 2d:{"id":"35400db82abfc1c5","slug":null,"title":"","thumbnail":"effa9da6e827b448941e1d9f01f2c85c7e284d51122285490b7180a2e1162e8a","access_level":"public","create_time":"$D2023-03-04T13:21:48.961Z","update_time":"$D2023-03-12T16:13:39.462Z","view_time":null,"first_public_time":"$D2023-03-04T13:21:48.961Z","fork":{"id":"8f8551b19f77bfdd","slug":null,"title":"","owner":{"id":"166bf1386c9e3314","login":"manalhach12345","name":"manal hachhach "}},"stars":0,"starred":false,"owner":{"type":"team","id":"166bf1386c9e3314","login":"manalhach12345","name":"manal hachhach ","avatar_url":"https://avatars-next.observableusercontent.com/d1339952d46c49e29da257ba58752a6828d36f1e149d78bdf2bcb7d710a54945","tier":"starter_2024"},"version":1712,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8f1d85f4db3993a7","login":"manalhach12345","name":"manal hachhach ","avatar_url":"https://avatars-next.observableusercontent.com/d1339952d46c49e29da257ba58752a6828d36f1e149d78bdf2bcb7d710a54945","tier":null}],"members":[{"type":"individual","id":"8f1d85f4db3993a7","login":"manalhach12345","name":"manal hachhach ","avatar_url":"https://avatars-next.observableusercontent.com/d1339952d46c49e29da257ba58752a6828d36f1e149d78bdf2bcb7d710a54945","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":1015,"value":"\n\n

Visualisation interactive de données

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

Réaliser par : Manal Hachhach , Youness Yamini

Encadré par : Romain Vuillemot

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1155,"value":"FileAttachment(\"pt.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1174,"value":"

Contexte du projet

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1494,"value":"

Utilités du Dashboard réalisé

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1496,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1506,"value":"

Intéraction

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1508,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1186,"value":"pp = FileAttachment(\"pp.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1487,"value":"

Prototypage Papier

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1685,"value":"i1 = FileAttachment(\"i1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"

Chargement le jeu de données

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"data=FileAttachment(\"data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1480,"value":"

Résultat final du Projet

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":352,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1550,"value":"

Le Code

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"/*j'ai fait cettee fonction pour créer un conteneur SVG pour le graphique circulaire et ajoute un élément qui sera utilisé pour dessiner le graphique. Elle ajoute également un titre pour le graphique circulaire */\n\nfunction 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\", \"2em\")\n .attr(\"font-size\", \"1.5em\")\n .style(\"text-anchor\", \"middle\")\n .classed(\"pie-title\", true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"/*j'ai crée cette fonction createMap pour créer un élément svg avec une largeur et une hauteur spécifiées et ajoute un élément text pour afficher le titre de la carte */\n 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","author":"$undefined","summary":"$undefined"},{"id":264,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"/*La fonction graphTitle prend en entrée une chaîne de caractères et renvoie une version formatée de cette chaîne, où chaque lettre majuscule est remplacée par un espace suivi de la lettre en minuscule correspondante. Par exemple, si l'entrée est \"emissionsPerCapita\", la sortie sera \"emissions per capita\" */\nfunction graphTitle(str) {\n return str.replace(/[A-Z]/g, c => \" \" + c.toLowerCase());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"/* Cette fonction crée un élément SVG représentant un diagramme à barres */\nfunction 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","author":"$undefined","summary":"$undefined"},{"id":278,"value":"/* Cette fonction a pour but de mettre en évidence les barres du graphique qui correspondent à une année donnée. Elle prend en paramètre l'année à mettre en évidence et utilise la méthode d3.select pour sélectionner l'élément SVG avec l'id \"bar\". Elle utilise ensuite la méthode selectAll pour sélectionner tous les éléments \"rect\" ( Les éléments ont des attributs tels que x, y, width, height, fill, ext...)à l'intérieur de cet élément SVG. Elle applique ensuite une fonction à chaque élément sélectionné, qui vérifie si l'année de l'élément correspond à l'année donnée en paramètre. Si c'est le cas, elle change la couleur de remplissage de l'élément en bleu foncé, sinon elle utilise une couleur bleu plus clair.*/\n\nfunction highlightBars(year) {\n d3.select(\"#bar\")\n .selectAll(\"rect\")\n .attr(\"fill\", d => d.year === year ? \"#5555E7\":\"#3131B9\");\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":771,"value":"/* La fonction \"getPercentage()\" est utilisée pour calculer le pourcentage de l'angle d'un secteur d'un graphique\nle pourcentage est égal à l'angle (en radians) divisé par 2 fois pi, multiplié par 100. Le résultat est renvoyé en tant que chaîne de caractères avec deux décimales après la virgule et le symbole % */\nfunction 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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1281,"value":" html`\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":380,"value":"d3.json(\"https://unpkg.com/world-atlas@1.1.4/world/50m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"m = FileAttachment(\"50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":984,"value":"bannerHeight = 450 //320","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"import {bannerTitle} from \"@observablehq/banner\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Emissions CO2

Emissions CO₂