25:["$","title",null,{"children":"Intro d3 and turf | Etienne Côme | Observable"}] 4c: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(); }4d: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(); }4e: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" } ])} `4f: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; }50:T481,slide_style = html``51:[{"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}] 48:{"id":"58cb6c4717e7c45d","slug":"intro-d3","title":"Intro d3 and turf","thumbnail":"f9fb365fcbf0be7ece6645348028303a35950fcda0af523a8d76c2d74d21d640","access_level":"public","create_time":"$D2026-01-08T15:22:40.881Z","update_time":"$D2026-01-12T12:23:01.806Z","view_time":null,"first_public_time":"$D2026-01-09T12:51:57.972Z","has_unpublished_edits":null,"fork":{"id":"d511c8d62e4b5b47","slug":"tuto","title":"Observable pour les géographes","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"03f6575ff4fb45fd","login":"comeetie","name":"Etienne Côme","avatar_url":"https://avatars-next.observableusercontent.com/0c3db57846fd0e9ca9ec93f7af6b05bf25598b0b73f102907d6712762c0730fb","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3673,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb6334b2e599bc5a","login":"comeetie","name":"Etienne Côme","avatar_url":"https://avatars-next.observableusercontent.com/0c3db57846fd0e9ca9ec93f7af6b05bf25598b0b73f102907d6712762c0730fb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"03f6575ff4fb45fd","login":"comeetie","name":"Etienne Côme","avatar_url":"https://avatars-next.observableusercontent.com/0c3db57846fd0e9ca9ec93f7af6b05bf25598b0b73f102907d6712762c0730fb","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bb6334b2e599bc5a","login":"comeetie","name":"Etienne Côme","avatar_url":"https://avatars-next.observableusercontent.com/0c3db57846fd0e9ca9ec93f7af6b05bf25598b0b73f102907d6712762c0730fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro d3 and turf","cells":[{"id":3609,"value":"# Intro d3 and turf","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"slide`🗺️ D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"## 👉 how it works","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"**➡️ Principe 1 : la manipulation du DOM.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2582,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2592,"value":"With DOM and d3js we can do the same with :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2611,"value":"**➡️ d3.select()**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"**➡️ Bind data and use them to draw things**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"myData = [10, 20, 1, 20, 28]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2527,"value":"**➡️ Transitions**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2567,"value":"**➡️ Interactivity**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2669,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"## 👉 Ressources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"slide`🌐 Lets create a map with d3-geo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"## 👉 Lets start with a simple map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"- load a geojson file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"projection = d3.geoBertin1953()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"- Define the height of the map we want to create","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"- we may also create a sphere","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"- And use all of this to draw a wold map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"## 👉 Qualitative map, ie categogrial feature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3008,"value":"To transform data features to chanels color , size, ... we may use *d3-scale*. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1587,"value":"- Get some attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"regions = FileAttachment(\"continants.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"Inputs.table(regions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3023,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3028,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1631,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3642,"value":"And we may test it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1718,"value":"getcolor(\"Europe\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3021,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3033,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3006,"value":"## 👉 Choropleth map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3044,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3120,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"## 👉 Projections ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2359,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2400,"value":"proj4 = require(\"proj4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2407,"value":"On importe un fond de carte of europe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"slide`🌎 Turf.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"usa = world.features.find((d) => d.properties.ISO3 == \"USA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"## 👉 Buffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"## 👉 Difference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"myDiff = turf.rewind(turf.difference(mybuffer, usa), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"## 👉 Intersection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"NY = turf.point([-73.97104533120057, 40.78634539342028]) // lon, lat","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"myIntersect = turf.rewind(turf.intersect(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1876,"value":"## 👉 Union","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"myUnion = turf.rewind(turf.union(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"## 👉 Distances","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"Some more examples...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1757,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2911,"value":"import { zoom } from \"@d3/versor-zooming\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-voronoi@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null