Animated Histogram Gauge with Emojis

2c:null 2d:["$","title",null,{"children":"Global Temperature Trends | Marie-Anaïs | Observable"}] 32:T68f, Animated Histogram Gauge with Emojis

33:T570,data = { const data = []; //créaction d'un tableau vide pour stocker les données // https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv await d3.csvParse(await FileAttachment("temperatures.csv").text(), (d, i, columns) => { //On lit les données à partir du fichier "temperatures.csv" et on les analyse. La fonction de rappel est exécutée une fois pour chaque ligne du fichier CSV, avec les arguments d, i et columns. d représente les données pour chaque ligne, i représente l'index de la ligne et columns représente les noms des colonnes du fichier CSV. for (let i = 1; i < 13; ++i) { // on fait une boucle à travers chaque colonne correspondant à un mois dans le fichier CSV. La boucle commence à 1 car la première colonne est l'année. data.push({ // on ajoute un nouvel objet au tableau data pour chaque mois de chaque année. L'objet contient une paire clé-valeur représentant la date (calculée à partir de l'année et du mois) et la valeur de l'anomalie en °C. date: new Date(Date.UTC(d.Year, i - 1, 1)), // On crée un objet de date en utilisant l'année et le mois. Le mois est déduit de la variable i qui commence à 1 pour janvier, donc on soustrait 1 pour obtenir le mois correct. value: +d[columns[i]] // On ajoute la valeur de l'anomalie en °C }); } }); return data; }34:[{"id":"a6f8018172231770fcb74b515ac8f7d1e40f466f22190c2e89f7621087b4b02a21e5e9a7f20ccb9563055aa1ed16d95b448e7e6dc6d5e7bd096a72a4de0f002d","href":"https://static.observableusercontent.com/files/a6f8018172231770fcb74b515ac8f7d1e40f466f22190c2e89f7621087b4b02a21e5e9a7f20ccb9563055aa1ed16d95b448e7e6dc6d5e7bd096a72a4de0f002d","name":"temperatures.csv","type":"application/octet-stream","lastModified":1680350682536.067,"size":12009}] 30:{"id":"8425bc5e0f78d9e8","slug":null,"title":"Global Temperature Trends","thumbnail":"b32874f1794c919b2c5bcb6a73ac8b84d45f58455cdc67265cae584865844b0c","access_level":"public","create_time":"$D2023-04-01T12:04:42.536Z","update_time":"$D2023-04-01T12:08:34.159Z","view_time":null,"first_public_time":"$D2023-04-01T12:04:42.536Z","has_unpublished_edits":null,"fork":{"id":"3beb382164aead68","slug":null,"title":"Global Temperature Trends","owner":{"id":"04018bb5bd64908e","login":"marie-anais-verdin","name":"Marie-Anaïs"}},"stars":0,"starred":false,"owner":{"type":"team","id":"04018bb5bd64908e","login":"marie-anais-verdin","name":"Marie-Anaïs","avatar_url":"https://avatars-next.observableusercontent.com/26da28f31adc3cb76fd08da7051c23ffabf474b26a181378596992854538fbb8","tier":"starter_2024","bio":""},"version":226,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3ca2e8b0282ffd6","login":"marie-anais-verdin","name":"Marie-Anaïs","avatar_url":"https://avatars-next.observableusercontent.com/26da28f31adc3cb76fd08da7051c23ffabf474b26a181378596992854538fbb8","tier":null,"bio":""}],"members":[{"type":"individual","id":"e3ca2e8b0282ffd6","login":"marie-anais-verdin","name":"Marie-Anaïs","avatar_url":"https://avatars-next.observableusercontent.com/26da28f31adc3cb76fd08da7051c23ffabf474b26a181378596992854538fbb8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Global Temperature Trends","cells":[{"id":0,"value":"md`# Global Temperature Trends\n\n## Marie-Anaïs VERDIN & Gaulthier VOLAND\n\nInspiré du travail de Mike BOSTOCK : https://observablehq.com/@mbostock/global-temperature-trends\n\nBased on [How 2016 Became Earth’s Hottest Year on Record](https://www.nytimes.com/interactive/2017/01/18/science/earth/2016-hottest-year-on-record.html).\n\nSource: [NASA Goddard Institute for Space Studies](https://data.giss.nasa.gov/gistemp/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"L'objectif de cette page est de vous apprendre à (re)construire pas à pas le graphe de Mike Bostock, en y ajoutant quelques nouveautés.\n\n**Prérequis** nécessaires : \n- Les bases de d3.js (même si de nombreuses fonctionnalités seront rappelées)\n- De la motivation pour arriver au bout du projet\n- Une chaise longue sur un bord de plage ensoleillé 🏖️ (bon ok, pas forcément nécessaire mais pas inutile non plus)\n- Un second degré prononcé 😁","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.2)\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.date))\n .attr(\"cy\", d => y(d.value))\n .attr(\"fill\", d => z(d.value))\n .attr(\"r\", 2.5);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n const data = [];\n // https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv\n await d3.csvParse(await FileAttachment(\"temperatures.csv\").text(), (d, i, columns) => {\n for (let i = 1; i < 13; ++i) {\n data.push({\n date: new Date(Date.UTC(d.Year, i - 1, 1)),\n value: +d[columns[i]]\n });\n }\n });\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"{\n var values = Object.keys(data).map(function(key){\n return dictionary[key];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"z = {\n const max = d3.max(data, d => Math.abs(d.value));\n return d3.scaleSequential(d3.interpolateRdBu).domain([max, -max]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"+\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .filter(d => d === 0)\n .clone()\n .attr(\"x2\", width - margin.right - margin.left)\n .attr(\"stroke\", \"#ccc\"))\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", 5)\n .attr(\"y\", margin.top)\n .attr(\"dy\", \"0.32em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Anomaly (°C)\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"const config = {\n type: 'bar',\n data: data,\n options: {\n responsive: true,\n plugins: {\n legend: {\n position: 'top',\n },\n title: {\n display: true,\n text: 'Chart.js Bar Chart'\n }\n }\n },\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"### Quelles sont nos données pour ce graphique ?\n\nNous avons 1 644 observations de température globale de la NASA pour montrer les tendances de la température moyenne dans le monde du 1er janvier 1880 au 1er décembre 2016. \n\nLe graphique représente la date (abcisse) en fonction de l'anomalie °C (ordonnée). La moyenne des anomalies est représentée par une droite horizontale et représente le point de repère avec une anomalie de 0. Ainsi, les points se situant au dessus de 0 ont une température supérieure à la normale. Et inversement, les points se situant en dessous de 0 ont une température inférieure à la normale.\n\nNotre objectif est d'ajouter des interractions pour ...\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"---\n\n### I) Tutoriel pour construire le graphique\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"--- \n\n### a) Récupération des données \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"file = FileAttachment(\"temperatures.csv\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"\nNous allons construire un Array object pour stocker et manipuler des données. \nNotre but est d'avoir une valeur d'anomalie par date YYYY-MM-DD.\nComme dans nos données initiales nous avons une colonne \"Year\" et 12 autres colonnes avec la valeur de l'anomalie par mois, nous allons faire une boucle, nous permettant d'obtenir la valeur d'anomalie pour chaque mois de chaque année. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"--- \n\n### a) Dimensions et marges du graphique\n\nAvant toutes choses il faut définir les bases de notre graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"Nous allons fixer à 600 la hauteur de notre graphique. \n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"Nous allons ajouter des marges nous permettant de mettre des espaces autour du graphique, des titres et des légendes. Ainsi le graphique est plus aérer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"### b) Construction des axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"Nous allons créer l'axe suivant :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"X = {\n const image = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 20])\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(X => X.select(\".domain\").remove())\n return image.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"