25:["$","title",null,{"children":"La bibliothèque d3js | Nicolas Lambert | Observable"}] 2a:T4bd,{ let width = 500; let height = 75; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#CCC"); let tooltip = svg.append("g").append("text").text(""); svg .append("g") .attr("fill", "#e04a28") .selectAll("circle") .data(myData) .join("circle") .attr("cx", (d, i) => 50 + i * 100) .attr("cy", height / 2) .attr("r", (d) => d) .attr("fill", "#e04a28") .on("touchmove mousemove", function (e, d) { d3.select(this) .transition() .duration(500) .attr("fill", "#26374a") .attr("r", 25) .style("cursor", "pointer"); d3.select("#info").text(`Le cercle sélectionné a un rayon de ${d}`); }) .on("touchend mouseleave", function (event, d) { d3.select(this) .transition() .attr("fill", "#e04a28") .attr("r", (d) => d); d3.select("#info").text(""); }); // Tooltip let info = svg .append("g") .append("text") .attr("id", "info") .attr("font-family", "sans-serif") .attr("font-size", 7) .attr("fill-opacity", 1) .attr("x", 2) .attr("y", 8) .text(""); return svg.node(); }2b:T7cf,test = { // Dimensions du graphique et marges const width = 928; const height = 500; const marginTop = 30; const marginRight = 0; const marginBottom = 30; const marginLeft = 70; // document svg const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // AXE DES X // d3.scaleBand() crée une échelle discrète qui va convertir chaque valeur des données (domain) en une position sur l’axe (range), var x = d3 .scaleBand() .domain(sipri.map((d) => d.Supplier)) .range([marginLeft, width - marginRight]) .padding(0.1); // d3.axisBottom() est utilisé pour générer un axe horizontal placé en bas d’un graphique. svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // AXE DES Y // d3.scaleLinear() crée une échelle linéaire, c’est-à-dire une fonction qui transforme des valeurs numériques continues d’un domaine en une sortie sur un axe const y = d3 .scaleLinear() .domain([0, d3.max(sipri, (d) => d.TIV20202024)]) .range([height - marginBottom, marginTop]); // d3.axisLeft() est l’équivalent de d3.axisBottom(), mais pour un axe vertical placé à gauche du graphique. svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed())) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ TIV of arms exports (2020-2022)") ); // Dessin des rectangles svg .append("g") .attr("fill", "#55a37c") .selectAll() .data(sipri) .join("rect") .attr("x", (d) => x(d.Supplier)) .attr("y", (d) => y(d.TIV20202024)) .attr("height", (d) => y(0) - y(d.TIV20202024)) .attr("width", x.bandwidth()); return svg.node(); }2c:T4f1,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); // La sphère svg .append("g") .append("path") .datum(sphere) .attr("fill", " #a9daeb") .attr("d", path); // Les graticules svg .append("g") .append("path") .datum(d3.geoGraticule10()) .attr("d", path) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 0.8) .style("stroke-opacity", 0.5) .style("stroke-dasharray", 2); // Les pays svg .append("g") .selectAll("path") .data(world.features) .join("path") .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", "#d6b987") .attr("d", path); // Les cercles svg .append("g") .attr("fill", "#e04a28") .attr("fill-opacity", 0.9) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll("circle") .data( gdp .filter((d) => coordsbyid.has(d.id)) // filtre quand pas de données .sort((a, b) => d3.descending(a.pib2018, b.pib2018)) ) .join("circle") .attr("transform", (d) => `translate(${coordsbyid.get(d.id)})`) .attr("r", (d) => rayon(d.pib2018)); return svg.node(); }2d:[{"id":"09d55049d2003ffdcbf5cffe5e412f849f3e5b58e57591dd325990ed51515a0db12b3a202b4402e124f8224a758d7b4a41d7b37dbb77b8101690f2c17690bae7","href":"https://static.observableusercontent.com/files/09d55049d2003ffdcbf5cffe5e412f849f3e5b58e57591dd325990ed51515a0db12b3a202b4402e124f8224a758d7b4a41d7b37dbb77b8101690f2c17690bae7","name":"gdpppc.csv","type":"text/csv","lastModified":1695998941058.958,"size":4246},{"id":"e4d6044ba2c18741e70375be1a308cab93cfdb093ceb301215f901f6c01d9a1d9ee28df5cf7c5d0da103bf95c92c0148f7f11e95f0071e3ba83bdb7b7d1b76d2","href":"https://static.observableusercontent.com/files/e4d6044ba2c18741e70375be1a308cab93cfdb093ceb301215f901f6c01d9a1d9ee28df5cf7c5d0da103bf95c92c0148f7f11e95f0071e3ba83bdb7b7d1b76d2","name":"sipri.csv","type":"text/csv","lastModified":1698054285646.443,"size":161},{"id":"98ae7ed22db8570d5a661568fd6c2df1bc64c973c0ec586d499e0ceb2729c9a2cc82d6f92ae8229abfdd39d8997c99b98eb0fb1f922deff64a75ac35735d9e25","href":"https://static.observableusercontent.com/files/98ae7ed22db8570d5a661568fd6c2df1bc64c973c0ec586d499e0ceb2729c9a2cc82d6f92ae8229abfdd39d8997c99b98eb0fb1f922deff64a75ac35735d9e25","name":"countries.json","type":"application/json","lastModified":1695998268751.474,"size":288936},{"id":"b28dfdf6867d52960ef153d8a1a748d514b540ef973e550a51d03ceadc9d27ecd1457b8c77c861b2129602928c7a3b556a082c141c6ceba0d5d129bace376e31","href":"https://static.observableusercontent.com/files/b28dfdf6867d52960ef153d8a1a748d514b540ef973e550a51d03ceadc9d27ecd1457b8c77c861b2129602928c7a3b556a082c141c6ceba0d5d129bace376e31","name":"DOM-model.svg","type":"image/svg+xml","lastModified":1695994514284.3,"size":27634},{"id":"21b0371040f1dd14d529643c22a9fd148637bbaec68604c84ab74e2b87b3f53bcb4281536dfffe12c2a42a5a2d82745c674fec6c2079907d7d722f02d2f3cab2","href":"https://static.observableusercontent.com/files/21b0371040f1dd14d529643c22a9fd148637bbaec68604c84ab74e2b87b3f53bcb4281536dfffe12c2a42a5a2d82745c674fec6c2079907d7d722f02d2f3cab2","name":"d3jsgithub.png","type":"image/png","lastModified":1695994209071.719,"size":204966},{"id":"3e01ac3651fa7329b102b68b4cd9c8ff14205b59feac43533b2c438578201bf4f14abcc38ae83e817a6484fae0a7b426b7ff959e377bfab9d350d844dcaea5b9","href":"https://static.observableusercontent.com/files/3e01ac3651fa7329b102b68b4cd9c8ff14205b59feac43533b2c438578201bf4f14abcc38ae83e817a6484fae0a7b426b7ff959e377bfab9d350d844dcaea5b9","name":"d3.png","type":"image/png","lastModified":1695994138569.494,"size":21388},{"id":"87d3d537b0d1aca74a2b31d3dca1156ef233545becd4f26194691a4869f464775c66d5029e6015d85b800344d35336186f76902c09a0882f5c8cfda12fa30bf3","href":"https://static.observableusercontent.com/files/87d3d537b0d1aca74a2b31d3dca1156ef233545becd4f26194691a4869f464775c66d5029e6015d85b800344d35336186f76902c09a0882f5c8cfda12fa30bf3","name":"regions.csv","type":"text/csv","lastModified":1695998202901.02,"size":5382},{"id":"cf35a79d113300d8c3f28cf073da6a04232f41c1a13ce411e7acd89348add18ed769234226b8cad744e111f20e3c627718321ccd5ea31ddf8769661aac2e6d9c","href":"https://static.observableusercontent.com/files/cf35a79d113300d8c3f28cf073da6a04232f41c1a13ce411e7acd89348add18ed769234226b8cad744e111f20e3c627718321ccd5ea31ddf8769661aac2e6d9c","name":"gdp2018.csv","type":"text/csv","lastModified":1695999158761.519,"size":5299}] 28:{"id":"7f35661b6738dfad","slug":"la-bibliotheque-d3js","title":"La bibliothèque d3js","thumbnail":"affc02dc3cd69561bf9380057079053f475e0227d9da34b8060a05164eec6008","access_level":"public","create_time":"$D2023-09-28T15:44:50.509Z","update_time":"$D2025-11-26T10:59:29.587Z","view_time":null,"first_public_time":"$D2023-11-10T10:31:53.674Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"021e4058de70d966","slug":"observable-cest-quoi","title":"Observable pour les geographes","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"La bibliothèque d3js","cells":[{"id":0,"value":"# La bibliothèque `d3js`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"d3logo = FileAttachment(\"d3.png\").image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"

QU'EST CE QUE `D3JS` ?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"d3.js est une bibliothèque graphique JavaScript développée par Mike Bostock qui permet l'affichage de données numériques sous une forme graphique et dynamique. Elles est conforme aux normes W3C et utilise les technologies courantes **SVG**, **JavaScript** et **CSS** pour la visualisation de données. Cette bibliothèque a 10 ans !!! Nous en sommes à la 7e version. Et le développement continue. \n\n**d3.js** est une grosse librairie (plus de 1000 fonctions) qui fait beaucoup de choses. Depuis 2015, elle est composée de différents modules spécialisés.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"d3jsgithub = FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"

MANIPULATION DU DOM

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"d3.js, c'est une grosse boite à outil qui permet de manipuler le DOM (Document Object Model) pour dessiner n'importe quoi à partir de données (D3 signifie Data Driven Documents)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"Le **Document Object Model (DOM)** est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web. Par le DOM, la composition d'une page web est représentée sous forme d'un arbre avec des objets dedans.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"domModel = FileAttachment(\"DOM-model.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"Le DOM est une représentation en mémoire de la page web, que JavaScript est capable de manipuler.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":375,"value":"```html\n\n \n

Bonjour

\n \n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":377,"value":"Devient","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":379,"value":"```\ndocument\n └─ html\n └─ body\n └─ p\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"

COMMENT ÇA MARCHE ?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Avant, on aurait écrit ceci dans une cellule HTML : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":59,"value":"Avec le DOM et d3js, on écrit dorénavant ceci dans une cellule JavaScript :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":61,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .style(\"fill\", \"#e04a28\");\n\n svg\n .append(\"rect\")\n .attr(\"x\", 100)\n .attr(\"y\", 5)\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n .style(\"fill\", \"#5277bf\");\n\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"Avec **d3.select** (selecteur css), on peut modifier un objet à sa guise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":71,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n svg.append(\"circle\").attr(\"id\", \"mycircle\");\n svg.append(\"rect\").attr(\"class\", \"mysquare\");\n let mysquare2 = svg.append(\"rect\");\n\n svg\n .select(\"#mycircle\")\n .attr(\"fill\", \"#5277bf\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25);\n\n svg\n .select(\".mysquare\")\n .attr(\"fill\", \"#e04a28\")\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n .attr(\"x\", 100)\n .attr(\"y\", 5);\n\n mysquare2\n .attr(\"stroke\", \"#3c803f\")\n .attr(\"stroke-width\", 2)\n .attr(\"height\", 30)\n .attr(\"width\", 30)\n .attr(\"x\", 180)\n .attr(\"y\", 15);\n\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"

DESSINER À PARTIR DE DONNÉES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"On crée un tableau de donnée contenant 5 valeurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"myData = [10, 30, 20, 30, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"{\n const width = 500;\n const height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"circle\")\n .data(myData)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 50 + i * 100)\n .attr(\"cy\", height / 2)\n .attr(\"r\", (d) => d);\n\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"Même chose avec la hauteur de barres","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":397,"value":"myData2 = [10, 30, 20, 30, 70]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"{\n const width = 500;\n const height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"rect\")\n .data(myData2)\n .join(\"rect\")\n .attr(\"x\", (d, i) => 25 + i * 100) // position horizontale\n .attr(\"y\", (d) => height - d) // position verticale : y en haut du rectangle\n .attr(\"width\", 40) // largeur fixe des rectangles\n .attr(\"height\", (d) => d); // hauteur selon la donnée\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"Ou même une courbe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":407,"value":"myData3 = [40, 30, 20, 30, 70]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"{\n const width = 500;\n const height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n // 1️⃣ Les rectangles\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"rect\")\n .data(myData3)\n .join(\"rect\")\n .attr(\"x\", (d, i) => 25 + i * 100)\n .attr(\"y\", (d) => height - d)\n .attr(\"width\", 40)\n .attr(\"height\", (d) => d);\n\n // 2️⃣ La ligne qui relie les sommets\n const line = d3\n .line()\n .x((d, i) => 25 + i * 100 + 20) // +20 pour centrer sur le rectangle\n .y((d) => height - d);\n\n svg\n .append(\"path\")\n .datum(myData3)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#000\") // couleur de la ligne\n .attr(\"stroke-width\", 2)\n .attr(\"d\", line);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"

TRANSITIONS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"**`.transition()`** permet d'animer un objet et/ou de faire varier ses propriétés. \n**`.duration()`** permet de définir la durée de la transition. \n**`.delay()`** permet de définir un temps d'attente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":105,"value":"viewof play = Inputs.button(\"Play\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n let moncercle = svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n if (play) {\n moncercle\n .transition()\n .duration(2000)\n .attr(\"cx\", 450)\n .transition()\n .delay(2000)\n .duration(3000)\n .attr(\"cx\", 50)\n .attr(\"r\", 10)\n .attr(\"fill\", \"blue\")\n .transition()\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n }\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"Même chose à partir de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"viewof play2 = Inputs.button(\"Play\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"{\n let width = 500;\n let height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"circle\")\n .data(myData)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 50 + i * 100)\n .attr(\"cy\", height / 2)\n .attr(\"r\", 10);\n if (play2) {\n svg\n .selectAll(\"circle\")\n .transition()\n .duration(2000)\n .attr(\"r\", (d) => d);\n }\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"

INTERACTIVITÉ

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"

DESSINER UN GRAPHIQUE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":292,"value":"Ici, nous voulons faire un diagramme en barres à partir des données des pays vendeurs d'armes fournies par le [SIPRI](https://armstrade.sipri.org/armstrade/page/toplist.php) (2022-2022).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":297,"value":"sipri = FileAttachment(\"sipri.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"En résumé, on peut faire n'importe quel graphique avec d3.js. Mais aucun graphique n'est vraiment clé en main. Heureusement, il suffit souvent de recopier un code existant et de l'adapter à ses données. voir https://observablehq.com/@d3/gallery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"

AFFICHER DES DONNÉES GÉOMÉTRIQUES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":132,"value":"Comme son nom l'indique, **d3-geo** est le module de d3 pour faire des calculs et des transformations sur le globe. Le module contient les projections de bases et tout un tas de fonctions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"On charge les données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"On définit les paramètres de la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":142,"value":"projection = d3.geoNaturalEarth1() // Voir https://d3js.org/d3-geo/projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"Définition du path (c-à-d la fonction qui va convertir les coordonnées du geoJSON en lat/long en chemin svg sur la page)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":148,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"On peut définir aussi la sphère (aka l'espace terrestre dans une projection donnée)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":163,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"Puis, on dessine la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":167,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path); // En SVG, l'attribut d définit un tracé à dessiner\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path) // En SVG, l'attribut d définit un tracé à dessiner\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n // DATUM\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(world) // Datum lit le tableau de données d'un coup => affiche tout de la même façon.\n .attr(\"fill\", \"#508bab\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.2)\n .attr(\"d\", path); // En SVG, l'attribut d définit un tracé à dessiner\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"

CARTE QUALITATIVE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":176,"value":"Import de données attributaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":174,"value":"regions = FileAttachment(\"regions.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"Inputs.table(regions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"On peut récupérer le modalités comme ceci","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"On définit une palette de couleurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":184,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"On crée une fonction pour associer une couleur à chaque continent, puis à chaque pays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":199,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"getcolor(\"Africa\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"cols.get(\"FRA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"Puis, on peut dessiner la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":216,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path);\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"g\")\n //.attr(\"fill\", \"white\")\n .selectAll(\"path\")\n .data(world.features) // data lit chaque features pour itérer dessus\n .join(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"fill\", (d) => cols.get(d.properties.ISO3) || \"white\") // Blanc si pas de données\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"

CARTE CHOROPLÈTHE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":229,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"Inputs.table(gdpppc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"Comme précédemment, on créée un fonction pour associer les identifiants des pays à des couleurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":239,"value":"quantile = d3\n .scaleQuantile()\n .domain(gdpppc.map((d) => d.gdppc2018))\n .range(d3.schemeReds[6])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"colbyid.get(\"FRA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"Puis on peut dessiner la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":246,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path);\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"fill\", (d) =>\n colbyid.get(d.properties.ISO3) == undefined\n ? \"white\"\n : colbyid.get(d.properties.ISO3)\n )\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"Legend(\n d3.scaleQuantile(\n gdpppc.map((d) => Math.round(d.gdppc2018)),\n d3.schemeReds[6]\n ),\n {\n title: \"PIB par habitant en 2018\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"

SYMBOLES PROPORTIONNELS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":253,"value":"gdp = FileAttachment(\"gdp2018.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"Inputs.table(gdp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"On définit une fonction pour passer de la valeur au rayon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":259,"value":"rayon = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, size])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"Et ci-dessous, une petite fonction récupérée [ici](https://observablehq.com/@xangregg/proportional-geographic-scatterplot-by-country) pour déterminer le plus grand polygone (pour pouvoir y placer le centroide)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":263,"value":"// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)\nlargestPolygon = function (d) {\n var best = {};\n var bestArea = 0;\n d.geometry.coordinates.forEach(function (coords) {\n var poly = { type: \"Polygon\", coordinates: coords };\n var area = d3.geoArea(poly);\n if (area > bestArea) {\n bestArea = area;\n best = poly;\n }\n });\n return best;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"On crée une map donnant le centroïde de chaque polygone. En cas de polygone multi partie, on se place au centre du plus grand polygone. Ici, les coordonnées sont données dans le plan du document svg (et non en lat/lon).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":267,"value":"coordsbyid = new Map(\n world.features\n .map((d) => {\n d.properties.position = d3.geoCentroid(\n d.geometry.type == \"Polygon\" ? d : largestPolygon(d)\n );\n return d;\n })\n .map((d) => [d.properties.ISO3, projection(d.properties.position)])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"C'est fini, on peut faire la carte. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":363,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"viewof size = Inputs.range([0, 150], { label: \"k\", value: 75 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"

BILAN

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":282,"value":"d3js reste une bibliothèque relativement bas niveau. Elle permet de tout faire, mais nécessite d'écrire beaucoup de code. De nombreuses bibliothèques basées sur d3 permettent de faciliter les choses. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 29:"$28:body" 24:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/la-bibliotheque-d3js;307;"}