2c:null 2d:["$","title",null,{"children":"DM 2 DATAVISUALISATION | Apolline | Observable"}] 32:T6ec,Apolline Guérineau - Lucas Henrio
Ce notebook a pour objectif d'expliquer la création d'un graphique avec une interaction.
Le projet de départ est celui de Mike Bostock que l'on retrouve à l'adresse suivante : https://observablehq.com/@mbostock/inequality-in-american-cities Il consiste à représenter sur un même graphique l'évolution de la population et d'un indicateur d'inégalité entre 1980 et 2015, pour chaque région métropolitaines des États-Unis. Ce graphique permet de bien visualiser l'évolution de ces deux variables à travers le temps pour les villes à forte population puisqu'elles sont isolées dans le graphique et donc facilement distinguables. À l'inverse, pour les villes de tailles moyennes, les flèches s'entrecoupent énormément et font perdre de l'information en rendant le graphique moins lisible.
Une amélioration envisageable est celle d'ajouter de l'interaction au graphique en proposant à l'utilisateur de ne sélectionner que les villes et l'année qui l'intéressent pour que le graphique final soit plus lisible et donc informatif. Pour ce faire, nous réalisons deux graphiques qui se veulent être complémentaires. Le premier graphique se focalisera sur la comparaison entre les villes. Il mettra en avant les villes sélectionnées pour l'année considérée tout en laissant possible la comparaison avec les autres villes non sélectionnées. Par rapport au graphique initial, il gagne en clarté mais perd en information concernant l'évolution des variables à travers le temps. Ainsi, le second graphique se focalisera sur l'aspect évolutif des données. Dans ce dernier, seules les villes sélectionnées seront visibles et l'évolution de leurs variables au cours du temps sera représenté. 33:T72a,graphique = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // on crée le svg et la fenêtre où il va apparaître const points = svg.append("g") .selectAll("circle") .data(data) .join("circle") // pour chaque ville on crée un cercle de coordonnées (cx, cy) avec cx la taille de la pop et cy les revenus .attr("r", d => circle_size(is_in_villes(d))) .attr("cx", d => x(d.POP_1980)) .attr("cy", d => y(d.R90_10_1980)) .attr("fill", d => circle_fill(is_in_villes(d))) .call(circle => circle.append("title") //ajout d'un texte pour chaque cercle .text(d => [d.nyt_display, d.state_display].join("\n"))); //le texte est composé du nom du pays et de sa région d'appartenance; const names = svg.append("g") .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .attr("paint-order", "stroke fill") .selectAll("text") .data(data.filter(d => is_in_villes(d))) .join("text") .attr("dy", "1.2em") .attr("x", d => x(d.POP_1980)) .attr("y", d => y(d.R90_10_1980)) .text(d => d.nyt_display); svg.append("g") .call(grid); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return Object.assign(svg.node(), { update(year) { const t = svg.transition() .duration(750); points.transition(t) .attr("cx", d => x(d[`POP_${year}`])) .attr("cy", d => y(d[`R90_10_${year}`])); names.transition(t) .attr("x", d => x(d[`POP_${year}`])) .attr("y", d => y(d[`R90_10_${year}`])); } }); return svg.node(); }34:Tba0,graphique_2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // on crée le svg et la fenêtre où il va apparaître const points = svg.append("g") .selectAll("circle") .data(data.filter(d => is_in_villes_2(d))) .join("circle") // pour chaque ville on crée un cercle de coordonnées (cx, cy) avec cx la taille de la pop et cy les revenus .attr("r", d => circle_size(is_in_villes_2(d))) .attr("cx", d => x(d.POP_1980)) .attr("cy", d => y(d.R90_10_1980)) .attr("fill", d => circle_fill(is_in_villes_2(d))) .call(circle => circle.append("title") // Ajout d'un texte pour chaque cercle. .text(d => [d.nyt_display, d.state_display].join("\n")));// Le texte est composé du nom du pays et de sa région d'appartenance; const arrows = svg.append("g") .selectAll("path") .data(data.filter(d => is_in_villes_2(d))) // Que pour les villes sélectionnées. .join("path") .attr("fill", "none") .attr("stroke", "black") // Couleur de la flèche. .attr("stroke-width", 1) // Largeur de la flèche. .attr("d", d => { // Indique comment tracer la flèche (à partir des coordonnées de 1980 et celles de 2015). if (year_2 == "2015") { // Pour n'afficher les flèches que lorsque l'année 2015 est sélectionnée. // Coordonnées de la flèche : const x0 = x(d.POP_1980); const y0 = y(d.R90_10_1980); const x1 = x(d.POP_2015); const y1 = y(d.R90_10_2015); return `M ${x0},${y0} L ${x1},${y1}`; // M pour "move to" qui indique le point de départ du tracé. L pour "line to" qui trace la droite jusqu'au point indiqué. } else { return ""; // Retourne une chaîne vide si l'année n'est pas 2015 } }); // Affiche le nom des villes const names = svg.append("g") .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .attr("paint-order", "stroke fill") .selectAll("text") .data(data.filter(d => is_in_villes_2(d))) .join("text") .attr("dy", "1.2em") .attr("x", d => x(d.POP_1980)) .attr("y", d => y(d.R90_10_1980)) .text(d => d.nyt_display); svg.append("g") .call(grid); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return Object.assign(svg.node(), { update(year) { const t = svg.transition() .duration(750); points.transition(t) // Transition sur les points .attr("cx", d => x(d[`POP_${year_2}`])) .attr("cy", d => y(d[`R90_10_${year_2}`])); names.transition(t) // Transition sur les noms .attr("x", d => x(d[`POP_${year_2}`])) .attr("y", d => y(d[`R90_10_${year_2}`])); } }); return svg.node(); }35:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1678199601425.717,"size":15389}] 30:{"id":"fe03c168e32f3646","slug":null,"title":"DM 2 DATAVISUALISATION","thumbnail":"1954191717a849564cdccc2d4e672029006ae42c638ea7119ea54ad3092dd127","access_level":"public","create_time":"$D2023-03-07T14:33:21.425Z","update_time":"$D2023-03-29T13:19:27.766Z","view_time":null,"first_public_time":"$D2023-03-07T14:33:21.425Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a65383dd2afdb861","login":"apolline","name":"Apolline","avatar_url":"https://avatars-next.observableusercontent.com/4b84bd1c5c99fcc2d29d0eafc0753bded30351410ef03886b611424af3458d2d","tier":"starter_2024","bio":""},"version":435,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9452344cbc627004","login":"apolline","name":"Apolline","avatar_url":"https://avatars-next.observableusercontent.com/4b84bd1c5c99fcc2d29d0eafc0753bded30351410ef03886b611424af3458d2d","tier":null,"bio":""}],"members":[{"type":"individual","id":"9452344cbc627004","login":"apolline","name":"Apolline","avatar_url":"https://avatars-next.observableusercontent.com/4b84bd1c5c99fcc2d29d0eafc0753bded30351410ef03886b611424af3458d2d","tier":null,"role":"editor"},{"type":"individual","id":"37fa07b9a79e9a06","login":"lucashnr","name":"Lucas Henrio","avatar_url":"https://avatars-next.observableusercontent.com/bb14ccce353f5179ee04603be9238f8225908c8faa211dfb96bc93418084f4f6","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":"DM 2 DATAVISUALISATION","cells":[{"id":0,"value":"# DM 2 DATAVISUALISATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Les données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"metros.csv\").text(), d3.autoType), {\n x: \"Population →\",\n y: \"↑ Inequality\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data est un array d'objets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"Voici une brève explication de chaque variable du jeu de données :\n\nMetro : le nom de la région métropolitaine.
\n\nPOP_1980 : la population totale de la région en 1980.
\n\nLPOP_1980 : le pourcentage de la population de la région vivant en dessous du seuil de pauvreté en 1980.
\n\nR90_10_1980 : le rapport entre le revenu moyen des 10% les plus riches et celui des 10% les plus pauvres en 1980.
\n\nPOP_2015 : la population totale de la région en 2015.
\n\nLPOP_2015 : le pourcentage de la population de la région vivant en dessous du seuil de pauvreté en 2015.
\n\nR90_10_2015 : le rapport entre le revenu moyen des 10% les plus riches et celui des 10% les plus pauvres en 2015.
\n\nnyt_display : le nom de la ville associée à la région métropolitaine.
\n\nstate_display : l'état associé à la région métropolitaine.
\n\nhighlight : un indicateur binaire indiquant si cette observation doit être mise en évidence ou non dans une visualisation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"data[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Import et constantes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"margin = ({top: 24, right: 10, bottom: 34, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function padLinear([x0, x1], k) {\n const dx = (x1 - x0) * k / 2;\n return [x0 - dx, x1 + dx];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"La méthode \"padLinear((x,y) , k)\" permet d'ajouter k/2 % espace de chaque côté du graphique. Cela permettra de mieux visualiser les données situées en bord de graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"function padLog(x, k) {\n return padLinear(x.map(Math.log), k).map(Math.exp);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"La méthode \"padLog((x,y) , k)\" permet d'ajouter k/2 % espace de chaque côté du graphique. Cela permettra de mieux visualiser les données situées en bord de graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Fonctions de transformation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"Une fonction de transformation est une fonction qui prend en entrée un ensemble de données et les transforme en un autre ensemble de données sous un format différent. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"x = d3.scaleLog()\n .domain(padLog(d3.extent(data.flatMap(d => [d.POP_1980, d.POP_2015])), 0.1))\n .rangeRound([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":350,"value":"Création d'une échelle logarithmique avec la méthode \"d3.scalelog()\".
\n\nLa méthode \"d3.extent()\" combinée à \"flatMap()\" permet de retourner un tableau de deux valeurs contenant l'étendue des valeurs parmi les variables \"POP_1980\" et \"POP_2015\". La méthode \"padlog((x,y), 0.1)\" permet d'ajouter 10% d'espace de chaque côté du graphique.
\n\nLa méthode \"rangeRound()\" permet d'arrondir les valeurs de la plage du graphique au nombre entier le plus proche.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"y = d3.scaleLinear()\n .domain(padLinear(d3.extent(data.flatMap(d => [d.R90_10_1980, d.R90_10_2015])), 0.1))\n .rangeRound([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":354,"value":"Création d'une échelle linéaire avec la méthode \"d3.scaleLinear()\".
\n\nComme au-dessus, la méthode \"d3.extent()\" combinée à \"flatMap()\" permet de retourner un tableau de deux valeurs contenant l'étendue des valeurs parmi, cette fois-ci, les variables \"R90_10_1980\" et \"R90_10_2015\". Utilisation de la méthode \"padLinear(x, 0.1)\" pour ajouter 10% d'espace de chaque côté du graphique.
\n\nLa méthode \"rangeRound()\" permet d'arrondir les valeurs de la plage du graphique au nombre entier le plus proche.
\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"circle_fill = d3.scaleOrdinal().domain([\"true\",\"false\"]).range([\"red\", \"black\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"La méthode \"d3.scaleOrdinal()\" associe des couleurs aux valeurs booléennes \"true\" et \"false\". Ici, \"true\" est associé à la couleur rouge et \"false\" est associé à la couleur noire.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"circle_size = d3.scaleOrdinal().domain([\"true\",\"false\"]).range([5, 1.75])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"Ici, la méthode \"d3.scaleOrdinal()\" nous permettra d'associer des tailles de cercle différentes selon les valeurs booléennes \"true\" et \"false\".
\n\nUne fois les fonctions de transformation définies, nous pouvons passer à la création du graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"## Création du graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"function is_in_villes(city){\n return villes.includes(city)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"La fonction \"is_in_villes()\" prend en argument une chaîne de caractères nommé \"city\" et retourne la valeur booléenne \"True\" si \"city\" a été coché par l'utilisateur.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"viewof villes = Inputs.checkbox(data, {label: \"Cities\", format: x => x.nyt_display})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"Création d'une \"checkbox\" qui invite l'utilisateur a sélectionner les villes qu'il souhaite visualiser les données. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"viewof year = Inputs.radio(new Map([[\"1980\", 1980] ,[\"2015\", 2015]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"Création d'une \"checkbox\" qui invite l'utilisateur a sélectionner l'année pour laquelle il souhaite visualiser les données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"graphique.update(year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"La fonction \"grid()\" définit la grille de repères de notre graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"La fonction \"xAxis()\" définit l'axe des abscisses de notre graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"La fonction \"yAxis()\" définit l'axe des ordonnées de notre graphique.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"### Second Graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"Le second graphique a été élaboré afin de visualiser uniquement les données pour l'année et les villes sélectionnées.
\n\nPour que l'utilisateur puisse garder en mémoire les valeurs prises par les villes de son choix en 1980, nous avons crée une flèche qui retrace le \"chemin\" parcouru par la ville en question entre 1980 et 2015.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"function is_in_villes_2(city){\n return villes_2.includes(city)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"viewof villes_2 = Inputs.checkbox(data, {label: \"Cities\", format: x => x.nyt_display})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof year_2 = Inputs.radio(new Map([[\"1980\", 1980] ,[\"2015\", 2015]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"graphique_2.update(year_2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"