34:["$","title",null,{"children":"Préparation et transformation de données | Geovis-M2-GEOMAS | Observable"}] 3c:T5b3,### Tri Le tri d'un tableau s'effectue avec la méthode `sort`. La méthode `sort` attend un seul paramètre, qui est une fonction de comparaison définissant la manière dont les éléments du tableau doivent être triés. Si aucune fonction de comparaison n'est fournie, les éléments sont triés comme des chaînes de caractères. La fonction de comparaison a deux paramètres, souvent appelés a et b. Si l'élément a doit être placé avant l'élément b, la fonction de comparaison doit renvoyer une valeur inférieure à 0. Si l'élément a doit être placé après l'élément b, la fonction doit renvoyer une valeur supérieure à 0. Sinon, elle doit renvoyer 0. Pour trier des valeurs numérique il est possible d'utiliser les fonction `d3.ascending` ou `d3.descending` comme fonctions de comparaison. Elles gèreront la logique ci-dessus. Attention, la méthode `sort` modifie le tableau sur lequel il est appelé et renvoie également ce tableau. Si nous ne voulons pas que l'ordre du tableau original change et que nous voulons retourner un nouveau tableau trié, nous pouvons créer une copie du tableau avant d'appeler `sort`. Pour ce faire, nous pouvons utiliser la méthode `slice` vu plus haut.3d:T444,Il n'est ici pas nécessaire de transformer les données pour faire les représentations les plus simples telles qu'un diagramme à barre (*bar chart*) ou un nuage de points (*scatter plot*). La création de graphique avec la bibliothèque *__Plot__* va se faire en appelant la fonction `Plot.plot` et en lui donnant en argument un *object*. Cet objet accepte de nombreux arguments (`title`, `subtitle`, `caption`, `marks`, `grid`, `height`, `width`, `inset`, `margin`, etc. - il s'agit de propriétés qui vont s'appliquer à l'ensemble du graphique, ou d'information qui pourront être utilisées par les *marks* que vous allez définir). Nous allons nous concentrer dans un premier temps sur l'argument `marks`. En effet, *Plot* offre une grande variété de types de marques. Les marques constituent le "vocabulaire visuel" (la palette du peintre 🎨 en quelque sorte), mais avec des formes au lieu de couleurs - dans lequel vous puisez lorsque vous composez un graphique. Chaque type de marque produit un certain type de forme géométrique. Pour réaliser un diagramme à barre ...3e:[] 38:{"id":"9b0d225dcd7f42bb","slug":"preparation-et-transformation-de-donnees","title":"Préparation et transformation de données","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-02-07T08:56:39.703Z","update_time":"$D2026-01-08T13:05:31.935Z","view_time":null,"first_public_time":"$D2025-02-07T08:58:41.456Z","has_unpublished_edits":null,"fork":{"id":"d6a09c406e1342f7","slug":"preparation-et-transformation-de-donnees","title":"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","bio":"","followed_by_you":false,"follows_you":false},"version":599,"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,"bio":"","followed_by_you":false,"follows_you":false}],"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,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"977152c873ca6766","slug":"cours","title":"Cours","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"titling":"auto","title":"Préparation et transformation de données","cells":[{"id":0,"value":"# Préparation et transformation de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Dans ce *notebook*, nous allons explorer les bases du traitement et de la transformation des données en utilisant JavaScript et D3. Souvent, lorsque vous créez des visualisations, vous travaillez souvent avec des données tabulaires en entrée. Ces données peuvent être transformées afin de dériver les informations que vous souhaitez visualiser.\n\nLes transformations typiques comprennent :\n- la sélection d'un sous-ensemble de caractéristiques,\n- la création de nouvelles caractéristiques,\n- le filtrage,\n- le tri,\n- l'agrégation.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Jeu de données d'exemple","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Afin d'illustrer les principales transformations à appliquer aux données, nous utiliserons le jeu de données fictif décrivant un groupe de personnes, chacune étant décrite par son nom (`name`), sa taille (`height`), le nombre de bananes qu'elle possède (`banana`) et le nombre de pommes qu'elle possède (`apple`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"Il s'agit d'un tableau contenant des objets. Chaque object (*i.e* chaque élément du tableau) décrit un individu (au sens statistique du terme).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"data = [\n { name: 'John', height: 170, banana: 12, apple: 5 },\n { name: 'Rosa', height: 156, banana: 8, apple: 4 },\n { name: 'Jack', height: 179, banana: 9, apple: 9 },\n { name: 'Ronda', height: 180, banana: 20, apple: 3 },\n { name: 'Alan', height: null, banana: 2, apple: 7 },\n { name: 'Aurora', height: 171, banana: 6, apple: 7 },\n { name: 'Robert', height: 181, banana: 14, apple: 2 },\n { name: 'Sylvia', height: 170, banana: 10, apple: 3 },\n { name: 'Ross', height: 165, banana: 5, apple: 6 },\n { name: 'Ada', height: 173, banana: 6, apple: 5 },\n { name: 'Rick', height: 160, banana: 4, apple: 4 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Dans Observable, il est possible d'afficher directement un tableau de ces données :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Méthodes JavaScript standardes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"### Filtrage et sélection d'un sous-ensemble d'individus","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"Il est possible de filter un tableau JavaScript avec la méthode [**`filter`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). Cette méthode renvoi un nouveau tableau et prend en argument une fonction qui est appelée pour chaque élément du tableau. Si la fonction retourne `true`, l'élément est conservé, sinon non.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `height` n'est pas nulle :\ndata.filter((d) => { return d.height !== null })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `height` est supérieur à 170 :\ndata.filter((toto) => toto.height > 170)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `name` se termine par la lettre 'a'\ndata.filter((d) => d.name.endsWith('a'))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"// Lorsque aucun élément ne correspond, un taleau vide est retourné\ndata.filter((d) => d.height > 220)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"Il existe une méthode similaire, [**`find`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find), qui renvoie le premier élément trouvé dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Idéalement, par rapport à filter, il ne faut l'utiliser que si vous savez qu'un seul élément peut correspondre (ou que vous êtes certain de ne vouloir que le 1er élément satisfaisant la condition).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"data.find((d) => d.name === 'Rosa')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"// Si aucune correspondance n'est trouvée, undefined est retourné\ndata.find((d) => d.name === 'XYZ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"Il est également possible de copier tout ou une partie des entrées d'un tableau dans un nouveau tableau avec la méthode [**`slice`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).\n\nLa méthode `slice` accepte deux paramètres optionnels, qui représentent les indices de début et de fin de la copie. La méthode `slice` peut être utilisé pour créer une copie superficielle d'un sous-ensemble d'un tableau, ou si vous ne lui passez aucun argument, il créera une copie superficielle de tout le tableau.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"// Pour copier tout le tableau, sans argument\ndata12 = data.slice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"// Pour copier un sous-ensemble du tableau, ici de la cinquième à la dernière\ndata.slice(4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// Pour copier un sous-ensemble du tableau, ici de la première à la troisième entrée\ndata.slice(0, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"// Pour copier un sous-ensemble du tableau, ici deux entrées en partant de la fin du tableau\ndata.slice(-3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"### Sélection d'un sous-ensemble de caractéristiques ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"La méthode [**`map`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map) retourne un nouveau avec les résultats de l'appel d'une fonction fournie, appliquée sur chaque élément du tableau en entrée.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"// Obtenir un tableau ne contenant que les noms\ndata.map(function (d) { return d.name; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"// Obtenir un tableau ne contenant que certaines propriétés\ndata.map(function(d) {\n return {\n nom: d.name,\n taille: d.height,\n }\n}).filter((d) => d.taille !== null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// Obtenir un tableau après avoir modifié ou sélectionné les propriétés\ndata.map((d) => {\n const name = d.name;\n const h = (d.height === null) ? null : d.height / 100;\n // let h;\n // if (d.height === null) {\n // h = null;\n // } else {\n // h = d.height / 100\n // }\n return {\n name: name,\n height: h\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"Jusqu'ici j'ai toujours utilisé des fonctions fléchées et anonymes en argument des méthodes `map`, `filter` etc. mais il est tout à fait possible d'utiliser des fonctions définies autrement, comme ci-dessous :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"function extractTotalFruit(elem) {\n const totalFruit = elem.banana + elem.apple;\n return totalFruit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"data.map(extractTotalFruit)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"### Ajout de nouvelles informations\n\nIl peut parfois être utile d'ajouter de nouvelles informations à chaque entité d'un tableau de données.\n\nPar exemple, ici, nous souhaitons créer une nouvelle variable, pour chaque individu, nommée 'heightCategory' et décrivant la taille des individu avec une variable qualitative plutôt qu'avec une variable quantitative continue. Pour cela, nous créons un nouveau tableau de données, dérivé de l'ancien, toujours grâce à la méthode `map` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"data3 = data\n .filter((d) => d.height !== null) // On choisi ici d'exclure les individus pour lesquels height est null\n .map((d) => ({\n name: d.name, // On conserve les informations name, apple et banana inchangées\n apple: d.apple,\n banana: d.banana,\n heightCategory: d.height > 178 ? 'Tall' : (d.height > 165 ? 'Medium' : 'Small'),\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"Notez qu'il est également possible de modifier chaque élément d'un tableau de donner *inplace* grâce à la méthode [`forEach`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) (que nous rencontrerons à nouveau plus loin dans ce TP).\n\nÀ l'inverse de `map`, `forEach` ne créé pas de nouveau tableau : la fonction donnée en argument de `forEach` est appelée sur chaque élément du tableau, mais rien n'est retourné.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"data3.forEach((d) => {\n // Ici, pour chaque objet de notre tableau de données,\n // on créée une nouvelle propriété 'total_fruits'\n d.totalFruits = d.apple + d.banana;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"[2, 67, 45, 23, 12].sort((a, b) => b - a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// Obtenir une copie du tableau, trié selon la propriété `height`\ndata\n .slice()\n .sort((a, b) => a.height - b.height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Il est possible de chaîner ces différentes méthodes qui retournent un tableau : ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"// Obtenir le tableau filtrant les individus qui ont la propriété height puis en triant selon cette propriété\ndata.filter((d) => d.height !== null)\n .slice()\n .sort((a, b) => a.height - b.height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"### *Long* vs *Wide*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"En fonction du type de graphique ou du type d'analyse à réaliser, il est parfois nécessaire de transformer le jeu de données entre sa forme *large* (*wide*) et sa forme *longue* (*long*). Vous rencontrerez également parfois (dans mes supports, dans la documentation de certaines bibliothèque et dans des exemples sur cette plateforme) l'adjectif *tidy* pour désigner des données sous leur forme *long*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"Source: [Long vs. Wide Data: What’s the Difference?](https://www.statology.org/long-vs-wide-data/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"data2 = {\n // Le tableau qui va contenir le jeu de données transformé\n const result = [];\n // La procédure à appliquer pour chaque élément du jeu de données\n data.forEach((d) => {\n // Une entrée pour la variable 'apple'\n result.push({\n name: d.name,\n variable: \"apple\",\n value: d.apple\n });\n // Une entrée pour la variable 'banana'\n result.push({\n name: d.name,\n variable: \"banana\",\n value: d.banana\n });\n });\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// La conversion inverse peut se faire de la manière suivante\n{\n const result = [];\n\n data2.forEach((d) => {\n const existing = result.find((e) => e.name === d.name);\n if (existing) {\n existing[d.variable] = d.value;\n } else {\n result.push({\n name: d.name,\n [d.variable]: d.value\n });\n }\n });\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"### Joindre deux tableaux de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Méthodes offertes par la bibliothèque `D3.js`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"La bibliothèque D3, et en particulier le module [`d3-array`](https://d3js.org/d3-array) propose de nombreuses méthodes pour la manipuler des tableaux, les trier, les résumer, etc.\n\nNous allons ici voir une partie de ces fonctionnalités. N'hésitez pas à consulter la [documentation](https://d3js.org/d3-array) et les différents [notebook d'exemple](https://observablehq.com/collection/@d3/d3-array) pour en savoir plus.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"### Minimum, maximum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"d3.min([12, 4, 2, 5, 9])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"d3.max([12, 4, 2, 5, 9])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"Le premier argument correspond au tableau de données. La fonction utilisée en deuxième argument (optionnel) permet d'extraire la valeur à utiliser de chacun des objets du tableau passé en premier argument.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"d3.min(data, (d) => d.banana)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"d3.max(data, (d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Cela revient au même que d'extraire manuellement (avec `map`) le tableau de valeur à utiliser :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"d3.min(data.map((d) => d.banana))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"d3.max(data.map((d) => d.apple))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"### Minimum *et* maximum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"On peut récupérer simultanément le minimum et le maximum avec la fonction `extent` qui retourne un tableau de deux éléments, sous la forme `[min, max]`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"d3.extent(data, d => d.height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"### Sum, mean, median, deviation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"Les fonctions `sum`, `mean`, `median` et `deviation` fonctionnent de la même manière :\n- 1er argument : tableau de données\n- 2ème argument, optionnel : fonction pour accéder aux valeurs à utiliser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"d3.mean(data, (d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"d3.median(data, (d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"d3.sum(data, (d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"d3.deviation(data, (d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"### Group - Grouper des individus selon la modalité d'une variable\n\n`d3.group` va grouper des valeurs en fonction d'une clé ; cette fonction retourne un objet de type [`Map`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map).\n\nPar exemple, si nous reprenons notre jeu de données `data3` et que nous voulons grouper les individus en fonction de la valeur de la variable `heightCategory` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"d3.group(data3, d => d.heightCategory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"L'object `Map` renvoyé contient 3 clés (les 3 valeurs prises par la variable `heightCategory` dans notre jeu de données). À chacune de ces clés est associé un tableau, contenant les individus correspondant.\n\nOn peut aller plus loin et demander plusieurs niveau de regroupement, par exemple ici pour grouper selon les 3 modalités de la variables `heightCategory`, puis (au sein de chacun de ces trois groupes) par le genre (selon les 2 modalités \"Female\" et \"Male\") : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"d3.group(\n data3,\n d => d.heightCategory,\n d => d.name.endsWith('a') ? 'Female' : 'Male'\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"### Rollup - Calcul d'agrégats\n\nDans une logique similaire à `d3.group`, un besoin fréquent lorsqu'on analyse des données est le calcul des statistiques simples, par modalité d'une variable. Il est possible de réaliser cette opération avec la fonction `d3.rollup`. Cette fonction va prendre 3 paramètres :\n\n1. Le tableau de données\n2. La fonction permettant le calcul d'agrégat\n3. La fonction indiquant sur quel champs regrouper les éléments du tableau\n\nDans l'exemple suivant, nous allons calculer la moyenne du nombre de `apple` et de `banana` possédé par les individus, selon la modalité `heightCategory` (calculé plus haut dans la variable `data3`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"d3.rollup(\n data3,\n v => ({\n // Pour chaque groupe, un objet avec le nombre d'individu pris en compte,\n // la moyenne du nombre de bananes et la moyenne du nombre de pommes\n count: v.length,\n banana: d3.mean(v, e => e.banana),\n apple: d3.mean(v, e => e.apple),\n }), \n d => d.heightCategory,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"Comme pour `d3.group`, on peut aller plus loin et utiliser `d3.rollup` avec plusieurs niveau de regroupement, ici, d'abords selon la catégorie de taille, et au sein de chaque catégorie de taille, par genre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"d3.rollup(\n data3,\n v => ({\n count: v.length,\n banana: d3.mean(v, e => e.banana),\n apple: d3.mean(v, e => e.apple),\n }), \n d => d.heightCategory,\n d => d.name.endsWith('a') ? 'Female' : 'Male'\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"### Pie - Calcul d'angle pour un *pie chart*\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"pieConstructor = d3.pie()\n .value((d) => d.apple)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"pieConstructor(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"### Range - Générer des valeurs régulièrement espacées\n\n`d3.range` va permettre de générer des valeurs régulièrement espacées (de manière similaire à `numpy.linspace` en Python).\n\nDans sa forme la plus simple, avec un seul argument, elle va générer des valeurs partant de 0, jusqu'à la valeur spécifiée :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"d3.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"Lorsque deux arguments sont spécifiés, il s'agit de la valeur de départ et de la valeur d'arrivée : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"d3.range(5, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"Enfin, lorsqu'un troisième argument est utilisé, il s'agit de la distance entre chaque nombre généré (il s'agit sinon par défaut de `1`) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"d3.range(3, 15, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"## Premiers pas avec la syntaxe de Plot\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"Plot.plot({\n marks: [\n Plot.barY(data, {\n x: 'name', y: 'banana', // le nom en abscisse, le nombre de bananes en ordonnées\n fill: \"chartreuse\", stroke: \"black\", // des propriétés graphiques (même vocabulaire que SVG)\n strokeWidth: 0.4,\n }),\n Plot.frame(),\n ],\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"Pour réaliser un nuage de points (*scatter plot*) ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"Plot.plot({\n title: 'Scatter plot',\n inset: 10,\n // On ajoute manuellement un label pour l'axe des ordonnées\n y: { label: 'Total fruits' },\n marks: [\n Plot.dot(data, { // Des points\n x: 'height', // La taille en abscisse\n y: (d) => d.apple + d.banana, // La somme 'apple' + 'banana' en ordonnées, en utilisant une fonction\n stroke: 'rgb(121, 121, 255)', // Une même couleurs pour tous les individus (ici avec son code rgb)\n r: 4, // Un rayon de 4 pour tous les individus\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"## Autres ressources\n\n**Comparaisons/traductions entre le JavaScript et d'autres languages que vous connaissez peut-être :**\n\n- https://observablehq.com/@observablehq/data-wrangling-translations (traduction de différentes méthodes de manipulation de données entre R/Python/SQL/Excel/JavaScript)\n- https://observablehq.com/@observablehq/descriptive-statistics-translations (traduction de différentes méthodes de statistiques descriptives entre R/Python/SQL/Excel/JavaScript)\n\n**Pour aller plus loin sur la manipulation de données en JS:**\n\n- Les notebooks de la collection suivante : https://observablehq.com/collection/@berkeleyvis/learn-js-data (en particulier les derniers : *Regular Expressions*, *Working with Time*, *Checking Data Assumptions*)\n\n- Documentation [`d3-array`](https://d3js.org/d3-array)\n\n**Bibliothèque (non-utilisée dans ce cours) qui pourrait vous être utile pour manipuler des tableaux de données :**\n\n- [Arquero](https://uwdata.github.io/arquero/) - Une bibliothèque JS inspirée par `dplyr`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null