2f:T511,{ // Filtre les 5 villes les plus peuplées const sortedCities = data.sort((a, b) => b.population - a.population); const top5Cities = sortedCities.slice(0, 5); // Crée un élément SVG avec une largeur de 100% et une hauteur fixe de 400 const monSvg = d3.create("svg") .attr("width", "100%") .attr("height", 400); // Crée des cercles pour représenter les 5 villes les plus peuplées const circles = monSvg.selectAll("circle") .data(top5Cities) .join(enter => enter.append("circle") .attr("cx", (d, i) => (i + 1) * 130) // Position x basée sur l'index .attr("cy", 200) // Position y fixe .attr("r", d => Math.sqrt(d.population) / 10) // Taille proportionnelle à la racine carrée de la population .attr("fill", "steelblue")); // Couleur de remplissage des cercles // Crée des étiquettes de texte pour les noms des villes const labels = monSvg.selectAll("text") .data(top5Cities) .enter().append("text") .attr("x", (d, i) => (i + 1) * 130) // Position x basée sur l'index .attr("y", 300) // Position y fixe .text(d => d.city) // Texte basé sur le nom de la ville .attr("text-anchor", "middle"); // Ancrage du texte au milieu // Spécifique à Observable : Renvoie le nœud SVG pour le rendu yield monSvg.node(); }30:Tafd,{ // Crée un élément SVG avec une largeur de 100 % et une hauteur fixe de 400 const monSvg = d3.create("svg") .attr("width", "100%") .attr("height", 400); // Met à jour continuellement la visualisation while (true) { // Obtient un tableau des 5 villes avec les populations les plus élevées, triées par ordre décroissant const sortedCities = getRandomCities(5).sort((a, b) => b.population - a.population); // Met à jour les cercles en fonction des données des villes triées const circles = monSvg.selectAll("circle") .data(sortedCities, d => d.city) .join( // Sélection d'entrée : Ajoute des cercles pour les nouveaux points de données enter => enter.append("circle") .attr("cx", (d, i) => (i + 1) * 130) // Définit la position x en fonction de l'index .attr("cy", 200) // Définit la position y .attr("r", d => Math.sqrt(d.population) / 10) // Définit le rayon en fonction de la population .attr("fill", "steelblue"), // Définit la couleur de remplissage // Sélection de mise à jour : Met à jour les positions et les attributs des cercles existants update => update .attr("cx", (d, i) => (i + 1) * 130) // Met à jour la position x .attr("fill", "yellow"), // Change la couleur de remplissage pour les cercles mis à jour // Sélection de sortie : Supprime les cercles qui n'ont plus de données correspondantes exit => exit.remove() ); // Met à jour les étiquettes de texte en fonction des données des villes triées const labels = monSvg.selectAll("text") .data(sortedCities, d => d.city) .join( // Sélection d'entrée : Ajoute des étiquettes de texte pour les nouveaux points de données enter => enter.append("text") .attr("x", (d, i) => (i + 1) * 130) // Définit la position x en fonction de l'index .attr("y", 300) // Définit la position y .text(d => d.city) // Définit le contenu du texte en fonction du nom de la ville .attr("text-anchor", "middle"), // Définit l'ancrage du texte au milieu // Sélection de mise à jour : Met à jour les positions des étiquettes de texte existantes update => update.attr("x", (d, i) => (i + 1) * 130), // Met à jour la position x // Sélection de sortie : Supprime les étiquettes de texte qui n'ont plus de données correspondantes exit => exit.remove() ); // Spécifique à Observable : Renvoie le nœud SVG pour le rendu yield monSvg.node(); // Attend 2000 millisecondes avant la prochaine itération await Promises.tick(3000); } }31:[{"id":"3ab73525e6625b0092a0a7de86418000c5e7ef6915fe923682cea923281d8113df597506ce979372191742c8c5e46ce0fd760bf09a04ca3f52d91d3ed4a6fa81","href":"https://static.observableusercontent.com/files/3ab73525e6625b0092a0a7de86418000c5e7ef6915fe923682cea923281d8113df597506ce979372191742c8c5e46ce0fd760bf09a04ca3f52d91d3ed4a6fa81","name":"ch@2.csv","type":"text/csv","lastModified":1707492488749.548,"size":2841}] 2d:{"title":"d3-selection","cells":[{"id":0,"value":"# d3-selection","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"Cet exercice a pour objectif de mettre en pratique les fonctionnalités de la bibliothèque ${textcolor(\"d3-selection\", \"#e92528\")} que nous avons vu en cours. Les exemples seront présentés sur Observable, offrant ainsi une plateforme interactive pour explorer et expérimenter avec les sélections en D3.js. En se concentrant sur la manipulation et la sélection d'éléments du DOM, nous aurons l'occasion d'apprendre et de comprendre comment utiliser efficacement ${textcolor(\"d3-selection\", \"#e92528\")} pour créer des visualisations interactives en JavaScript.","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"## Sélectionner, créer et modifier","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"### Création du svg et du cercle","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"{ \n const myViz = d3.create(\"svg\")\n .attr(\"width\", 800)\n .attr(\"heigt\", 400)\n\n myViz\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"fill\", \"red\")\n\n // Specific to observable\n yield myViz.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"❓ ${textcolor(\"Comment pourrais-je ajouter un rectangle de dimensions (100, 200) à côté du cercle dans ce code ?\", \"#F8F778\")} ","pinned":false,"hidden":false,"mode":"html"},{"id":98,"value":"

Événements

\nAjoutons un gestionnaire d'événements au cercle nouvellement créé : lorsqu'on survole le cercle avec la souris, sa couleur changera en vert, sinon elle restera rouge.","pinned":false,"hidden":false,"mode":"html"},{"id":146,"value":"\n{ \n // Crée un élément SVG avec une largeur de 200 et une hauteur de 200\n const myViz = d3.create(\"svg\").attr(\"width\", 200).attr(\"height\", 200);\n\n // Ajoute un cercle à l'élément SVG\n myViz\n .append(\"circle\")\n .attr(\"r\", 50) // Rayon du cercle\n .attr(\"cx\", 50) // Position x du centre du cercle\n .attr(\"cy\", 50) // Position y du centre du cercle\n .attr(\"fill\", \"red\"); // Couleur de remplissage du cercle\n\n // Ajoute un gestionnaire d'événement pour le survol de la souris (mouseover) sur le cercle\n myViz.select(\"circle\")\n .on(\"mouseover\", function() {\n d3.select(this).attr(\"fill\", \"green\"); // Change la couleur du cercle en vert\n });\n\n // Ajoute un gestionnaire d'événement pour le déplacement de la souris hors du cercle (mouseout)\n myViz.select(\"circle\")\n .on(\"mouseout\", function() {\n d3.select(this).attr(\"fill\", \"red\"); // Revert la couleur du cercle à rouge\n });\n\n // Spécifique à Observable : Renvoie le nœud SVG pour le rendu\n yield myViz.node();\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"❓ ${textcolor(\"Est-il nécessaire reselectionner le cercle pour ajouter l'événement 'mouseout' ?\", \"#F8F778\")} ","pinned":false,"hidden":false,"mode":"html"},{"id":208,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"## Joindre les données (`data`, `join`, `enter`, `update`, `exit`)","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"Cet exercice propose de créer une visualisation interactive mettant en scène des cercles dont la taille est fonction de la population des villes suisses. Nous utiliserons la plateforme Observable, offrant un environnement en ligne pour expérimenter avec D3.js de manière interactive et collaborative.\n\nEn suivant ce guide, vous apprendrez à représenter visuellement les données de population en ajustant la taille des cercles de manière proportionnelle. Prêt à plonger dans la création de cette visualisation dynamique ? Suivez les étapes pour découvrir la puissance de D3.js et Observable en action ","pinned":false,"hidden":false,"mode":"html"},{"id":179,"value":"

Données

\nIntégrons les données ci-dessous. Dans cette illustration, nous accédons directement aux données depuis Observable. Dans la suite du cours, nous explorerons les méthodes de chargement de données de D3 et apprendrons à les intégrer directement dans un code conventionnel.","pinned":false,"hidden":false,"mode":"html"},{"id":318,"value":"await FileAttachment(\"ch@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"data = FileAttachment(\"ch@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"Créons des cercles avec les méthodes ${textcolor(\"data\", \"red\")}, ${textcolor(\"join\", \"red\")} et ${textcolor(\"enter\", \"red\")} avec les 5 villes les plus peuplées","pinned":false,"hidden":false,"mode":"html"},{"id":272,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"❓ ${textcolor(\"Comment pourriez-vous modifier le code pour changer l'orientation de chaque étiquette de texte à un angle de 45 degrés ?\", \"#F8F778\")} ","pinned":false,"hidden":false,"mode":"html"},{"id":374,"value":"

Et si les données changeaient de manière dynamique ?

","pinned":false,"hidden":false,"mode":"html"},{"id":386,"value":"Maintenant, supposons que les données changent chaque 2 secondes, et que 3 des 5 villes doivent être choisies aléatoirement à chaque changement. Comment peut-on gérer efficacement les différents états dans cette situation dynamique?","pinned":false,"hidden":false,"mode":"html"},{"id":388,"value":"Pour gérer cette dynamique, on pourrait utiliser le principe ${textcolor(\"update\", \"red\")} de D3.js pour mettre à jour les éléments existants lorsqu'une nouvelle donnée arrive chaque seconde. Ensuite, pour gérer les villes qui ne font plus partie des données mises à jour, on pourrait utiliser la méthode ${textcolor(\"exit\", \"red\")} pour les retirer gracieusement de la scène. Ainsi, à chaque changement de données, nous effectuerions les mises à jour nécessaires et retirerions les éléments qui ne font plus partie du spectacle. Cela permettrait d'assurer une représentation toujours fraîche et animée de nos villes suisses, même lorsqu'elles décident de changer de partenaires de danse chaque seconde !","pinned":false,"hidden":false,"mode":"html"},{"id":412,"value":"getRandomCities = function getRandomCities(n) {\n\n const sortedCities = data.sort((a,b) => b.population - a.population).slice(0,20);\n \n // Mélanger le tableau de manière aléatoire\n const melange = sortedCities.sort(() => Math.random() - 0.5);\n\n // Sélectionner les n premiers éléments du tableau mélangé\n return melange.slice(0, n).sort((a,b) => b.population - a.population);\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"❓ ${textcolor(\"Pouvez-vous expliquer en détail le rôle des sélections enter, update et exit dans le code, en particulier comment elles sont utilisées pour gérer la création, la mise à jour et la suppression des éléments SVG représentant les villes dans la visualisation? ?\", \"#F8F778\")} ","pinned":false,"hidden":false,"mode":"html"},{"id":236,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}