2c:null 2d:["$","title",null,{"children":"Global Temperature Trends | Oriane Foussard | Observable"}] 32:[{"id":"a6f8018172231770fcb74b515ac8f7d1e40f466f22190c2e89f7621087b4b02a21e5e9a7f20ccb9563055aa1ed16d95b448e7e6dc6d5e7bd096a72a4de0f002d","href":"https://static.observableusercontent.com/files/a6f8018172231770fcb74b515ac8f7d1e40f466f22190c2e89f7621087b4b02a21e5e9a7f20ccb9563055aa1ed16d95b448e7e6dc6d5e7bd096a72a4de0f002d","name":"temperatures.csv","type":"application/octet-stream","lastModified":1648482572145.227,"size":12009}] 30:{"id":"4f929e7d831f29f9","slug":"global-temperature-trends","title":"Global Temperature Trends","thumbnail":"91159b34ba4a5a24b8f4f41da4f895b031d32cc2b111c4ee6394f4efb290bb8e","access_level":"public","create_time":"$D2022-03-28T15:49:32.145Z","update_time":"$D2022-04-03T19:21:00.871Z","view_time":null,"first_public_time":"$D2022-04-01T21:41:19.359Z","has_unpublished_edits":null,"fork":{"id":"6385515f0d4f42bd","slug":"global-temperature-trends","title":"Global temperature trends","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f05dc05ce95c3b8e","login":"a33f03b0b2ae65b2","name":"Oriane Foussard","avatar_url":"https://avatars-next.observableusercontent.com/bedd86ad92d64cb183cdf22528f92afc3a0a3dd70eb6e6588255733e90ea66a5","tier":"starter_2024","bio":""},"version":697,"publish_version":697,"role":null,"authored":false,"authors":[{"type":"individual","id":"a33f03b0b2ae65b2","login":"a33f03b0b2ae65b2","name":"Oriane Foussard","avatar_url":"https://avatars-next.observableusercontent.com/bedd86ad92d64cb183cdf22528f92afc3a0a3dd70eb6e6588255733e90ea66a5","tier":null,"bio":""}],"members":[{"type":"individual","id":"a33f03b0b2ae65b2","login":"a33f03b0b2ae65b2","name":"Oriane Foussard","avatar_url":"https://avatars-next.observableusercontent.com/bedd86ad92d64cb183cdf22528f92afc3a0a3dd70eb6e6588255733e90ea66a5","tier":null,"role":"editor"},{"type":"individual","id":"eb6fd857aab4ec54","login":"lpbb","name":"","avatar_url":null,"tier":null,"role":"editor"},{"type":"individual","id":"4d4c5c8189256d04","login":"lpbbddql","name":"","avatar_url":"https://avatars.githubusercontent.com/u/101816139?v=4","tier":null,"role":"editor"},{"type":"individual","id":"ab63b82d4c8a567d","login":"katossky","name":"Arthur Katossky","avatar_url":"https://avatars-next.observableusercontent.com/45606ca1d18c5a01525b61fe1fbb092eb3a22ac06d332c50e976fc835d9336aa","tier":null,"role":"viewer"}],"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\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":469,"value":"md `\nOriane Foussard et Louis Perraud vous présentent ici leur tutoriel pour réaliser le graphique [Global Temperature Trends](https://observablehq.com/@mbostock/global-temperature-trends) de Mike Bostock. Ce graphique représente l'augmentation des températures anormales entre 1980 et 2016. De plus, nous prosons l'ajout d'une animation consistant à afficher les données au fil du temps sur une periode voulu et ajouter une coubre de régression. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md `## Objectif et programme 🤓\n\n1. Définir le contour du graphique\n2. Construire le graphique\n3. Mettre de l'intéraction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"## Importation des données 📊\n\nLa première étape est le chargement des données, pour cela on récupère les données sur le site de la [NASA]('https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv').\n\nLe tableau de données est une liste d'objets contenant la date où les températures ont été pris ainsi que la moyenne global anomalies de températures. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"Pour accéder à la date du deuxième observation de la base de données, il suffit de faire `data[2].date` .","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"md `\n➡️ Amusez vous à appeler l'autre attribut des autres observattions, en modifiant la ligne de code ci-dessous.\n(_ l'autre attribut est \\`value\\` _)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"data[1643].date","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md `\n## Échelles et Axe 🪜\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md `\nPour commencer à faire un graphique, il faut definir la hauteur et la largeur du graphique. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md `\n➡️ Vous pouvez changer la taille du graphique en modifiant seulement les paramètres \\`width\\` pour la largeur, et \\`height\\` pour la hauteur. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"width = 1000","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":203,"value":"md `\nOn définit maintenant la taille des marges de notre graphe, c'est à dire l'espace blanc entre où sont placé les points et où commence l'espace réservé au graphique. Dans cette espace, on y place notament l'échelle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md `\n➡️ Regarder l'effet de faire passer l'attribut \\`left\\` de \\`margin\\` de 40 à 10\n`","pinned":false,"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":294,"value":"md`#### Construction de l'axe x 📏`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md `\nNous voulons maintenant définir un mappage qui calcul la position de x pour chaque date possible, c'est possible grâce à la fonction \\`d3.scaleUtc()\\`. Pour cela, il suffit de préciser le domaine avec le paramètre \\`domain\\` (la valeur maximum et minimum pour les dates du jeu de donnée) et la gamme de l'axe des x avec le paramètre \\`range\\` (le plus petit et le plus grand x sur le graphique).\n`","pinned":false,"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)) // extend renvoie le min et le max de data\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":311,"value":"md `\nNous allons maintenant construitre l'axe des abscisses. Pour cela nous allons utiliser la fonction de mappage \\`x()\\` à l'interieur de la fonction \\`d3.axisBottom()\\` qui construira l'axe des x.\n`","pinned":false,"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})`) // ici on indique que l'axe sera placé en bas\n .call(d3.axisBottom(x).ticks(width / 80)) // call permet d'appeler la fonction xAxis sur les éléments de g \n // ticks permet de spécifier le nombre de graduations\n .call(g => g.select(\".domain\").remove()) // ici on supprime l'axe des abscisses","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md `\n➡️ Vous pouvez décider de placer les legendes de l'axe au dessus avec la fonction \\`axisTOp()\\` mais aussi de placé l'échelle en haut du graphie en modifiant les paramètre de l'attribut \\` \"transform\" \\`. (_ Pensez à \\`margin.top\\` _)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`#### Construction de l'axe y`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md `\nIdem pour l'axe y. \n`","pinned":false,"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":57,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"+\")) // l'argument null indique que l'on veut une graduation par défault\n .call(g => g.select(\".domain\").remove())\n\n // On ajoute la ligne horizontale y= 0\n .call(g => g.selectAll(\".tick line\")\n .filter(d => d === 0) // placé en y=0\n .clone()\n .attr(\"x2\", width - margin.right - margin.left) // longeur de la droite (sur tout le graphique)\n .attr(\"stroke\", \"#ccc\")) // couleur de la droite\n \n // On ajoute la légende de l'axe.\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\") // on crée donc un objet text que l'on ajoute\n .attr(\"x\", 5) // ------|\n .attr(\"y\", margin.top) // | On place le texte\n .attr(\"dy\", \"0.32em\") // | à l'endroit souhaité \n .attr(\"text-anchor\", \"start\")// --|\n .attr(\"font-weight\", \"bold\") // on fait apparaître le texte en gras\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":307,"value":"md`#### Premiers résultats `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`\nPour verifier le bon fonctionnement de nos fonctions, on appelle ces dernières après avoir definit le format du graphique.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"chart1 = {\n const svg = d3.create(\"svg\") // On crée notre objet\n .attr(\"viewBox\", [0, 0, width, height]); // on renseigne les attributs de notre graphique. Ici, une boîte aux dimensions definies précédemment.\n\n svg.append(\"g\")\n .call(xAxis); // On ajoute nos axes en appelant la fonction\n\n svg.append(\"g\")\n .call(yAxis); // idem pour l'axe y\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":373,"value":"md `\n## Construction du graphique\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`#### Definition de la couleur des points `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`Pour rendre le graphique plus lisible, l'auteur original à colorier les points en fonction de la valeur de l'anomalie.\nLes températures froides sont associées à la couleur bleu 🥶 et les températures chaudes à la couleur rouge 🥵.`","pinned":false,"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)); // On récupère l'étendue des valeurs des anomalies\n return d3.scaleSequential(d3.interpolateRdBu).domain([max, -max]); // On renvoit un dégradé allant du rouge au bleu\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`#### Ajout des points `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`On ajoute un objet g supplémentaire pour faire apparaître les points sur le graphique. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"chart2 = {\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\") // ajoute un élément de groupe SVG au svg\n .attr(\"stroke\", \"#000\") // couleur des contours\n .attr(\"stroke-opacity\", 0.2)// opacité des contours\n \n // On récupère les données \n .selectAll(\"circle\") \n .data(data)\n .join(\"circle\") // \n \n // pour chaque donnée on ajoute sur le graphe un cercle\n .attr(\"cx\", d => x(d.date)) // position x du cercle\n .attr(\"cy\", d => y(d.value)) // position y du cercle\n .attr(\"fill\", d => z(d.value)) // couleur du cercle\n .attr(\"r\", 2.5); // le rayon du cercle à 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":501,"value":"md `\n## Ajout de la courbe de regression⚖️\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md `\nOn utilise ici la fonction \\`d3.regressionLoess()\\` pour effectuer un regrssion loess sur nos données.\nLe seule attribut utilisé ici est \\`.bandwidth()\\` qui permettre de choisir la sensibilité de notre régression.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md `\nLe seule attribut utilisé ici est \\`.bandwidth()\\` qui permettre de choisir la sensibilité de notre régression.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md `\n➡️ Amusez vous à changer sa valeur dans le code si dessous et voir les effets. \n(_ Essayez par exemple \\`0.8\\` et \\`0.05\\` _)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"regression_test = d3.regressionLoess()\n .x(d => d.date) // On renseigne ici les deux paramètres de notre regression.\n .y(d => d.value)\n .bandwidth(0.2); // Changez la valeur ici ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`\nLa fonction \\`d3.regressionLoess()\\` renvoyant un tableau, on utilise \\`d3.line()\\` pour afficher la courbe de régression sur le graphe.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"line_test = d3.line() \n .x(d => x1(d[0])) // on récupère les valeurs et on les affiches à l'aide des fonctions x et y.\n .y(d => y1(d[1]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"chart3 = {\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 \n // Code ajouter pour faire apparaître la regression\n svg.append(\"path\") \n .datum(regression_test(data)) // on applique la regression au données\n .style(\"fill\", \"none\") // on choisit ensuite le style de notre droite\n .style(\"stroke\", \"grey\")\n .attr(\"d\", line_test); // on affiche la droite en utilisant la fonction line_test\n\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":404,"value":"md `\n## Ajout de l'animation 📈\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md `\nNous souhaitons maintenant que les points du graphique apparaissent au fur et à mesure selon leur date. Pour cela nous allons créer un objet permettant de contrôler les données affichées sur le graphique.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`#### Parcour des dates 📅` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md `\nOn fait donc appel à la fonction Scrubber pour créer un curseur parcourant l'ensemble des dates présentes dans les données.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md `\nOn peut chosir plusieurs paramètres de notre curseur. \n* On peut changer sa vitesse en changeant la valeur de \\`every()\\` \n* Vous pouvez choisir si le curseur effectue une boucle ou non en modifiant l'attribut \\`loop:\\`\n\n➡️ Amusez vous à changer sa valeur dans le code si dessous et voir les effets. \n(_ Essayez par exemple \\`every(100)\\` et \\`loop: true\\` _) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"viewof date_test = Scrubber(d3.utcWeek.every(20).range(...d3.extent(data, d => d.date)), // on renseigne ici les dates sélectionnées ainsi que la vitesse du curseur \n {format: d3.utcFormat(\"%Y %b %-d\"), // On indique le format des dates\n loop: CSSFontPaletteValuesRule}) // Le curseur peut tourner en boucle au choix ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`#### Selection des données `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md `\nIl suffit maintenant de filtrer les données et sélectionner uniquement les dates inférieures à la date de notre curseur. \nOn utilise pour cela la fonction \\`.filter()\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof date_test2 = Scrubber(d3.utcWeek.every(20).range(...d3.extent(data, d => d.date)), // on renseigne ici les dates sélectionnées ainsi que la vitesse du curseur \n {format: d3.utcFormat(\"%Y %b %-d\"), // On indique le format des dates\n loop: CSSFontPaletteValuesRule}) // Le curseur peut tourner en boucle au choix ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md `\nOn peut clairement voir le tableau se remplir en même temps que le curseur avance !!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"data_test = data.filter(d => new Date(d.date) <= new Date(date_test2) ) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`#### Dernière ligne droite !🤠 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`\n Pour finaliser la construction du graphique, il est nécessaire de redéfinir les fonctions de construction des axes et de la courbe de régression en utilisant uniquement les données filtrées selon la date. \nOn reprend donc le code précédent en remplaçant \\`data\\` par \n\\`data.filter(d => new Date(d.date) <= new Date(curseur) )\\` \noú \\`curseur\\` est notre curseur.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"regression = d3.regressionLoess()\n .x(d => d.date)\n .y(d => d.value)\n .bandwidth(0.4);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"line = d3.line()\n .x(d => x1(d[0]))\n .y(d => y1(d[1]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"x1 = d3.scaleUtc()\n .domain(d3.extent(data.filter(d => new Date(d.date)<= new Date(curseur)), d => d.date)) // ici\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"y1 = d3.scaleLinear()\n .domain(d3.extent(data.filter(d => new Date(d.date)<= new Date(curseur)), d => d.value)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"z1 = {\n const max = d3.max(data.filter(d => new Date(d.date)<= new Date(curseur)), d => Math.abs(d.value));\n return d3.scaleSequential(d3.interpolateRdBu).domain([max, -max]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"x1Axis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x1).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"y1Axis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y1).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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"md `\n## Le graphique final !🤩\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"md`On peut donc utiliser le curseur pour lancer ou arrêter l'animation !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof curseur = Scrubber(d3.utcWeek.every(20).range(...d3.extent(data, d => d.date)), {format: d3.utcFormat(\"%Y %b %-d\"), loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"chartfinal = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(x1Axis); // On appelle les fonctions que l'on vient de définir \n\n svg.append(\"g\")\n .call(y1Axis);\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 .filter(d => new Date(d.date)<= new Date(curseur)) // On filtre les données comme expliqué\n .attr(\"cx\", d => x1(d.date))\n .attr(\"cy\", d => y1(d.value))\n .attr(\"fill\", d => z1(d.value))\n .attr(\"r\", 2.5)\n ;\n \n svg.append(\"path\")\n .datum(regression(data.filter(d => new Date(d.date)<= new Date(curseur)))) // idem ici\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"grey\")\n .attr(\"d\", line);\n\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":175,"value":"md `\n# Appendix \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"d3 = require(\"d3@6\",\"d3-regression@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import {toggle, pin, video, key, signinNote, seriesNavigation} from \"6a6d6989dd6b59c6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"