42:null 43:["$","title",null,{"children":"Faire des graphiques avec D3.js - Une introduction | BUT SD - Cours Programmation Web Dataviz | Observable"}] 49:T561,

4a:T55d,## D3 D3 (ou D3.js - pour *Data-Driven Documents*) est une bibliothèque JavaScript gratuite et open source, créée en 2011 par Mike Bostock, pour la visualisation des données. Son approche est plutôt de bas niveau et est basée sur les normes Web afin d'offrir une grande flexibilité dans la création de graphiques dynamiques basés sur les données. La bibliothèque D3 est en réalité une collection d'environ 30 modules (`d3-select`, `d3-scale`, `d3-array`, `d3-transition`, etc.) qu'il est possible d'importer séparément ou ensemble. Une partie de ces modules (`d3-select`, `d3-transition`, etc.) et liée à la manipulation du DOM alors que l'autre partie (`d3-array`, etc.) est seulement liée à la manipulation des données. ## Le DOM [Wikipedia]() définit le DOM (*Document Object Model*) comme étant une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web. Concrètement il s'agit de l'arbre des éléments HTML qui est créé dans votre page Web, à partir du document HTML, lorsque celui-ci est parsé par le navigateur Web. ### SVG Nous utiliserons le SVG pour dessiner les graphiques à réaliser avec D3.js. Si vous avez besoin d'un rappel sur les éléments SVG (primitives géométriques, etc.) vous pouvez consulter le [notebook dédié](). ### Canvas 4b:T7e9,D3 propose deux méthodes simples pour sélectionner des éléments HTML : `d3.select` et `d3.selectAll`. Ces deux méthodes sont comparables à `document.querySelector` et `document.querySelectorAll` mais elles vont retourner un objet permettant d'utiliser d'autres méthodes de D3 et de chaîner l'appel à différentes méthodes. ### d3.select Par exemple pour sélectionner le `button` avec l'id `my-button`, changer la valeur de sa propriété `disabled` et changer la valeur de sa propriété CSS `color` : ```js d3.select('button#my-button') .attr('disabled', false) .style('color', 'red') .text('Confirmation'); ``` Cela est équivalent, en JavaScript natif, à : ```js const b = document.querySelector('button#my-button'); b.setAttribute('disabled', false); b.style.color = 'red'; b.innerText = 'Confirmation'; ``` ### d3.selectAll Admettons que nous souhaitons désormais modifier l'attribut et de le style de tous les boutons : ```js d3.selectAll('button') .attr('disabled', false) .style('color', 'red'); ``` Cela est équivalent, en JavaScript natif, à : ```js const buttons = document.querySelectorAll('button'); buttons.forEach((b) => { b.setAttribute('disabled', false); b.style.color = 'red'; }) ``` ### d3.append, d3.insert et d3.create ```js d3.select('body') .append('div') .attr('class', 'container'); ``` Cela équivaut a écrire en JavaScript natif : ```js const body = document.querySelector('body'); const myDiv = document.createElement('div'); myDiv.className = 'container'; body.appendChild(myDiv); ``` Il est également possible de créer un élément sans l'ajouter directement au DOM, avec `d3.create`. C'est généralement ce que nous utiliserons dans Observable puisque nous renverrons l'élément HTML parent en sortie de la cellule pour que celui-ci soit affiché dans le notebook (voir exemple ci-dessous). Lorsque vous travaillerez dans des documents HTML vous utiliserez généralement la syntaxe présenter au-dessus (`d3.select(...).append(...)`).4c:T475,const w = 300; const height = 100; const dataset = [4, 5, 2, 1, 9]; const spaceBetweenCircle = w / dataset.length - 1; const svg = d3.create('svg'); svg .selectAll('circle') .data(dataset) .enter() .append('circle') .attr('cy', height / 2) // position constante sur l'axe Y .attr('cx', (d, i) => i * spaceBetweenCircle + spaceBetweenCircle / 2) // position sur l'axe X en fonction de l'indice de l'objet .attr('r', (d) => d) // pour chaque cercle on prend la valeur de rayon définies dans les données .attr('fill', 'black') .attr('stroke', 'red') .attr('stroke-width', 2) .on('mouseover', (event) => { // On sélectionne le circle qui a été survolé const circle = d3.select(event.target); // On modifie une ou plusieurs de ses propriétés circle.attr('fill', 'yellow') .attr('stroke', 'black'); }) .on('mouseout', (event) => { // On sélectionne le circle qui a été quitté par le curseur const circle = d3.select(event.target); // On modifie une ou plusieurs de ses propriétés circle.attr('fill', 'black') .attr('stroke', 'red'); }); display(svg.node())4d:T486,const dataset = [3, 15, 12, 11, 20]; const w = 300; const height = 200; const nbBar = dataset.length; // Le nombre de barre const spaceBetweenBar = 5; // L'espace entre les barres const widthBar = w / nbBar; // La largeur de chaque barre // Création d'une échelle linéaire const scale = d3.scaleLinear() .domain([0, d3.max(dataset)]) // l'étendue des données à représenter (données en entrées) .range([0, height]) // la plage de sortie (en dimension de la visualisation) // Création d'un élément SVG const svg = d3.create('svg') .attr("width", w) .attr("height", height); // Création d'un groupe ('g') pour contenir les barres const bars = svg.append('g') .attr('class', 'bars'); // Lier les données au graphique a créer bars.selectAll('rect') .data(dataset) .enter() .append('rect') .attr('x', (d, i) => i * widthBar) // Position sur l'axe horizontal .attr('y', (d) => height - scale(d)) // Position sur l'axe vertical, grace à l'échelle .attr('width', widthBar - spaceBetweenBar) // Largeur de la barre .attr('height', (d) => scale(d)); // Hauteur de la barre, grace à l'échelle display(svg.node())4e:Tc5d,// Les dimensions de l'élément SVG const svgWidth = width; const svgHeight = svgWidth / 3; // On créé l'élément SVG const svg = d3.create('svg') .attr('width', svgWidth) .attr('height', svgHeight); // Espace entre les barres const margin = 5; // Marge en bas du graphique, pour mettre les étiquettes de l'axe 'x' const marginBottom = svgHeight / 10; // Marge à gauche, pour mettre les étiquettes de l'axe 'y' const marginLeft = svgWidth / 20; // Marge en haut, pour mettre le titre const marginTop = marginBottom; // Dimension de la zone de dessin des barres (dimensions du SVG moins les marges) const w = svgWidth - marginLeft; const h = svgHeight - marginBottom - marginBottom; // Largeur de chaque barre const barWidth = w / newData.length // Une échelle linéaire permettant de mapper les valeur d'entrée // vers une position (hauteur) sur l'axe 'y' const yScale = d3.scaleLinear() .domain([0, d3.max(newData, d => d.population)]) // Domaine en entré .range([h, 0]) // En SVG, les coordonnées partent du coin supérieur gauche, on inverse donc la plage de sortie de l'échelle // 1. On ajoute les barres : // Création du groupe SVG (g) qui va acceuillir les barres. // On le décalle des valeurs de marges calculées précédemment : const bars = svg.append('g') // La valeur y est calculée depuis le haut, nous avons donc besoin de marginLeft et marginTop .attr('transform', `translate(${marginLeft}, ${marginTop})`); bars.selectAll('rect') .data(newData) .enter() .append('rect') .attr('x', (d, i) => i * barWidth) .attr('width', barWidth - margin) .attr('y', d => yScale(d.population)) // utiliser yScale pour y .attr('height', d => h - yScale(d.population)) // modifier la hauteur .attr('fill', 'steelblue') // un peu de couleur // 2. On ajoute les étiquettes de l'axe 'x' : const cityNames = svg.append('g') .attr('transform', `translate(${marginLeft}, ${marginTop})`); cityNames.selectAll('text') .data(newData) .enter() .append('text') .attr('x', (d, i) => i * barWidth + barWidth / 2) .attr('y', h + 20) .attr('text-anchor', 'middle') .attr('font-size', '13px') // pour avoir la même typographie que sur l'axe y .attr('font-family', 'sans-serif') // pour avoir la même typographie que sur l'axe y .text(d => d.nom) // 3. On ajoute l'axe 'y' et ses étiquettes : // utiliser la nouvelle échelle pour l'axe 'y' const axisY = d3.axisLeft().scale(yScale) // formatter les valeurs .tickFormat(d => `${d / 1000}k`) // le nombre de valeurs présentées .ticks(6); svg.append('g') .attr('transform', `translate(${marginLeft - 3}, ${marginTop})`) .attr('font-family', 'sans-serif') // pour avoir la même typographie que sur l'axe x .attr('font-size', '13px') // pour avoir la même typographie que sur l'axe x .call(axisY) // 4. On ajoute un titre au graphique svg.append('g') .attr('transform', 'translate(20, 20)') .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 800) .attr('font-size', '18px') .text('Mon premier graphique avec D3.js') // 5. Le graphique est fini, on peut retourner l'élément SVG display(svg.node())4f:Tadb,const w = 600; const h = 400; const svg = d3.create('svg') .attr('width', w) .attr('height', h); // On utilise la fonction d3.arc qui va s'occuper de // déssiner les arcs de cercle pour nous const arcCreator = d3.arc() .innerRadius(0) .outerRadius(h / 2) // une échelle pour la couleur, comme vu plus haut // (en utilisant une palette de couleur catégorielle) const colors = d3.scaleOrdinal() .domain(fruitBasket.map(d => d.fruit)) .range(d3.schemePastel1) // un groupe pour centrer le camembert const pie = svg.append('g') .attr('transform', `translate(${h / 2}, ${h / 2})`) pie.selectAll('path') .data(pieData) .enter() .append('path') // Cette fois on utilise un chemin ('path') et non plus un 'rect' ou un 'circle' .attr('d', arcCreator) // La fonction responsable de dessiner le chemin pour les données actuelle .attr('fill', (d) => colors(d.data.fruit)) .on('mouseover', (event, d) => { // On sélectionne le texte grace à sa classe // et on modifie la valeur d'opacité d3.select(`.text-${d.data.fruit}`) .attr('opacity', 1) }) .on('mouseout', (event, d) => { // On sélectionne le texte grace à sa classe // et on modifie la valeur d'opacité d3.select(`.text-${d.data.fruit}`) .attr('opacity', 0); }); // On ajoute un texte avec le nombre de fruit concerné pour chaque secteur // mais on définie l'opacité à 0 // Cette opacité sera modifié (à 1) lors du survol sur le secteur correspondant pie.selectAll('text') .data(pieData) .enter() .append('text') // On met un nom de classe différent pour chaque texte, // pour permettre de sélectionner le bon texte // dans les gestionnaire d'événement mouseover / mouseout .attr('class', (d) => `text-${d.data.fruit}`) // .centroid permet de trouver le centre de la tranche .attr('transform', d => `translate(${arcCreator.centroid(d)})`) .attr('text-anchor', 'middle') .attr('opacity', 0) .text((d) => `${d.data.count} ${d.data.fruit}s`) // On va également créer une légende // Pour cela, on va lié un tableau contenant le nom des fruits // avec des rectangles et des textes const legend = svg.append('g') .attr('transform', `translate(${h-10})`) const rectWidth = 20 // On va réutiliser l'échelle de couleurs, comme lors du dessin des secteurs legend.selectAll('rect') .data(pieData) .enter() .append('rect') .attr('x', 0) .attr('y', (d, i) => i * rectWidth) .attr('width', rectWidth) .attr('height', rectWidth) .attr('fill', (d) => colors(d.data.fruit)); // les noms de fruits legend.selectAll('text') .data(pieData) .enter() .append('text') .attr('x', rectWidth * 1.5) .attr('y', (d, i) => i * rectWidth + rectWidth * 0.75) .text(d => d.data.fruit); display(svg.node())50:Tb4b,// Les dimensions du graphique à créer const w = 600, h = 500, margin = 25; // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin. const radius = Math.min(w, h) / 2 - margin; // On créé un élément SVG aux dimensions choisies const svg = d3.create("svg") .attr("width", w) .attr("height", h); // Le groupe auquel on va ajouté nos éléments const group = svg .append("g") .attr("transform", `translate(${w/2},${h/2})`); // Échelle de couleur const colorScale = d3.scaleOrdinal() .domain(fruitBasket.map(d => d.fruit)) .range(d3.schemeDark2); // Le générateur d'arc const arc = d3.arc() .innerRadius(radius * 0.5) // La taille du trou dans le donut .outerRadius(radius * 0.8); // Un autre générateur d'arc, qui ne sera pas dessiné mais qui sera utilisé // pour placer les labels (on le fait légérement plus grand que le précédent) const outerArc = d3.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9); // Construction du donut chart de la même manière que pour le pie chart group .selectAll('allSlices') .data(pieData) // Notez qu'en lieu et place de .enter().append('path') // on peut utiliser directement .join('path') // Nous verrons plus d'info à ce sujet plus tard... .join('path') .attr('d', arc) .attr('fill', d => colorScale(d.data.fruit)) .attr("stroke", "white") .style("stroke-width", "2px") .style("opacity", 0.7); // Ajout de lignes entre les labels et le centre de la zone concernée // sur le donut chart group .selectAll('allPolylines') .data(pieData) .join('polyline') .attr("stroke", "black") .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = arc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }); // Ajout des labels group .selectAll('allLabels') .data(pieData) .join('text') .text(d => d.data.fruit) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1); pos[1] += 4; return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }); display(svg.node())51:[] 47:{"id":"08d7c8fd289a9153","slug":"faire-des-graphiques-avec-d3-js","title":"Faire des graphiques avec D3.js - Une introduction","thumbnail":"7cab053ae8afdf13dc64ffdfb629520222d83aee8eecd2c3180ec573db4450ef","access_level":"public","create_time":"$D2023-08-25T16:18:08.140Z","update_time":"$D2026-10-19T18:30:49.762Z","view_time":null,"first_public_time":"$D2023-11-03T16:16:37.118Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","bio":"Voir la page Web du cours pour retrouver l'ensemble des supports.","following":false},"version":514,"publish_version":514,"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":"","following":false}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"fcbf8027d5457b45","slug":"guide-et-exemples","title":"Guide et exemples","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"titling":"auto","title":"Faire des graphiques avec D3.js - Une introduction","cells":[{"id":0,"value":"# Faire des graphiques avec D3.js - Une introduction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":455,"value":"

