30:T704,map = { for (let i = 0; i < 200; i++) { simulation.tick(); } const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); svg.call(template); svg .append("g") .append("path") .datum(departements) .attr("d", path) .style("fill", col1) .style("stroke", "white") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .attr("fill-opacity", 1); svg .append("g") .append("path") .datum(regions) .attr("d", path) .style("fill", "none") .style("stroke", "white") .attr("stroke-width", 1) .attr("fill-opacity", 1); // Texts svg .append("g") .selectAll("text") .data(notes.split("\n").reverse()) .join("text") .attr("x", 15) .attr("y", (d, i) => 1050 - i * 15) .attr("text-anchor", "start") .style("font-family", "Roboto") .style("font-size", "15px") .attr("fill", "#474747") .attr("fill-opacity", 0.7) .text((d) => d); svg .append("text") .attr("x", 20) .attr("y", 45) .attr("text-anchor", "start") .style("font-family", "Roboto") .attr("font-size", (d) => "30pt") .attr("fill", "#474747") .text(title); svg .append("g") .attr("fill-opacity", 0.9) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll("circle") .data(dots) .join("circle") .attr("fill", col2) //.attr("cx", (d) => projection([d.lat, d.lon])[0]) //.attr("cy", (d) => projection([d.lat, d.lon])[1]) .attr("cx", dorling ? (d) => d.x : (d) => projection([d.lat, d.lon])[0]) .attr("cy", dorling ? (d) => d.y : (d) => projection([d.lat, d.lon])[1]) .attr("r", r); return svg.node(); }31:T9c4,template = (selection) => { var defs = selection.append("defs"); const pattern = defs .append("pattern") .attr("id", "hatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 6) .attr("height", 6); pattern .append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 6) .attr("y1", 6) .attr("stroke", "#f4f4f4") .attr("stroke-width", 4) .attr("stroke-opacity", 0.9); const filter = defs .append("filter") .attr("id", "border-blur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 200) .attr("result", "shadow"); const shadow = defs .append("filter") .attr("id", "shadow") .attr("x", 0) .attr("y", 0) .attr("width", "200%") .attr("height", "200%"); shadow .append("feOffset") .attr("result", "offOut") .attr("in", "SourceAlpha") .attr("dx", 5) .attr("dy", 5); shadow .append("feGaussianBlur") .attr("result", "blurOut") .attr("in", "offOut") .attr("stdDeviation", 5); shadow .append("feBlend") .attr("in", "SourceGraphic") .attr("in2", "blurOut") .attr("mode", "normal"); selection .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "#9ACBE3") .attr("filter", "url(#border-blur)"); selection .append("rect") .attr("fill-opacity", 0.4) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "url('#hatch')"); selection .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", 65) .attr("fill", "white") .attr("fill-opacity", 0.5); selection .append("g") .append("path") .datum(land) .attr("d", path) .style("fill", "white") .attr("fill-opacity", 0.4); selection .append("g") .append("path") .datum(departements) .attr("d", path) .style("fill", "black") .attr("fill-opacity", 0.2) .attr("filter", "url(#shadow)"); selection .append("g") .append("text") .attr("x", 15) .attr("y", (d, i) => 1075) .attr("text-anchor", "start") .style("font-family", "Roboto") .style("font-size", "15px") .attr("fill", "#7abdc2") .text("CC BY 4.0 - https://observablehq.com/@neocartocnrs/geocode"); selection .append("g") .attr("transform", `translate(620, 900)`) .append("g") .call(scaleBar); }32:[] 2e:{"title":"Geocode & Make a Map Using API Adresse (fr)","cells":[{"id":0,"value":"md`# Geocode & Make a Map Using API Adresse (fr)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`In this notebook, I show how to use the \"API Adresse\" (https://geo.api.gouv.fr/adresse) to geocode addresses in France and display them on a map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`** 1 - Add a csv file**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"intro = md`You can download and use [this demo file](https://raw.githubusercontent.com/neocarto/resources/master/datasets/Alternatiba/MarcheClimat21sept2020.csv) form Alternatiba on Climate Strikes in France`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof csv = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"table1 = Table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"viewof field = Select(data.columns, {\n label: \"In which column are the names of the cities?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"table2 = Table(dots)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`**2 - Configure the map**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"viewof title = Text({\n label: \"Title\",\n value: \"\",\n placeholder: \"Title of the map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof r = Range([2, 20], {\n value: 5,\n step: 1,\n label: \"Dot sizes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof dorling = Toggle({ label: \"Avoid overlap\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"viewof col1 = color({\n value: \"#7abdc2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"viewof col2 = color({\n value: \"#9c1746\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"viewof notes = Textarea({\n label: \"Remarks\",\n placeholder: \"Authors\\nnotes\\nsources...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`**3 - Save the map**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"save = DOM.download(() => rasterize(map), \"Map\", \"Save in png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`** ----- Appendix ----- **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`- Data & geocoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"data = Generators.disposable(d3.csv(URL.createObjectURL(csv)), (x) =>\n x.dispose()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"dots = {\n let dots = [];\n let cities = data.map((d) => d[field]);\n\n for (let i = 0; i < cities.length; i++) {\n let json = await d3.json(\n \"https://api-adresse.data.gouv.fr/search/?q=\" +\n cities[i] +\n \"&type=municipality&autocomplete=1&limit=1\"\n );\n\n if (json.features[0] != undefined) {\n let coords = json.features[0].geometry.coordinates;\n let score = json.features[0].properties.score;\n dots.push({\n city: cities[i],\n lat: coords[0],\n lon: coords[1],\n score: score\n });\n }\n }\n return dots;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"simulation = d3\n .forceSimulation(dots)\n .force(\n \"x\",\n d3.forceX((d) => projection([d.lat, d.lon])[0])\n )\n .force(\n \"y\",\n d3.forceY((d) => projection([d.lat, d.lon])[1])\n )\n .force(\n \"collide\",\n d3.forceCollide((d) => 0.5 + r)\n )\n .stop()","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"md`- Cartography`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"departements = d3\n .json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/departements_nodom.topojson\"\n )\n .then((r) => topojson.feature(r, r.objects.DEPT))","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"regions = d3\n .json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/regions_nodom.topojson\"\n )\n .then((r) => topojson.feature(r, r.objects.regions))","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"land = d3\n .json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/world_nodom.topojson\"\n )\n .then((r) => topojson.feature(r, r.objects.world))","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"lambert93 = \"+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"height = 1090","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"width = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"projection = proj4d3(lambert93).fitExtent(\n [\n [30, 75],\n [width - 30, height - 30]\n ],\n departements\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"scaleBar = d3\n .geoScaleBar()\n .projection(projection)\n .size([0, 0])\n .left(0.9)\n .top(0.99)\n .units(d3.geoScaleKilometers)\n .distance(100)\n .label(\"100 km\")\n .labelAnchor(\"middle\")\n .tickSize(null)\n .tickValues(null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`- Librairies & imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"// from https://observablehq.com/@mbostock/saving-svg \n\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"// from https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer();\n const string = serializer.serializeToString(svg);\n return new Blob([string], { type: \"image/svg+xml\" });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"import {\n Select,\n Range,\n Toggle,\n Text,\n Textarea,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"proj4 = require(\"proj4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"// proj4d3() is a function developped by @fil. See https://observablehq.com/@fil/proj4js-d3\nfunction 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":13,"value":"d3 = require(\"d3@6\", \"d3-geo-scale-bar@1.0.2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}