30:T499,{ 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); 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(); }31:T456,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); let path = d3.geoPath(newproj); var defs = svg.append("defs"); defs .append("path") .datum({ type: "Sphere" }) .attr("id", "sphere") .attr("d", path); defs .append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#sphere"); // 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", "#e3876b") .attr("d", path) .attr("clip-path", "url(#clip)"); return svg.node(); }32:T976,md`${previews([ { path: "@neocartocnrs/dotdensity-map", thumbnail: "62f6a1fda968ec4e49478e7e5d052761620d42aa132c63813dadd0809f3884c6", title: "Cartes par point", author: "@neocarto" }, { path: " @neocartocnrs/mapping-discontinuities", thumbnail: "8504c68b8514d761d4835c4635f018ae63c566995b9d4ab9a3f5aadb806ee58f", title: "Discontinuités", author: "@neocarto" }, { path: "@neocartocnrs/bars-pubs-in-paris", thumbnail: "c14ad9d8a458f600b460a5b3e9817c9884b08a15fb38b659ab9493a91b49c625", title: "Lissage", author: "@neocarto" }, { path: "@neocartocnrs/paris-by-road-osrm", thumbnail: "a1be7164788a85fabf433269c8837a40208795edc848905596b56b2db99f73e9", title: "Acessibilité", author: "@neocarto" }, { path: " @neocartocnrs/passeports-colors", thumbnail: "e3464b83849ff71ee3fb0a0cf5410f0ebaa402fbccbf9f1fe6a3072dbc3bce9b", title: "Passeports", author: "@neocarto" }, { path: " @neocartocnrs/rectangle-cartogram", thumbnail: "18022570caa0673fbf138f17bac3c4d8595b1cbd96255a9a8b24af83d07a3172", title: "Recmap", author: "@neocarto" }, { path: " @neocartocnrs/world-elevation-line-map", thumbnail: "3b1d8240d18ba5fe76550304654aaa77e84e83717412580ab43e275e9ebd9be8", title: "LineMap", author: "@neocarto" }, { path: " @neocartocnrs/dorling-cartogram", thumbnail: "623547d97c3bd2acd81bb9e6e4c3dcb04bcb76484d5fbe6db3d23686562c6a9c", title: "Dorling", author: "@neocarto" }, { path: " @neocartocnrs/mashroom-map", thumbnail: "d320c996932d720e0aa2cf53519ef27b172dddf198e75eb4900a33ac8751dcbf", title: "Champignons", author: "@neocarto" }, { path: "@neocartocnrs/the-organization-of-cartographers-for-social-equality", thumbnail: "2a691ec7f823812d27deda14adafc9955c7ed1589f69641a9d114f21c33b094d", title: "Projection transition", author: "@neocarto" }, { path: "@neocartocnrs/elevation", thumbnail: "237890b83c26dadd45f4947befb444c6c906ff66f0bb16c15cd19836d35f01eb", title: "Elevation Scan", author: "@neocarto" }, { path: "@neocartocnrs/mapping-a-route-from-some-gps-coordinates", thumbnail: "f3391f8f5ffab30b415f5c91ba74e55258bbedd275213339c30522d265fe1daf", title: "La vie de Julienne", author: "@neocarto" } ])} `33:T8d4,slide = { function slide() { const container = document.createElement("div"); container.className = "slide"; container.appendChild(md.apply(this, arguments)); return container; } function end() { const container = document.createElement("div"); container.className = "end"; return container; } slide.end = end; function iframe(strings) { const container = document.createElement("div"); container.innerHTML = ""; container.className = "slide"; return container; } slide.iframe = iframe; function html(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; return container; } slide.html = html; function htmldark(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html dark"; return container; } slide.htmldark = htmldark; function code(strings) { const container = document.createElement("div"); const pre = container.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); container.className = "slide slide--code"; return container; } slide.code = code; slide.js = function () { const container = code.apply(this, arguments); const content = container.firstChild.firstChild; content.className = "js hljs javascript"; hl.highlightBlock(content); return container; }; slide.img = function (strings) { const img = new Image(); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; img.src = string.trim(); img.className = "slide slide--img"; return img; }; return slide; }34:T481,slide_style = html``35:[{"id":"928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","href":"https://static.observableusercontent.com/files/928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","name":"continants.csv","type":"text/csv","lastModified":1767885760881.856,"size":5383},{"id":"a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","href":"https://static.observableusercontent.com/files/a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","name":"countries.json","type":"application/json","lastModified":1767885760881.856,"size":278433},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1767885760881.856,"size":204966},{"id":"26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","href":"https://static.observableusercontent.com/files/26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","name":"gdpppc.csv","type":"text/csv","lastModified":1767885760881.856,"size":4247}] 2e:{"title":"Intro d3 and turf","cells":[{"id":3609,"value":"# Intro d3 and turf","pinned":false,"hidden":false,"mode":"md"},{"id":3670,"value":"**This notebook is a fork of https://observablehq.com/@neocartocnrs/tuto a ormation support from @neocarto for the consortium [Imageo](https://imageo.hypotheses.org/). ⤵️**","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"slide`🗺️ D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"D3.js (for Data-Driven Documents) is a JavaScript graphics library developed by Mike Bostock that allows numerical data to be displayed in a dynamic graphical form. It complies with W3C standards and uses common SVG, JavaScript, and CSS technologies for data visualization. This library is 10 years old! We are now on the 7th version.","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"Like plot, d3.js is automatically loaded into Observable. But you can load the version you want with require:\n\n\n~~~js\nd3 = require(\"d3@7\")\n~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":1338,"value":"\n\nd3.js is a large library that does a lot of things. Since 2015, it has been composed of various specialized modules.","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"## 👉 how it works","pinned":false,"hidden":false,"mode":"md"},{"id":1412,"value":"**➡️ Principe 1 : la manipulation du DOM.**","pinned":false,"hidden":false,"mode":"md"},{"id":1814,"value":"The **Document Object Model (DOM)** is a programming interface standardized by the W3C that allows scripts to examine and modify the content of a web browser. Through the DOM, the composition of a web page is represented as a tree with objects inside it.","pinned":false,"hidden":false,"mode":"md"},{"id":2582,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html"},{"id":2592,"value":"With DOM and d3js we can do the same with :","pinned":false,"hidden":false,"mode":"md"},{"id":1434,"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 .attr(\"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 .attr(\"fill\", \"#5277bf\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2611,"value":"**➡️ d3.select()**","pinned":false,"hidden":false,"mode":"md"},{"id":2616,"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(\"fill\", \"none\")\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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"**➡️ Bind data and use them to draw things**","pinned":false,"hidden":false,"mode":"md"},{"id":1358,"value":"myData = [10, 20, 1, 20, 28]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1366,"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\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2527,"value":"**➡️ Transitions**","pinned":false,"hidden":false,"mode":"md"},{"id":2534,"value":"*transition()* allow to animate things from one property state to another.\n\n*.duration()* define the duration.\n\n*.delay()* define an intitial delay.","pinned":false,"hidden":false,"mode":"md"},{"id":2537,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n let monrectangle = svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n\n monrectangle\n .transition()\n .duration(2000)\n .attr(\"cx\", 450)\n .transition()\n .delay(2000)\n .duration(3000)\n .attr(\"cx\", 30)\n .attr(\"r\", 10)\n .attr(\"fill\", \"blue\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2561,"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 .transition()\n .duration(2000)\n .attr(\"r\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2567,"value":"**➡️ Interactivity**","pinned":false,"hidden":false,"mode":"md"},{"id":2669,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1347,"value":"## 👉 Ressources","pinned":false,"hidden":false,"mode":"md"},{"id":1345,"value":"- https://observablehq.com/@d3/learn-d3\n- https://www.freecodecamp.org/news/d3js-tutorial-data-visualization-for-beginners/#create-a-world-map-with-d3.js","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"slide`🌐 Lets create a map with d3-geo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"As its name suggests, d3-geo is the d3 module for performing calculations and transformations on geographic objects. The module contains basic projections and a whole host of functions.","pinned":false,"hidden":false,"mode":"md"},{"id":1475,"value":"## 👉 Lets start with a simple map","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"- load a geojson file","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"- Define the projection (librairie d3-geo-projection@4). Voir : https://github.com/d3/d3-geo-projection","pinned":false,"hidden":false,"mode":"md"},{"id":1482,"value":"projection = d3.geoBertin1953()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1511,"value":"- Define the height of the map we want to create","pinned":false,"hidden":false,"mode":"md"},{"id":1495,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":1514,"value":"- Create a path function with this projection (i.e. a function that may convert the coordinates lat/long in svg path string)","pinned":false,"hidden":false,"mode":"md"},{"id":1497,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1522,"value":"- we may also create a sphere","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1517,"value":"- And use all of this to draw a wold map","pinned":false,"hidden":false,"mode":"md"},{"id":1531,"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 // Sphere ie background\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #d7eef4\")\n .attr(\"d\", path); \n\n // Graticules d3.geoGraticule10() create graticule of 10 degree\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 // world map\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(world) \n .attr(\"fill\", \"#decd87\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", path); \n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"## 👉 Qualitative map, ie categogrial feature","pinned":false,"hidden":false,"mode":"md"},{"id":3008,"value":"To transform data features to chanels color , size, ... we may use *d3-scale*. ","pinned":false,"hidden":false,"mode":"md"},{"id":1587,"value":"- Get some attributes","pinned":false,"hidden":false,"mode":"md"},{"id":1584,"value":"regions = FileAttachment(\"continants.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1590,"value":"Inputs.table(regions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"- Lets create the scale function, we start by picking some colors, they will be used to define the range of the scale","pinned":false,"hidden":false,"mode":"md"},{"id":3023,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3636,"value":" - We need also to define the domain of the scale i.e. the possible values we may found in the data","pinned":false,"hidden":false,"mode":"md"},{"id":3028,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3640,"value":"With this two ingredient we may build the scale function that will associate a color to each continent","pinned":false,"hidden":false,"mode":"md"},{"id":1631,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3642,"value":"And we may test it","pinned":false,"hidden":false,"mode":"md"},{"id":1718,"value":"getcolor(\"Europe\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1698,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1575,"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) => cols.get(d.properties.ISO3))\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3021,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3033,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2309,"value":"NB : some countries appear in black. A problem in the join beetween feature and base map","pinned":false,"hidden":false,"mode":"md"},{"id":3006,"value":"## 👉 Choropleth map","pinned":false,"hidden":false,"mode":"md"},{"id":3044,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3042,"value":"quantile = d3\n .scaleQuantile()\n .domain(gdpppc.map((d) => d.gdppc2018))\n .range(d3.schemeReds[6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3120,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3113,"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"},{"id":3065,"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"},{"id":2317,"value":"## 👉 Projections ?","pinned":false,"hidden":false,"mode":"md"},{"id":2339,"value":"d3 has its own projection system, based on javascript function and some not so available elsewhere.","pinned":false,"hidden":false,"mode":"md"},{"id":2359,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2345,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2383,"value":"But it's also possible to use classical projection thanks to the *proj4js* with the *[proj4d3](https://observablehq.com/@fil/proj4js-d3)* (by Philippe Rivière).","pinned":false,"hidden":false,"mode":"md"},{"id":2400,"value":"proj4 = require(\"proj4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2402,"value":"function proj4d3(proj4string) {\n const degrees = 180 / Math.PI,\n radians = 1 / degrees,\n raw = proj4(proj4string),\n p = function (lambda, phi) {\n return raw.forward([lambda * degrees, phi * degrees]);\n };\n p.invert = function (x, y) {\n return raw.inverse([x, y]).map(function (d) {\n return d * radians;\n });\n };\n const projection = d3.geoProjection(p).scale(1);\n projection.raw = raw;\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2407,"value":"On importe un fond de carte of europe","pinned":false,"hidden":false,"mode":"md"},{"id":2757,"value":"europe = d3\n .json(\n \"https://gisco-services.ec.europa.eu/distribution/v2/nuts/topojson/NUTS_RG_20M_2021_4326_LEVL_0.json\"\n )\n .then((r) => topojson.feature(r, r.objects.NUTS_RG_20M_2021_4326))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2409,"value":"We use the proj4 string to define the official european projection ([EPSG 3035 - ETRS89 / LAEA](https://spatialreference.org/ref/epsg/etrs89-etrs-laea/))","pinned":false,"hidden":false,"mode":"md"},{"id":2386,"value":"epsg3035 = \"+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2388,"value":"laea = proj4d3(epsg3035).fitExtent(\n [\n [0, 0],\n [width, height]\n ],\n {\n type: \"FeatureCollection\",\n features: europe.features.filter((d) => d.properties.NUTS_ID != \"FR\")\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2418,"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 let path = d3.geoPath(laea);\n\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"class\", \"graticule\")\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"#4e658a\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#ebe6e6\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(europe)\n .attr(\"fill\", \"#e68ed7\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"slide`🌎 Turf.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, as well as data classification and statistical tools. See https://github.com/Turfjs/turf & https://turfjs.org/","pinned":false,"hidden":false,"mode":"md"},{"id":1825,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"usa = world.features.find((d) => d.properties.ISO3 == \"USA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1822,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(usa)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"## 👉 Buffer","pinned":false,"hidden":false,"mode":"md"},{"id":1840,"value":"mybuffer = turf.rewind(\n turf.buffer(usa, 50, { units: \"kilometers\", endCapStyle: \"round\" }),\n { reverse: true }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1846,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(mybuffer)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(usa)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke-dasharray\", 3)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"## 👉 Difference","pinned":false,"hidden":false,"mode":"md"},{"id":1855,"value":"myDiff = turf.rewind(turf.difference(mybuffer, usa), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myDiff)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1859,"value":"## 👉 Intersection","pinned":false,"hidden":false,"mode":"md"},{"id":1862,"value":"NY = turf.point([-73.97104533120057, 40.78634539342028]) // lon, lat","pinned":true,"hidden":false,"mode":"ojs"},{"id":1864,"value":"NY650km = turf.rewind(\n turf.buffer(NY, 650, { units: \"kilometers\", endCapStyle: \"round\" }),\n { reverse: true }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1866,"value":"myIntersect = turf.rewind(turf.intersect(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1868,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myDiff)\n .attr(\"fill\", \"#EEE\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(myIntersect)\n .attr(\"fill\", \"#dc7be3\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(NY650km)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-dasharray\", 3)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"## 👉 Union","pinned":false,"hidden":false,"mode":"md"},{"id":1879,"value":"myUnion = turf.rewind(turf.union(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1881,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myUnion)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1.4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1883,"value":"## 👉 Distances","pinned":false,"hidden":false,"mode":"md"},{"id":1887,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1889,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1891,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1893,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1895,"value":"{\n let width = 1000;\n let height = 400;\n let projection = d3\n .geoMercator()\n .scale(400)\n .translate([width / 2 - 400, height / 2 + 390]);\n let path = d3.geoPath(projection);\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(greatCircle)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#3d3d3d\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-dasharray\", 4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1806,"value":"Some more examples...","pinned":false,"hidden":false,"mode":"md"},{"id":1757,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2911,"value":"import { zoom } from \"@d3/versor-zooming\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-voronoi@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}