2b:null 2c:["$","title",null,{"children":"Drawing a (zoomable) map with SVG | Matthieu Viry | Observable"}] 31:T490,function draw(transform) { const map = d3.select('svg'); if (transform.k === 1 && transform.x === 0 && transform.y === 0) { // First draw map.select('g.layer-comm') .attr('stroke', '#fff') .attr('stroke-width', communePathWidth) .selectAll('path') .data(data.communes) .join('path') .attr('d', path) .attr('fill', d => d.properties.color); map.select('g.layer-dep') .attr('stroke', colorDep) .attr('stroke-width', depPathWidth) .selectAll('path') .data(data.dep_borders) .join('path') .attr('d', path) .attr('fill', 'transparent'); } else { // Scale / translate the path and scale the stroke width d3.selectAll('g.layer-comm > path') .attr('stroke-width', communePathWidth / transform.k) .attr('fill', d => d.properties.color) .attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')') d3.selectAll('g.layer-dep > path') .attr('stroke-width', depPathWidth / transform.k) .attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')') } }32:T4f3,data = { const reproj = (geom) => { if (geom.type == 'Polygon') { geom.coordinates = geom.coordinates.map((ring) => ring.map((coords) => proj([coords[0], coords[1]]))) } else { geom.coordinates = geom.coordinates.map((poly) => poly.map((ring) => ring.map((coords) => proj([coords[0], coords[1]])))) } } const communes = topojson.feature(topo, topo.objects['COMMUNES']) .features .filter((ft) => !ft.properties.INSEE_COM.startsWith('97')); const dep_borders = []; const colors = d3.scaleThreshold([0.1066126856, 0.1684411684, 0.2428484480, 0.3405466970, 0.4773218143, 0.6891651865, 1.0783847981, 2.1997656708], d3.schemeReds[9]); const deps = new Map(); communes.forEach((ft) => { const id_dep = ft.properties.INSEE_COM.slice(0, 2); ft.properties.CODE_DEP = id_dep; ft.properties.color = colors(ft.properties.Densite); if (!deps.has(id_dep)) { deps.set(id_dep, true); } reproj(ft.geometry); }); Array.from(deps.keys()).forEach((code_dep) => { dep_borders.push( topojson.merge( topo, topo.objects['COMMUNES'].geometries.filter((d) => d.properties.CODE_DEP === code_dep ))); }); dep_borders.forEach((g) => { reproj(g); }); return { communes, dep_borders }; }33:[{"id":"56cd6e588fa4a047d0615793baaf45775256579ac956587a341abab38b767d62ea791320475842674930f5adf7c36101a4ba7d6c60d1c9608286a40caa64412e","href":"https://static.observableusercontent.com/files/56cd6e588fa4a047d0615793baaf45775256579ac956587a341abab38b767d62ea791320475842674930f5adf7c36101a4ba7d6c60d1c9608286a40caa64412e","name":"COMMUNES.topojson","type":"application/octet-stream","lastModified":1665331990451.372,"size":20233245}] 2f:{"id":"38e1e289e22cc590","slug":"drawing-a-map-with-svg","title":"Drawing a (zoomable) map with SVG","thumbnail":"e1bafee450d553639d34fcbeb19e7ae60ebb69f3eba740156caee97c235cb622","access_level":"public","create_time":"$D2022-10-09T16:12:39.555Z","update_time":"$D2022-11-09T20:28:51.429Z","view_time":null,"first_public_time":"$D2022-10-10T13:11:54.378Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024"},"version":111,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"23ee4c7a69f391ef","slug":"drawing-maps-with-various-renderer","title":"Drawing maps with various renderer","owner":{"id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry"}},"type":"notebook","body":{"title":"Drawing a (zoomable) map with SVG","cells":[{"id":0,"value":"# Drawing a (zoomable) map with SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"This is a small demo of using the SVG in combination with `d3.geoPath` and `d3.geoConicConformal` to draw a map. \n\nThe main goal is to see the difference in rendering and performance with the native Canvas API and the PixiJS API. \n\nIn each case, the data are projected in Lambert-93 only once during data preparation so that the time required for this is not taken into account when measuring rendering time. \n\nSee other notebooks :\n- [@mthh/map-native-canvas-api](https://observablehq.com/@mthh/map-native-canvas-api) for the same map, drawn with Canvas API,\n- [@mthh/map-pixijs](https://observablehq.com/@mthh/map-pixijs) for the same map, drawn with PixiJS.\n\nThe dataset contains ${data.communes.length} polygons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":110,"value":"*Try changing some parameters (or panning/zooming on the map) to see how long it takes to update the map.* \n*In this example we draw the geometries once, then only update the `fill`, `stroke-width` and `transform` attributes of our SVG elements.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof communePathWidth = Inputs.range([0, 2], {value: 0.1, step: 0.1, label: \"Commune border width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"viewof depPathWidth = Inputs.range([0.5, 4], {value: 2, step: 0.1, label: \"Departement border width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viewof clicks = Inputs.button(\"New color scale\", { reduce: () => { toggleColor(); timeDraw(); } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":33,"value":"svg = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"timeDraw();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"function timeDraw() {\n const a = performance.now();\n draw(transform)\n const b = performance.now();\n if (!firstDraw) {\n mutable firstDraw = Math.round((b-a) * 100) / 100;\n }\n document.querySelector('#a-time').innerHTML = `First draw took ${firstDraw}ms
Last redraw or update took ${Math.round((b-a) * 100) / 100}ms
SVG size: ${width}x${height}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"mutable firstDraw = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"#### Cartographic projection\n\nWe can use `d3.geoConicConformal` to define the lambert 93 projection, for this we need :\n- use the standard parallels 44° and 49°,\n- use 3° as the original longitude,\n- use 46°30' (or 46.5 decimal degrees) as the original latitude.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"// Lambert-93 as per https://geodesie.ign.fr/contenu/fichiers/Lambert93_ConiquesConformes.pdf, p.2.\nproj = d3.geoConicConformal()\n .parallels([44, 49])\n .rotate([-3, -46.5])\n .scale(3200)\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"#### Drawing on SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"d3.select('svg').call(d3.zoom().on(\"zoom\", ({transform: t}) => { mutable transform = t}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"mutable transform = ({k: 1, x: 0, y: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"toggleColor = (function () {\n let i = 0\n return function toggleColor() {\n const arr = [d3.schemeReds[9], d3.schemeBlues[9], d3.schemeGreens[9], d3.schemeGreys[9], d3.schemeOranges[9]];\n const ix = ++i % arr.length;\n const colors = d3.scaleThreshold([0.1066126856, 0.1684411684, 0.2428484480, 0.3405466970, 0.4773218143, 0.6891651865, 1.0783847981, 2.1997656708], arr[ix]);\n data.communes.forEach((ft) => {\n ft.properties.color = colors(ft.properties.Densite);\n });\n };\n}())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"topo = FileAttachment(\"COMMUNES.topojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"height = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"colorDep = '#333c4e'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"