2c:null 2d:["$","title",null,{"children":"DM 2 Dataviz | Etienne Hirtz | Observable"}] 32:T404,chart = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: data.title, width: 260, tickValues: d3.utcYear.every(5).range(...color.domain()), tickFormat: d3.utcFormat("%Y") })); svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); svg.append("g") .selectAll("path") .data(data) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin.hexagon(radius(d.length))) .attr("fill", d => color(d.date)) .attr("stroke", d => d3.lab(color(d.date)).darker()) .append("title") .text(d => `${d.length.toLocaleString()} stores ${d.date.getFullYear()} median opening`); return svg.node(); }33:T493,chart_3 = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("path") //créé le chemin et le lier à notre élément principal qu'on a appelé svg .datum(topojson.mesh(us_tuto, us_tuto.objects.states)) //définit les données à utiliser pour dessiner les frontières des Etats-Unis sous forme de chemin. La méthode topojson.mesh est utilisée pour générer les données en prenant l'objet us et la propriété states. .attr("fill", "none") //définit la couleur de remplissage du chemin à "aucun", ce qui signifie qu'il ne sera pas rempli. .attr("stroke", "#777") //définit la couleur de la bordure du chemin à un gris foncé. .attr("stroke-width", 0.5) //définit l'épaisseur de la bordure du chemin à 0,5 pixels. .attr("stroke-linejoin", "round") //définit la façon dont les lignes sont jointes à l'intersection. .attr("d", d3.geoPath()); //définit les coordonnées du chemin en utilisant la projection géographique de D3.js. La méthode d3.geoPath() retourne une fonction qui transforme les données de latitude et de longitude en coordonnées SVG. return svg.node(); }34:T414,chart_7 = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: data.title, width: 260, tickValues: d3.utcYear.every(5).range(...color.domain()), tickFormat: d3.utcFormat("%Y") })); svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); svg.append("g") .selectAll("path") .data(data) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin.hexagon(radius(d.length))) .attr("fill", d => color(d.date)) .attr("stroke", d => d3.lab(color(d.date)).darker()) .append("title") .text(d => `${d.length.toLocaleString()} stores${d.date.getFullYear()} median opening`) return svg.node(); }35:T5bb,chart_8 = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: data.title, width: 260, tickValues: d3.utcYear.every(5).range(...color.domain()), tickFormat: d3.utcFormat("%Y") })); svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); svg.append("g") .selectAll("path") .data(data) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin.hexagon(radius(d.length))) .attr("fill", d => color(d.date)) .attr("stroke", d => d3.lab(color(d.date)).darker()) .append("title") .text(d => `${d.length.toLocaleString()} stores${d.date.getFullYear()} median opening`); svg.append("text") //créé l'object .attr("transform", "translate(415,40)") //le positionne .attr("text-anchor", "middle") //centre le texte sur le point choisi .style("fill", "#5a5a5a") //couleur .style("font-weight", "300") //épaisseur de la police .style("font-size", "22px") //style de la police et taille de l'écriture .text("Walmart stores location in the USA"); //contenu du titre return svg.node(); }36:T63e,chart_9 = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: data_mobile.title, width: 260, tickValues: d3.utcYear.every(5).range(...color.domain()), tickFormat: d3.utcFormat("%Y") })); svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); svg.append("g") .selectAll("path") .data(data_mobile) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin_mobile.hexagon(radius_mobile(d.length))) // on a modifié ici hexin et radius avec nos versions mobiles, pour calculer le bon rayon à afficher .attr("fill", d => color(d.date)) .attr("stroke", d => d3.lab(color(d.date)).darker()) .append("title") .text(d => `${d.length.toLocaleString()} stores${d.date.getFullYear()} median opening`); svg.append("text") //créé l'object .attr("transform", "translate(415,40)") //le positionne .attr("text-anchor", "middle") //centre le texte sur le point choisi .style("fill", "#5a5a5a") //couleur .style("font-weight", "300") //épaisseur de la police .style("font-size", "22px") //style de la police et taille de l'écriture .text("Walmart stores location in the USA"); //contenu du titre return svg.node(); }37:T6ba,// j'ai juste remplacé partout color par color_mobile pour faire les bons ajustements. chart_10 = { const svg = d3.create("svg") .attr("viewBox", [0,0, width, height]); svg.append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color: color_mobile, title: data_mobile.title, width: 260, tickValues: d3.utcYear.every(5).range(...color_mobile.domain()), tickFormat: d3.utcFormat("%Y") })); svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); svg.append("g") .selectAll("path") .data(data_mobile) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin_mobile.hexagon(radius_mobile(d.length))) // on a modifié ici hexin et radius avec nos versions mobiles, pour calculer le bon rayon à afficher .attr("fill", d => color_mobile(d.date)) .attr("stroke", d => d3.lab(color_mobile(d.date)).darker()) .append("title") .text(d => `${d.length.toLocaleString()} stores${d.date.getFullYear()} median opening`); svg.append("text") //créé l'object .attr("transform", "translate(415,40)") //le positionne .attr("text-anchor", "middle") //centre le texte sur le point choisi .style("fill", "#5a5a5a") //couleur .style("font-weight", "300") //épaisseur de la police .style("font-size", "22px") //style de la police et taille de l'écriture .text("Walmart stores location in the USA"); //contenu du titre return svg.node(); }38:[{"id":"584765eba3dde077d5e14795a23179b06f32e3d8acdb624972812fffb82c232b3222dd85724740394d9f76a73b4fc340ccc4db8015b7995b7562e5d2fa9577ca","href":"https://static.observableusercontent.com/files/584765eba3dde077d5e14795a23179b06f32e3d8acdb624972812fffb82c232b3222dd85724740394d9f76a73b4fc340ccc4db8015b7995b7562e5d2fa9577ca","name":"walmart.tsv","type":"application/octet-stream","lastModified":1680347387687.838,"size":99253},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1680347387687.838,"size":82031}] 30:{"id":"5905483e4699f1d8","slug":null,"title":"DM 2 Dataviz","thumbnail":"2d88ea7f69a1c52cf50244ed238c2cca7ff1f15af911c1bdd706c76c1d113391","access_level":"public","create_time":"$D2023-04-01T11:09:47.687Z","update_time":"$D2024-06-06T14:23:34.425Z","view_time":null,"first_public_time":"$D2023-04-01T11:09:47.687Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b05a4841bdd209c2","login":"hirtzetienne","name":"Etienne Hirtz ","avatar_url":"https://avatars-next.observableusercontent.com/7b9404a8b1b32e6110033b2dd393cca8487aed9c53e9ff81966578ccb7d3148e","tier":"starter_2024","bio":""},"version":853,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b42e4b714f97b7ca","login":"hirtzetienne","name":"Etienne Hirtz ","avatar_url":"https://avatars-next.observableusercontent.com/7b9404a8b1b32e6110033b2dd393cca8487aed9c53e9ff81966578ccb7d3148e","tier":null,"bio":""}],"members":[{"type":"individual","id":"b42e4b714f97b7ca","login":"hirtzetienne","name":"Etienne Hirtz ","avatar_url":"https://avatars-next.observableusercontent.com/7b9404a8b1b32e6110033b2dd393cca8487aed9c53e9ff81966578ccb7d3148e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DM 2 Dataviz","cells":[{"id":212,"value":"# [DM 2 Dataviz](https://www.youtube.com/watch?v=aFK7nrscv8M)\n## Graphic representation of Walmart stores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"Ce tutoriel est proposé par **HIRTZ Etienne** et est basé sur le graphique [Hexbin Map](https://observablehq.com/@d3/hexbin-map) de Mike Bostock. (Mais dis donc Etienne, pourquoi tu as fait ce travail tout seul ? On pouvait se mettre [par deux](https://www.youtube.com/watch?v=2zkywMAXTwg).)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":716,"value":"(PS: Alors, oui, va y avoir quelque même au cours du notebook pour égayer un peu tout ça. Evidemment, cliquer sur les liens est optionnel mais ça perd un peu de son charme.
\n[Quand je me rends compte](https://www.youtube.com/watch?v=FP6F4lCRl7M) que personne ne clique sur les liens pour gagner du temps.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"En ce qui concerne mon apport personnel, nous verrons ensemble comment lui ajouter un titre ainsi que l'ajout d'un curseur permettant de faire varier la taille des hexagones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"Ce notebook étant une fourchette du projet original, j'ai ajouté le tutoriel pas-à-pas afin de le reproduire puis de le rendre interactif à la suite. Mon devoir commence donc à partir du titre en gras **Début de mon tutoriel**.
\n[Zé parti !!](https://www.youtube.com/watch?v=q2Xp4tefDyc)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"md`# Hexbin Map\n\nThis map shows approximately 3,000 locations of Walmart stores. The hexagon area represents the number of stores in the vicinity, while the color represents the median age of these stores. Older stores are red, and newer stores are blue.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = {\n const data = d3.tsvParse(await FileAttachment(\"walmart.tsv\").text(), d => {\n const p = projection(d);\n p.date = parseDate(d.date);\n return p;\n });\n return Object.assign(\n hexbin(data)\n .map(d => (d.date = new Date(d3.median(d, d => d.date)), d))\n .sort((a, b) => b.length - a.length),\n {title: \"Median opening year\"}\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"parseDate = d3.utcParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"color = d3.scaleSequential(d3.extent(data, d => d.date), d3.interpolateSpectral)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"radius = d3.scaleSqrt([0, d3.max(data, d => d.length)], [0, hexbin.radius() * Math.SQRT2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"hexbin = d3.hexbin().extent([[0, 0], [width, height]]).radius(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"# Début de mon tutoriel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":575,"value":"Bravo, si tu es arrivé jusque là c'est que tu n'as pas baissé les bras en voyant le graphique et le code qui va avec. Mais tu as eu raison, en fait ce n'est pas si compliqué. Allez, un petit [lien](https://www.youtube.com/watch?v=aESq6d3647A) vers El condor pasa pour se détendre et on est parti.
\n[Ne t'inquiète pas ça va bien s'passer](https://www.youtube.com/shorts/q6VxDM8Wd-o)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"## 1. Import des données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"Avant tout, on précise que l'origine des données du graphe originale n'est pas indiquée.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"Comme les consignes précisent de ne pas s'attarder sur la partie concernant l'import des données, [nous n'allons pas voir ensemble le mécanisme d'import.](https://www.youtube.com/watch?v=AqI0a_biziA) Nous allons simplement regarder un peu la table afin de comprendre le jeu de données que l'on manipule.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"Notre jeu de données est une liste de longueur 810, où chaque élément correspond à un hexagone sur notre carte. De plus, chaque élément i contient n_i sous-élément, correspondant à un magasin, caractérisé par ses coordonnées sur la carte ainsi que par sa date d'ouverture. Ainsi, n_i est le nombre de magasins regroupés sous un hexagone ce qui permettra de définir sa taille. Enfin, pour chaque élément i du tableau principal, nous disposons également à la fin des coordonnées moyennes des n_i magasins de l'élément ainsi que la médiane des dates d'ouvertures.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"## 2. Graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"### 2.1 Créer le graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"Nous pouvons enfin pouvoir commencer le tutoriel. Tout d'abord, nous devons créer un objet de type svg.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"chart_1 = {\n const svg = d3.create(\"svg\") //création d'un objet de type svg\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":301,"value":"Bon on va pas se mentir, pour le moment [c'est pas fou-fou](https://www.youtube.com/watch?v=9U7N4SiFb5A) mais on va y aller pas-à-pas. Maintenant qu'on a un objet, on va lui définir une fenêtre graphique associée. Pour cela, on utilise `.attr(\"viewBox\", [0, 0, width_ex, height_ex])` qui va venir modifier notre élément svg. On peut bouger les curseurs proposés pour modifier la fenêtre graphique.
\nPS: plus tard, on utilisera width et height définis dans le code original (respectivement à 975 et 610, les paramètres par défaut) car ils ont été défini pour bien correspondre au fond de carte. D'ailleurs c'est ce qu'on fera en règle générale pour tous les paramètres et toutes les fonctions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"Amuse toi à bouger les curseurs pour voir que la fenêtre graphique évolue bien en conséquence (enfin surtout la hauteur parce que la largeur on voit pas grand chose [vu que c'est blanc.](https://www.youtube.com/watch?v=AUTNebF4fSI)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"viewof width_tuto = Range([0,2000], {label: md`\\`width_tuto\\``, step:1, value:975})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof height_tuto = Range([0,1000], {label: md`\\`height_tuto\\``, step:1, value:610})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"chart_2 = {\n const svg = d3.create(\"svg\") \n .attr(\"viewBox\", [0, 0, width_tuto, height_tuto]); //0, 0 définit l'emplacement de notre fenêtre graphique \n // et width et height définissent sa largeur et sa hauteur\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"### 2.2 Fond de carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"C'est bien beau de faire des zones graphiques mais si on ne met rien dedans, ça sert pas à grand chose, pas vrai [Jean-Pierre ?]](https://www.youtube.com/watch?v=CoB36zxT940)
\nOh ! Doucement quand même, j'te permets pas. Et c'est que le début, attend un peu...
\nAllez si tu veux, on va maintenant utiliser notre super fenêtre graphique pour afficher notre fond de carte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"Première étape, on importe sous le nom `us` le chemin correspondant à la carte des [Etats-Unis](https://www.youtube.com/watch?v=oqiOeiG4VNo). Le fichier source est relié à notre notebook (faut cliquer sur le trombone...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"(PS: [ton état](https://www.youtube.com/watch?v=4Q0qLpxjBaY) quand tu te rends compte que y'a plus de meme que de code dans le notebook.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"us_tuto = FileAttachment(\"states-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Ensuite, on utilise `svg.append(\"path\")`pour créer un nouvel élément de chemin et l'ajouter à notre objet svg. Pour connaître les détails des différents paramètres utilisés, les curieux peuvent aller voir les commentaires laissés dans le code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"### 2.3 Légende","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"Bon, une carte c'est déjà pas mal mais c'est pas suffisant. On va la pimper un peu en lui ajoutant une légende.
\nAvant cela, on va avoir besoin de faire deux choses:
\n- Importer la fonction _legend_ de **d3/color-legend** qui [permet de créer facilement une légende](https://www.google.com/search?q=ouais+ouais+ouais+t%27es+bien+renseign%C3%A9&rlz=1C1CHBF_frFR902FR902&sxsrf=APwXEdf5vL_yYPHsSlDvJ8DpA_XWj9DIlw%3A1680383754171&ei=Cp8oZICJCrKqkdUPk7yB0A8&ved=0ahUKEwiAtoOmzYn-AhUyVaQEHRNeAPoQ4dUDCA8&uact=5&oq=ouais+ouais+ouais+t%27es+bien+renseign%C3%A9&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzoKCAAQRxDWBBCwAzoECCMQJzoFCC4QgAQ6BQgAEIAEOggILhCABBDUAjoGCAAQFhAeSgQIQRgAUL8DWOUkYLYmaAFwAXgBgAHbAYgBoBqSAQYwLjIyLjGYAQCgAQHIAQLAAQE&sclient=gws-wiz-serp#fpstate=ive&vld=cid:61ed88bc,vid:qG2qH5psMKo) avec:\n`import {legend} from \"@d3/color-legend\"`
\n- Définir l'échelle de couleur que nous allons utiliser.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"color_tuto = d3.scaleSequential(d3.extent(data, d => d.date), d3.interpolateSpectral)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"\nCette ligne de code utilise la méthode _d3.scaleSequential()_ pour créer une échelle de couleurs en fonction d'un intervalle et de l'effet voulu.
\n_d3.extent(data, d => d.date)_ calcule l'étendue (min/max) des valeurs de la variable _date_ dans l'ensemble de données **data** et _d3.interpolateSpectral_ permet de paramétrer une couleur interpolée entre le bleu foncé et le rouge.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"A présent, on peut faire un [exemple de légende](https://www.youtube.com/watch?v=lwpu2kaaARI). Comme avant, le détail des attribut est donné en commentaire dans le code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"legende = {\n const svg = d3.create(\"svg\") //création d'un objet svg\n .attr(\"viewBox\", [0,0, width, 50]); //on lui associe une fenêtre graphique\n\n svg.append(\"g\") //création d'un objet fils qu'on ajoute à notre objet principal\n .append(() => legend({\n color, //utilise la gamme de couleur définie auparavant \n title: data.title, //donne un titre, ici le titre qu'on a donné à notre table au moment de son import\n width: 560, //la longueur (enfin largeur si on traduit) de notre légede\n tickValues: d3.utcYear.every(5).range(...color.domain()), //rajoute un \"tick\" c'est-à-dire une marque sur toutes les années divisibles par 5 et étendue sur notre domaine de couleur\n tickFormat: d3.utcFormat(\"%Y\") //formate les dates sous le format YYYY afin de les rendre lisibles\n })\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"Avec le fond de carte en plus, on arrive à [ce résultat](https://www.youtube.com/shorts/csPFnSkUDSE).
\nJ'suis d'accord avec toi Kylian mais attention c'est pas encore fini. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"chart_4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0,0, width, height]); \n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(610,20)\") //cette ligne supplémentaire permet simplement de placer notre légende à l'endroit voulu\n .append(() => legend({\n color, \n title: data.title, \n width: 260, \n tickValues: d3.utcYear.every(5).range(...color.domain()),\n tickFormat: d3.utcFormat(\"%Y\")\n }));\n\n svg.append(\"path\")\n .datum(topojson.mesh(us, us.objects.states))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#777\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", d3.geoPath());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"### 2.4 Affichage des données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"Maintenant que nous avons crée le fond de carte avec la légende, il est temps d'ajouter les données.\nPour cela, comme pour les autres étapes, nous allons ajouter un objet à notre svg auquel nous allons définir des attributs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":521,"value":"Le code commence avec ces instructions:
\n` svg.append(\"g\")`
\n`.selectAll(\"path\")`
\n`.data(data) `
\n`.join(\"path\")`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"Comme expliqué dans les consignes sur Moodle, ce code est équivalent à créer un _path_ pour tous les éléments de **data**. On va plutôt s'intéresser aux attributs ajoutés à _join_ c'est-à-dire les caractéristiques des éléments qu'on va ajouter à notre graphique.
\nComme pour les fois précédentes, le détail des attributs est précisé en commentaire du code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"chart_5 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0,0, width, height]); \n\nsvg.append(\"g\")\n .selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`) //positionne chaque élément aux coordonnéss d.x, d.y\n .attr(\"d\", d => hexbin.hexagon(radius(d.length))) //créé un hexagone avec un certain rayon calculé en fonction de la taille de l'élément c'est-à-dire le nombre de magasins regroupés ensemble.\n .attr(\"fill\", d => color(d.date)) //associe une couleur à l'hexagone en fonction de la valeur de la médiane des années d'ouverture\n .attr(\"stroke\", d => d3.lab(color(d.date)).darker()) //associe la même couleur que l'hexagone mais en plus foncée pour souligner les contours\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":542,"value":"Oh dis donc, ça fait beaucoup de magasins, c'est le patron qui doit être [content](https://www.youtube.com/watch?v=aIVsz5Pj0eE).
\nMais en même temps, c'est normal qu'il y ait beaucoup de magasins, ils sont quand même [des millions](https://www.youtube.com/watch?v=1ZOBwBiVeeY) les américains !\n\nPlus sérieusement, ll reste un dernier petit détail pour arriver aux bouts. Dans le précédent graphe, on ne peut pas savoir précisément combien de magasins un hexagone représente ni quelle est la médiane des années d'ouvertures. Pour cela, on ajoute à chaque hexagone (c'est-à-dire dans le code à chaque _path_) un titre. Pour celui-ci, on calcule la longueur de l'élément afin de connaître le nombre de magasins et on va chercher l'année qu'on recherche dans la table. Check le code en-dessous si tu veux savoir comment refaire.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":552,"value":"Et regarde qu'en passant ta souris sur un hexagone, tu peux maintenant obtenir les infos qu'on attend.
\n(PS: je me rend compte qu'à force de tout détailler, on est [déjà au 6^ème chart)](https://www.youtube.com/watch?v=HPCDuR1ANKU).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"chart_6 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0,0, width, height]); \n\nsvg.append(\"g\")\n .selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`) \n .attr(\"d\", d => hexbin.hexagon(radius(d.length))) \n .attr(\"fill\", d => color(d.date)) \n .attr(\"stroke\", d => d3.lab(color(d.date)).darker()) \n .append(\"title\") //on ajoute à chaque path un titre\n .text(d => `${d.length.toLocaleString()} stores${d.date.getFullYear()} median opening`); //composé du nombre de magasins et de l'année médiane d'ouverture.\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":547,"value":"On peut enfin tout réunir, et ça donne ça:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"Bien joué, [tu as enfin terminé !](https://www.youtube.com/watch?v=6STF0pvTG9E) Tu vois c'était pas sorcier. Enfin terminé, descend encore un peu si tu veux bien.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"## 3. Modification et Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"Et oui, tu pensais que c'était fini mais bouge pas, [on a encore des choses à faire ensemble](https://www.youtube.com/watch?v=X4SBYo4_Us0).
\nMaintenant, on va apporter quelques modifs au graphique pour le rendre interactif.
\n(PS: [Clique ici](https://www.youtube.com/watch?v=upWu3-4DA9g\n) pour voir la réaction du graphique quand il a compris qu'on allait le modifier.)
\nMais d'ailleurs, pourquoi tu veux le modifier le graphique il est très bien comme ça, [nan](https://www.youtube.com/watch?v=udBPW2rMQnc) ?
\nOk si tu veux, pas la peine de t'énerver.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"### 3.1 Ajout d'un titre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"Pour commencer une petite gourmandise. Un graphique c'est déjà bien mais avec un titre c'est encore mieux. Pour ça, comme d'habitude, on créé un élément svg qu'on joint au graphique, puis on peut le pimper avec différents attributs. Tous les détails sont en commentaires.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"Bon là on s'est bien amusé, on a ajouté un titre mais c'était de la rigolade. Le titre lui-même il sait..
\n(PS: [Le titre](https://www.youtube.com/watch?v=oNHhU9EAepk) quand il entend comment je parle de lui...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"### 3.2 Ajout d'un curseur pour changer la taille des hexagones","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"Pour l'instant, nos hexagones apparaissent avec une taille standard définit à l'avance puis adapté en fonction du nombre de magasins qu'il est censé représenter. Seulement, on aimerait pouvoir faire varier la taille de ces hexagones afin de trouver la plus adaptée pour notre représentation. Alors là évidemment, les plus pessimistes vont me dire que c'est trop compliqué, que ça va prendre trop de temps.
\nUn avis [Nicolas](https://www.youtube.com/watch?v=97F89Llc70M) ?
\nMais nan tu vas voir c'est facile, faut juste se pencher un peu sur l'import des données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"Pour cela, nous allons d'abord expliquer comment on construit notre base **data** pour savoir quoi modifier. La première partie sert à importer les données brutes et à les formater pour notre carte. La deuxième sert à réaliser le regroupage de certains magasins. Explications ligne par ligne en commentaire.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"data_tuto = {\n const data = d3.tsvParse(await FileAttachment(\"walmart.tsv\").text(), d => { //ligne pour lire le fichier\n const p = projection(d); //projection est une méthode personelle qui sert à formater les coordonnées lues dans la table pour les conformer aux dimensions de notre fond de carte\n p.date = parseDate(d.date); //permet d'importer les dates avec le bon formalisme\n return p;\n });\n return Object.assign( //maintenant qu'on a récupéré les données, avec les bonnes coordonnées et leur date, on va réaliser le découpage avec hexbin.\n hexbin_tuto(data) //ici, on réalise le découpage avec notre méthode hexin_tuto qu'on va détailler en bas\n .map(d => (d.date = new Date(d3.median(d, d => d.date)), d)) //on rajoute la médiane des années de notre ensemble de magasins\n .sort((a, b) => b.length - a.length), // on trie par ordre décroissant\n {title: \"Median opening year\"} //et on ajoute un titre\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"hexbin_tuto = d3.hexbin().extent([[0, 0], [width, height]]).radius(10) //note méthode perso hexbin_tuto utilise la méthode de d3.js d3.hexin(). Ici on lui précise la fenêtre graphique à découper ainsi qu'un rayon par défaut, ici 10. On comprend alors que c'est sur ce paramètre qu'on va devoir jouer pour modifier notre découpage.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"Maintenant qu'on a compris comment influer notre découpage, on va refaire le match à l'envers et redéfinir les fonctions originelles en fonction de notre nouvelle méthode hexbin_mobile qui sera dépendante du paramètre rayon_mobile à la place de la valeur 10 par défaut. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":749,"value":"hexbin_mobile = d3.hexbin().extent([[0, 0], [width, height]]).radius(rayon_mobile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"data_mobile = {\n const data = d3.tsvParse(await FileAttachment(\"walmart.tsv\").text(), d => {\n const p = projection(d);\n p.date = parseDate(d.date);\n return p;\n });\n return Object.assign(\n hexbin_mobile(data) //on découpe ici avec notre nouvelle méthode hexbin_mobile paramétrable\n .map(d => (d.date = new Date(d3.median(d, d => d.date)), d))\n .sort((a, b) => b.length - a.length),\n {title: \"Median opening year\"}\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"Il reste une dernière méthode à modifier en fonction de nos nouvelles fonctions. C'est la méthode radius qui recalcule le rayon des hexagones en fonction du nombre de magasins regroupés. On s'en sert au moment d'afficher nos données. Cette méthode à besoin de la base de données pour calibrer correctement selon le max des données (et donc i faut désormais **data_mobile** qui sera différente pour chaque découpage) ainsi que de la méthode hexin, qui dépend maintenant de notre paramètre **rayon_mobile** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":673,"value":"radius_mobile = d3.scaleSqrt([0, d3.max(data_mobile, d => d.length)], [0, hexbin_mobile.radius() * Math.SQRT2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"Maintenant que les fonctions ont été adaptées, et l'import des données conditionné à un paramètre **rayon_mobile**, il ne reste plus qu'à créer ce paramètre à l'aide d'un curseur pour pouvoir jouer avec.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"viewof rayon_mobile = Range([1, 75], {\"label\": md`\\`rayon_mobile\\``, \"step\":1, value:10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"Et voilà, c'est quand même plus rigolo comme ça [nan](https://www.youtube.com/watch?v=f7FjTKBQutY) ?
\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"Dernier petit détail pour les plus pointilleux d'entre vous. En effet, pour ce dernier graphique, on a décidé de garder l'échelle de couleur définie avec notre table **data**. On pourrait en effet définir une échelle color_mobile qui requalibrerait les mêmes teintes de couleur sur les nouveaux min/max de la table qu'on considère. Seulement, plus on augmente la taille des hexagones, plus on regroupe un grand nombre de magasins et plus les valeurs extrêmes ont tendances à disparaître. Ainsi, la même plage allant du rouge foncé au bleu foncé représenterait un intervalle de temps plus court et entre deux cartes, une même couleur n'aurait pas le même signification. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"Pour faciliter la compréhension, j'ai finalement ajouté en-dessous une carte dont l'échelle de couleur s'adapte en fonction de la table. N'hésite pas à y jeter un œil.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":771,"value":"color_mobile = d3.scaleSequential(d3.extent(data_mobile, d => d.date), d3.interpolateSpectral)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"(PS: Mine de rien c'est déjà le [9^ème chart !](https://www.youtube.com/watch?v=-tWPtZn7ULg) )","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":788,"value":"Tu peux remarquer par exemple qu'en poussant le curseur au maximum, notre intervalle de temps s'étend de 1979 à 1998 soit à peine 20 ans et qu'ainsi, le rouge foncé symbolise plus ou moins l'année 1980 alors qu'initialement, le ronge foncé représentait une date avant 1970. Il en va de même pour le bleu qui passe de plus de 2005 à moins que 2000.
\nAinsi, on passe d'une amplitude de plus de 35 ans à moins de 20 ans, ce qui modifie significativement la perception des couleurs pour une même année.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"Et finalement, on peut s'interroger sur la pertinence de notre échelle de couleur définit avec **data**. Si on pousse le curseur au minimum, à 1 c'est-à-dire une échelle où dans la grande majorité, un hexagone représente un magasin (en fouillant dans la table, on peut voir que sur 2989 points, il n'y que 5 hexagones qui représentent 3 magasins et 110 qui en représentent 2), on obtient l'échelle de couleurs avec le plus d'amplitude. Or cette échelle n'est pas très différente de l'échelle _color_ (un décalage de l'ordre de 2/3 ans pour la borne gauche et pas de changement pour la borne droite) et de toute façon, pour les plus petites valeurs de rayon possible, les points sont trop petits pour percevoir une telle nuance de couleur, et l'échelle redevient identique pour un rayon égal à 7.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":833,"value":"Alors certes dans l'idéal, il faudrait définir une table color_max avec l'amplitude maximale possible mais au vu de l'investissement nécessaire pour le gain minime que cela représente, [je ne l'ai pas fait](https://www.youtube.com/watch?v=0_eyiAg6sR8).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"## Remerciement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":822,"value":"Merci d'avoir suivi ce tuto jusqu'au bout, en espérant [qu'on puisse le trouver distrayant](https://www.youtube.com/shorts/iQWz043IByo) et même éventuellement, qu'on puisse apprendre un ou deux trucs par-ci, par-là. \n[A plus !](https://www.youtube.com/watch?v=xLHN9pz5Dms)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"## Annexe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"import {Range} from \"@observablehq/inputs\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"