Support de cours pour les étudiants 2026-2027 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## Sélection et ajout d'éléments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"// On créé un élément HTML SVG qui va contenir notre graphique\nconst svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 200);\n\n// On ajoute les différents éléments souhaités\nsvg\n .append('ellipse')\n .attr('rx', 50)\n .attr('ry', 40)\n .attr('cx', 100)\n .attr('cy', 100)\n .attr('fill', 'green');\n\n// On retourne l'élément HTML\ndisplay(svg.node());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"### Joindre des données à des éléments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"const dataset = [4, 5, 2, 1, 9];\n\nconst div = d3.create('div');\n\ndiv\n .selectAll('p')\n .data(dataset)\n .enter()\n .append('p')\n .text((d) => `* J'ai la valeur ${d}`);\n\ndisplay(div.node());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"Une fois que des éléments ont été joints à une liste de données, la donnée est accessible avec la fonction `(d, i)` où `d` représente la donnée (ici `4`, puis `5`, puis `2`, etc.) et `i` son indice dans le tableau de données (`0`, puis `1`, etc.).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"### Écouter des événements\n\nIl va être possible d'écouter les différents types d'événements (`mouseover`, `mouseout`, `click`, `contextmenu`, etc.) et d'y associer un gestionnaire d'événement (c'est à dire une fonction qui s'exécute lorsque l'événement se produit) grâce à D3.\n\nToujours en utilisant les données `[4, 5, 2, 1, 9]` de l'exemple précédent, nous allons créer plusieurs cercles et leur associer des gestionnaires d'événement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"$4c","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"### Une première tentative de graphique...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"const dataset = [3, 15, 12, 11, 20];\n\nconst w = 300;\nconst height = 200;\n\nconst nbBar = dataset.length; // Le nombre de barre\nconst spaceBetweenBar = 5; // L'espace entre les barres\nconst widthBar = w / nbBar; // La largeur de chaque barre\n\n// Création d'un élément SVG\nconst svg = d3.create('svg')\n .attr(\"width\", w)\n .attr(\"height\", height);\n\n// Création d'un groupe ('g') pour contenir les barres\nconst bars = svg.append('g')\n .attr('class', 'bars');\n\n// Lier les données au graphique a créer\nbars.selectAll('rect')\n .data(dataset)\n .enter()\n .append('rect')\n .attr('x', (d, i) => i * widthBar) // Position sur l'axe horizontal\n .attr('y', (d) => height - d) // Position sur l'axe vertical\n .attr('width', widthBar - spaceBetweenBar) // Largeur de la barre\n .attr('height', (d) => d); // Hauteur de la barre\n\ndisplay(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"Nous voyons à peine les barres (en tout cas elles n'utilisent pas toute la hauteur disponible). En effet, la valeur de la propriété `height` correspond directement à la valeur lue dans les données.\n\nIl est nécessaire de mettre les données à l'échelle de la taille du graphique que nous voulons réaliser. Pour cela nous allons utiliser le module `d3-scale`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"### Avec `d3-scale` ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"Les échelles associent une dimension de données abstraites à une représentation visuelle.\n\nBien qu'elles soient le plus souvent utilisées pour coder des données sous forme de position, par exemple pour faire correspondre le temps et la température à une position horizontale et verticale dans un nuage de points, les échelles peuvent représenter pratiquement n'importe quel codage visuel, tel que la couleur, l'épaisseur du trait ou la taille d'un symbole. Les échelles peuvent également être utilisées avec pratiquement n'importe quel type de données, telles que les données catégorielles nommées ou les données discrètes qui nécessitent des ruptures sensibles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"Notez que les échelles proposées par `d3-scale` sont particulièrement puissantes et utiles lors de la création de visualisation de données :\n- échelles linéaires\n- échelles logarithmique\n- échelles temporelles\n- échelles séquentielles ou divergentes (pour encoder les données sous forme de couleurs)\n- etc.\n\n[Voir la documentation de `d3-scale` pour en savoir plus](https://d3js.org/d3-scale).\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"const color = d3.scaleSequential()\n .domain(d3.extent([2, 5, 1, 9, 8])) // Le domaine en entrée : l'étendue ([min, max]) des données\n .range([\"white\", \"blue\"]) // La plage de couleur vers laquelle les données doivent être mappées","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"color(1) // Renvoit du blanc (les valeurs inférieure à 9, le min de notre domain, retourneront aussi du blanc)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"color(4) // Renvoit une couleur à mi-chemin entre blanc et bleu","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"color(9) // Renvoit du bleu (les valeurs supérieure à 9, le max de notre domain, retourneront aussi du bleu)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"On peut aussi utiliser les [schémas de couleurs]() existant dans d3 :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"Et également utiliser des échelles ordinales (catégorielles), c'est à dire avec un `range` et un `domain` discret :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"const colorOrd = d3.scaleOrdinal()\n .domain(['France', 'Allemange', 'Italie', 'Pays-Bas', 'Espagne'])\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"colorOrd('France')","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"colorOrd('Espagne')","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"const colorOrd2 = d3.scaleOrdinal()\n .domain(['France', 'Allemange', 'Italie', 'Pays-Bas', 'Espagne'])\n .range(['blue', 'yellow', 'green', 'orange', 'red'])","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"colorOrd2('France')","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"### `d3-scale` et `d3-axis`\n\nReprenons la création de notre diagramme à barres !\n\nNous allons désormais utiliser des données sous une forme plus proche de ce que vous manipulerez par la suite, et cherchons à finir ce diagramme en barre ; ajout des axes et des étiquette des axes.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"const newData = [\n { nom: 'Lausanne', population: 138905 },\n { nom: 'Yverdon-les-Bains', population: 30143 },\n { nom: 'Montreux', population: 26574 },\n { nom: 'Renens', population: 21036 },\n { nom: 'Nyon', population: 20533 },\n { nom: 'Vevey', population: 19827 },\n];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$4e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"Nous avons pu mettre en oeuvre les principaux éléments permettant de faire un diagramme en barres. Il reste toutefois quelques éléments qui auraient pu être mis en place pour faire un graphique similaire à ceux qu'il est possible d'obtenir avec la bibliothèque Plot :\n- Nom des axes (indispensable ici au moins pour l'axe Y)\n- Grille et cadre (optionnels)\n- Tooltip (optionnel)\n- Etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"Plot.plot({\n title: 'Le même graphique avec Plot',\n x: { label: null },\n width: width,\n height: width / 3,\n marginLeft: 50,\n grid: true,\n marks: [\n Plot.barY(\n newData,\n {x:'nom', y: 'population', fill: 'steelblue', tip: true, sort: { x: 'y', reverse: true } }\n ),\n Plot.ruleY([0]),\n Plot.frame(),\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"Attention, cette comparaison n'a pas vocation à vous dire \"n'utilisez pas D3.js\" !!\n\nComme toujours en informatique, il faut utiliser l'outil adéquat pour la tâche à réaliser !\n\nPar exemple, pour créer le diagramme à barre précédent, l'utilisation de D3.js n'apporte que peu de bénéfices par rapport à la bibliothèque Plot (au dépend d'un volume de code bien plus important !).\n\nCertains visualisations de données (en raison de l'interactivité que vous souhaitez y ajouter, en raison du haut niveau de personnalisation que vous souhaitez appliquer, ou tout simplement dans le cas de l'utilisation d'une *marque* non disponible dans Plot) gagnerons à être réalisées avec D3.js.\n\n\nPrenons l'exemple des diagrammes circulaires : actuellement Plot ne propose pas (encore) de marquer permettant de les réaliser.\n\nBien que nous ayons vu dans le 1er CM qu'il ne s'agissait pas de la meilleure méthode pour représenter les données, il peut être utile de savoir faire cette représentation (demande d'un client, etc.).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"## Un diagramme circulaire avec D3.js\n\n\nNous avons vu que les diagrammes circulaires peuvent servir à comparer des valeurs quantitatives lorsque la somme des valeurs à un sens (par exemple lorsque les valeurs sont exprimées sous forme de pourcentage et dont la somme fait 100).\n\nCréons un jeu de données appropriés pour cela : il s'agit du contenu de mon panier de fruit. La somme des valeurs à un sens puisqu'il s'agit du nombre total de fruit dont je dispose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"const fruitBasket = [\n { fruit: 'Apple', count: 2 },\n { fruit: 'Banana', count: 6 },\n { fruit: 'Mango', count: 3 },\n];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"const getPieData = d3.pie()\n .value((d) => d.count); // la fonction utilisée pour extraire la valeur de chaque objet","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"const pieData = getPieData(fruitBasket)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"const w = 400;\nconst h = 400;\n\nconst svg = d3.create('svg')\n .attr('width', w)\n .attr('height', h);\n\n// On utilise la fonction d3.arc qui va s'occuper de\n// déssiner les arcs de cercle pour nous\nconst arcCreator = d3.arc()\n .innerRadius(0)\n .outerRadius(h / 2)\n\n// une échelle pour la couleur, comme vu plus haut\n// (en utilisant une palette de couleur catégorielle)\nconst colors = d3.scaleOrdinal()\n .domain(fruitBasket.map(d => d.fruit))\n .range(d3.schemePastel1)\n\n// un groupe pour centrer le camembert\nconst pie = svg.append('g')\n .attr('transform', `translate(${h / 2}, ${h / 2})`)\n\npie.selectAll('path')\n .data(pieData)\n .enter()\n .append('path') // Cette fois on utilise un chemin ('path') et non plus un 'rect' ou un 'circle'\n .attr('d', arcCreator) // La fonction responsable de dessiner le chemin pour les données actuelle\n .attr('fill', (d) => colors(d.data.fruit))\n\ndisplay(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"### Avec une légende et des interactions...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$4f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"### Et pour faire un donut chart ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"$50","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 48:"$47:body"