29:null 2a:["$","title",null,{"children":"Solution - Préparation et transformation de données | Geovis-M2-GEOMAS | Observable"}] 2f:T42e,dataSummary = { // Le résultat à créer const tableau = []; // On récupère une liste (sans doublon) des noms de boroughs const b = [...new Set(data.map(d => d.borough))]; // On trouve l'indice de l'entré vide ("") et on remplace par "Inconnu" const ixVide = b.findIndex(d => d === ""); b[ixVide] = "Borough inconnu" // Pour chaque Borough, on calcule les valeurs souhaitées (somme des blessés et somme des tués) b.forEach((boroActuel) => { const totalInjured = d3.sum(data.filter(d => d.borough === boroActuel), d => d.injured); const totalKilled = d3.sum(data.filter(d => d.borough === boroActuel), d => d.killed); // On ajout l'entrée "borough actuel" - somme des blessés tableau.push({ name: boroActuel, value: totalInjured, type: 'injured', }); // On ajout l'entrée "borough actuel" - somme des tués tableau.push({ name: boroActuel, value: totalKilled, type: 'killed', }); }); // On retourne le tableau qu'on vient de créer puis d'enrichir return tableau; }30:[] 2d:{"id":"137d5b7f94331fb5","slug":null,"title":"Solution - Préparation et transformation de données","thumbnail":"782c22273d08a75aed465222d7248dc7ae352d771ce82b13168dec050547a233","access_level":"public","create_time":"$D2026-02-06T07:31:26.784Z","update_time":"$D2026-02-06T07:42:58.728Z","view_time":null,"first_public_time":"$D2026-02-06T07:31:26.784Z","fork":{"id":"2e1e0290ca512d85","slug":"solution-preparation-et-transformation-de-donnees","title":"Solution - Préparation et transformation de données","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024"},"version":531,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"5be14e8119a2c07c","slug":"corrections","title":"Corrections","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"title":"Solution - Préparation et transformation de données","cells":[{"id":0,"value":"# Solution - Préparation et transformation de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":450,"value":"

Support de cours pour les étudiants 2025-2026 de 2ème année du Master GAED - parcours GEOMAS de l'IUGA - Université Grenoble Alpes.

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble des notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3,"value":"Pour ces exercices, nous utiliserons les données de collisions de véhicules de NYC provenant de [NYC Open Data](https://data.cityofnewyork.us/Public-Safety/Motor-Vehicle-Collisions-Crashes/h9gi-nx95). Un sous-ensemble modifié de ces données pour 2019 sous forme de [Gist](https://gist.github.com/DanielKerrigan/d01fc44e4cee0c5c2434f464497ba260). Chaque ligne est un accident et contient la date, l'heure, l'arrondissement, le code postal, le nombre de personnes blessées, le nombre de personnes tuées et le facteur principal. Certaines lignes ont des valeurs manquantes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"Nous allons utiliser `d3.csv` pour télécharger le fichier csv, le parser sous forme d'un tableau d'objets, et modifier directement les valeurs pour pouvoir les utiliser facilement.\n\nLe premier argument de `d3.csv` est l'URL du jeu de données, et le deuxième argument (optionnel) est une fonction qui sera appliqué à chaque ligne du fichier CSV.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"url = 'https://gist.githubusercontent.com/DanielKerrigan/d01fc44e4cee0c5c2434f464497ba260/raw/982bcefac49be9fd29887cbaead524e033f6dad4/nyc-collisions-2019-reduced.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"data = d3.csv(url, (crash) => ({\n // Combine \"date\" et \"time\" pour créer un objet Date \n datetime: d3.timeParse('%m/%d/%Y %H:%M')(crash.date + ' ' + crash.time),\n borough: crash.borough,\n zip: crash.zip,\n injured: +crash.injured, // + converti les chaines de caractères en nombre\n killed: +crash.killed,\n cause: crash.cause\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"Inputs.table(data, {columns: [\"datetime\", \"borough\", \"zip\", \"injured\", \"killed\", \"cause\"], layout: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"**Q1.**\n\nQuel est le nombre total de personnes tuées dans un accident ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":81,"value":"d3.sum(data, d => d.killed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"**Q2.**\n\nQuel est le nombre moyen de personnes bléssées ou tuées dans un accident ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":103,"value":"d3.mean(data, d => d.killed + d.injured)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"**Q3.**\n\nCombien d'accidents n'ont pas de code postal (colonne \"zip\") ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"data.filter(d => d.zip === '').length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"...ou alors...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":442,"value":"d3.sum(data, d => d.zip === '')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"**Q4.**\n\nCombien de valeurs uniques de code postal (\"zip\") existe-t-il dans le jeu de données ? (sans prendre en compte les codes postaux vides)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"new Set(data.filter(d => d.zip !== '').map(d => d.zip)).size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"data.filter(d => d.zip !== '').map(d => d.zip)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"new Set(data.filter(d => d.zip !== '').map(d => d.zip))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"a = [1,2,3,3,3,4]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"s = new Set(a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"[...s].length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"**Q5.**\n\nQuel est le nombre maximum de personnes blessées dans un accident ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":125,"value":"d3.max(data, d => d.injured)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"**Q6.**\n\nCréez un tableau (*Array*) de tous les accidents qui ont eu lieu dans le code postal '11201'.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":137,"value":"data.filter(d => d.zip === '11201')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"**Q7.**\n\nCréez un tableau (*Array*) de tous les accidents pour lesquels la valeur de `borough` est non-nulle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":166,"value":"data.filter(d => d.borough !== '')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"**Q8.**\n\nCombien d'accidents se produisent chaque jour du mois ?\n\n*Indice : vous pouvez obtenir le jour du mois en appelant la méthode `getDate` des objets de type `Date` qui sont stockés dans la propriété `datetime` des objets qui sont contenus dans la variable `data`*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":281,"value":"d3.rollup(\n data,\n v => v.length,\n d => d.datetime.getDate()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"Si on veut agréger plus de données pour chaque jour : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":446,"value":"d3.rollup(\n data,\n v => ({ compteAccident: v.length, moyenneGensBlesses: d3.mean(v, s => s.injured)}),\n d => d.datetime.getDate(),\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"**Q9.**\n\nCréez un tableau contenants les 5 accidents qui ont blessés le plus de personnes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"data\n .slice()\n .sort((a, b) => b.injured - a.injured)\n .slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"**Q10.**\n\nCréez un tableau contenants tous les accidents qui se sont produits un samedi ou un dimanche.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":457,"value":"data.filter((d) => d.datetime.getDay() === 0 || d.datetime.getDay() === 6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"**Q11.**\n\nQuel est mois durant le quel le plus d'accidents se sont produit ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":324,"value":"{\n // On fait le calcul avec rollup comme dans la question 8\n const r = d3.rollup(\n data,\n v => v.length, \n d => d.datetime.getMonth()\n );\n\n // On converti l'objet Map retourné en Object\n const o = Object.fromEntries(r);\n \n // On récupère la valeur maximale (des valeurs, pas des clés)\n const max = d3.max(Object.values(o));\n \n // On chercher quelle clée correspond à cette valeur :\n const result = Object.keys(o).find(v => o[v] === max);\n\n // Un tableau avec les mois, pour retourner le nom du mois plutôt que l'indice du mois\n const months = ['Janv.', 'Fev.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Jui.', 'Aout', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];\n \n return months[result];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"**Q12.** Créez un nouveau jeu de données, sur la base de celui-ci, résumant les informations *injured* et *killed* par *borough*.\nPensez au fait que de nombreux accidents n'ont pas de valeur dans le champ `borough`. \n\nCe jeu de données doit être de la forme suivante :\n\n```js\ndataSummary = [\n {name: \"MANHATTAN\", value: xxx, type: 'injured'},\n {name: \"MANHATTAN\", value: xxx, type: 'killed'},\n {name: \"QUEENS\", value: xxx, type: 'injured'},\n {name: \"QUEENS\", value: xxx, type: 'killed'},\n // ....\n // Et ainsi de suite pour tous les borough ...\n // Pour les accidents sans valeur de borough,\n // vous pouvez les regrouper avec le nom \"Inconnu\" par exemple :\n {name: \"Inconnu\", value: xxx, type: 'injured'},\n {name: \"Inconnu\", value: xxx, type: 'killed'},\n]\n```\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"**Q13.**\n\nQuels types de représentations pourriez-vous réaliser pour résumer et présenter visuellement les données ?\nVous devez proposer au moins 2 graphiques, de types différents. Pour chacun vous préciserez quelles variables vont apparaître et de quelle manière (en abscisses, en ordonnées, etc.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":366,"value":"*Réponse*:\n\nOn pourrait par exemple proposer :\n- un diagramme en barre, faisant apparaître, pour chaque borough, le nombre total d'accident ;\n- un diagramme en barre, faisant apparaître, pour chaque borough le nombre de personnes tuées et le nombre de personnes blessées ;\n- un nuage de point, avec le nombre de personnes blessées en abscisses et le nombre de personnes blessées en ordonnées.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":333,"value":"**Q14 - Bonus.**\n\nEn fonction du temps dont vous disposez, vous pouvez cliquer sur le symbole **+** en bas à gauche de cette cellule et regardé les graphiques qui sont proposés. Choisissez en un qui correspond à ce que vous avez proposé et essayez de l'adapter aux données de cet exercice (soit avec `data`, soit avec `dataSummary`, préparé en question 12).\n\nLa prochaine étape du cours consistera à regarder en détails la façon dont fonctionne la bibliothèque Plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":370,"value":"Plot.plot({\n y: { nice: true, label: 'Nombre d\\'accidents'},\n x: { label: null },\n title: 'Nombre d\\'accidents par Borough',\n marks: [\n Plot.barY(\n data,\n Plot.groupX(\n {y: \"count\"},\n {x: d => d.borough === '' ? 'Unknown' : d.borough , tip: true, fill: 'steelblue', sort: {x: 'y', reverse: true}}\n )\n ),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"Plot.plot({\n y: { nice: true, label: 'Nombre d\\'accidents', type: \"sqrt\" },\n x: { label: null },\n title: 'Nombre d\\'accidents par Borough',\n marks: [\n Plot.barY(\n dataSummary,\n {x: d => d.name, y: 'value', tip: true, fill: 'type', sort: {x: 'y', reverse: false}}\n ),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"