2f:T66b,{ // Trions les données en ordre croissant, et prénons les 10 villes les plus peuplées const sortedPartners = countPartners.sort((a,b) => a.count - b.count) // Définissons la taille du SVG const width = "100%"; const height = 600; const marginBottom = 70; // Créons un élément SVG avec avec la largeur et la longuer fixées ci-dessus const monSvg = d3.create("svg") .attr("width", width) .attr("height", height); // Construisons le diagramme en bâton const barChart = monSvg .selectAll("rect") .data(sortedPartners) .join(enter => enter .append("rect") .attr("x", (d, i) => (i + 1) * 120) .attr("y", d => height - d.count * 10 - marginBottom) .attr("width", 80) .attr("height", d => d.count * 10)); // Rajoutons les étiquettes des partenaires const labels = monSvg.selectAll(".partners") .data(sortedPartners) .join(enter => enter.append("text") .attr("class", "partners") .attr("x", (d, i) => (i + 1) * 120 + 40) .attr("y", d => height - d.count * 10 - marginBottom - 10) .style("font-size", '12px') .text(d => d.provider_name) .attr("text-anchor", "middle")) // Rajoutons les étiquettes des partenaires const labelsCount = monSvg.selectAll(".count") .data(sortedPartners) .join(enter => enter.append("text") .attr("class", "count") .attr("x", (d, i) => (i + 1) * 120 + 40) .attr("y", d => height - d.count * 10 /2 - marginBottom + 5) .style("font-size", '20px') .attr("fill", "white") .text(d => d.count) .attr("text-anchor", "middle")) // Spécifique à Observable : Renvoie le nœud SVG pour le rendu yield monSvg.node(); }30:[] 2d:{"title":"d3-fetch, d3-array","cells":[{"id":0,"value":"# d3-fetch, d3-array","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"Aujourd'hui nous allons faire notre premier diagramme en bâton avec d3. Nous allons utiliser les données de mobilité partagée en Suisse et nous allons découvrir les stations de vehicules partagés autour de l'HEIG-VD St-Roch (6.6472569371047445,46.78131296236756).","pinned":false,"hidden":false,"mode":"html"},{"id":9,"value":"## Charger les données","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"Ici, nous allons appeler la méthode json de d3-fetch pour récupérer les données. Nous allons également filtrer les propriétés qui nous intéresse pour la suite de l'exercice.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"Voici l'URL qui nous permet de filtrer les données dans un rayon de 3km autour du centre géographique de Yverdons-les-Bains.","pinned":false,"hidden":false,"mode":"html"},{"id":430,"value":"url = \"https://api.sharedmobility.ch/v1/sharedmobility/identify?Geometry=6.6472569371047445,46.78131296236756&Tolerance=3000&offset=0&geometryFormat=esrijson\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"Chargeons et filtrons les propriétés qui nous intéressent, tels que les coordonnées géographiques, les stations et le nom du partenaire qui met à disposition des vehicules partagés. ","pinned":false,"hidden":false,"mode":"html"},{"id":425,"value":"data = d3.json(url).then(function(data) {\n \n return data.map(d => {\n return {\n \"lng\" : d.geometry.x,\n \"lat\" : d.geometry.y,\n \"station_name\": d.attributes.station_name,\n \"provider_name\" : d.attributes.provider_name,\n } \n })\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"heading(\"❓ Rajouter un code snippet pour trouver la station la plus à l'ouest.\",0 , 0, \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"{\n\n // Méthode en ordonnant les données\n data.sort((a,b) => a.lng - b.lng);\n console.log(\"Station la plus à l'ouest :\",data[0]);\n\n // Méthode avec d3.min et Array.filter()\n const minLng = d3.min(data, d => d.lng);\n const westernmost = data.filter(s => s.lng === minLng);\n\n console.log(\"Station la plus à l'ouest :\", westernmost);\n return westernmost;\n\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"## Manipuler les données","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"Calculons la totalité de stations par partenaire et créons un nouveau tableau. ","pinned":false,"hidden":false,"mode":"html"},{"id":93,"value":"countPartners = data.reduce((accumulateur, current) => {\n const partenaireExistant = accumulateur.find(d => d.provider_name === current.provider_name);\n\n if (partenaireExistant) {\n partenaireExistant.count += 1;\n } else {\n accumulateur.push({ provider_name : current.provider_name, count : 1})\n}\n return accumulateur;\n}, []\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"heading(\"❓ Rajouter un code snippet ci-dessous pour trouver le partenaire avec le plus de vehicules\",0 , 0, \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"partenaireMax = countPartners.filter(d => d.count === d3.max(countPartners, d => d.count))","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Diagramme en bâtons","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"Maintenant que nous avons créé un tableau avec la somme des véhicules par partenanire, procédons à faire notre premier diagramme en bâtons. On va aussi rajouter quelques transitions pour donner un peu de fluidité aux graphiques.

\n\nNous verrons les transitions plus en détails dans quelques chapitres, mais si tu n'arrives pas à résister 😬: d3-transition","pinned":false,"hidden":false,"mode":"html"},{"id":180,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"heading(\"❓ Rajoutez un label au dessus des rectangles notant le nombre des vehicules. Est-ce que les chiffres sont correctes par rapport aux tailles des rectangles ?\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"import {heading} from '@ee2dev/formatting-in-observable'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}