28:null 29:["$","title",null,{"children":"La bibliothèque d3js | Nicolas Lambert | Observable"}] 2e:T4b8,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(""); display(svg.node())2f:T7c3,// 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()); display(svg.node()) 30:T4e8,const svg = d3 .create("svg") .attr("viewBox", [0, 0, 1000, 500]) .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)); display(svg.node())31:[{"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}] 2c:{"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":"$D2026-09-21T09:28:45.617Z","view_time":null,"first_public_time":"$D2023-11-10T10:31:53.674Z","has_unpublished_edits":null,"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":564,"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,"lapsed":null,"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","output":"","database":"$undefined"},{"id":22,"value":"d3logo = FileAttachment(\"d3.png\").image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"

QU'EST CE QUE `D3JS` ?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":27,"value":"d3jsgithub = FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"

MANIPULATION DU DOM

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$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","output":"","database":"$undefined"},{"id":49,"value":"domModel = FileAttachment(\"DOM-model.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":375,"value":"```html\n\n \n

Bonjour

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

COMMENT ÇA MARCHE ?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"Avant, on aurait écrit ceci dans une cellule HTML : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":61,"value":"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 display(svg.node())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":71,"value":"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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"

DESSINER À PARTIR DE DONNÉES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":90,"value":"const myData = [10, 30, 20, 30, 5]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"const width = 500;\nconst 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 display(svg.node())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"Même chose avec la hauteur de barres","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"const myData2 = [10, 30, 20, 30, 70]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"Ou même une courbe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"const myData3 = [40, 30, 20, 30, 70]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"

TRANSITIONS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":105,"value":"let play = view(Inputs.button(\"Play\"))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"Même chose à partir de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"let play2 = view(Inputs.button(\"Play\"))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"

INTERACTIVITÉ

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"$2e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"

DESSINER UN GRAPHIQUE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":297,"value":"const sipri = FileAttachment(\"sipri.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"$2f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":35,"value":"

AFFICHER DES DONNÉES GÉOMÉTRIQUES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":134,"value":"On charge les données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"const world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"On définit les paramètres de la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"const projection = d3.geoNaturalEarth1() // Voir https://d3js.org/d3-geo/projection","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":148,"value":"const path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":163,"value":"const sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"Puis, on dessine la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":" const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 1000, 500])\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 display(svg.node())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"

CARTE QUALITATIVE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"Import de données attributaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"const regions = FileAttachment(\"regions.csv\").csv()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"Inputs.table(regions)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"On peut récupérer le modalités comme ceci","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"const types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"On définit une palette de couleurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"const colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":199,"value":"const getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"getcolor(\"Africa\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"const cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"cols.get(\"FRA\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"Puis, on peut dessiner la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 1000, 500])\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 display(svg.node())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"

CARTE CHOROPLÈTHE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"const gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"Inputs.table(gdpppc)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":239,"value":"const quantile = d3\n .scaleQuantile()\n .domain(gdpppc.map((d) => d.gdppc2018))\n .range(d3.schemeReds[6])","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"const colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"colbyid.get(\"FRA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"Puis on peut dessiner la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 1000, 500])\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 display(svg.node())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"

SYMBOLES PROPORTIONNELS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"const gdp = FileAttachment(\"gdp2018.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"Inputs.table(gdp)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":259,"value":"const rayon = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, size])","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":263,"value":"// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)\nconst largestPolygon = 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":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"","database":"$undefined"},{"id":267,"value":"const 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":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"C'est fini, on peut faire la carte. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"let size = view(Inputs.range([0, 150], { label: \"k\", value: 75 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"$30","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"

BILAN

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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","output":"","database":"$undefined"},{"id":7,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2d:"$2c:body"