2d:null 2e:["$","title",null,{"children":"Map Projection Distortion | Nikita Sharov | Observable"}] 33:T84a,// based on: https://observablehq.com/@d3/tissots-indicatrix circles = { const coordinates = []; const appendCircles = (extent, stepping) => { const [[xMin, yMin], [xMax, yMax]] = extent; const [stepX, stepY] = stepping; const circle = d3.geoCircle() .center(d => d) .radius(2.5) .precision(10); // upper right quadrant let yStart = 0; while (yStart < yMin) { yStart += stepY; } let xStart = 0; while (xStart < xMin) { xStart += stepX; } for (let y = yStart; y <= yMax; y += stepY) { for (let x = xStart; x <= xMax; x += stepX) { coordinates.push(circle([x, y]).coordinates); } } // bottom right quadrant yStart = 0 - stepY; while (yStart > yMax) { yStart -= stepY; } xStart = 0; while (xStart < xMin) { xStart += stepX; } for (let y = yStart; y >= yMin; y -= stepY) { for (let x = xStart; x <= xMax; x += stepX) { coordinates.push(circle([x, y]).coordinates); } } // bottom left quadrant yStart = 0; while (yStart > yMax) { yStart -= stepY; } xStart = 0 - stepX; while (xStart > xMax) { xStart -= stepX; } for (let y = yStart; y >= yMin; y -= stepY) { for (let x = xStart; x >= xMin; x -= stepX) { coordinates.push(circle([x, y]).coordinates); } } // upper left quadrant yStart = 0 + stepY; while (yStart < yMin) { yStart += stepY; } xStart = 0 - stepX; while (xStart > xMax) { xStart -= stepX; } for (let y = yStart; y <= yMax; y += stepY) { for (let x = xStart; x >= xMin; x -= stepX) { coordinates.push(circle([x, y]).coordinates); } } } if (localDistortions.minorCrossings) { appendCircles(minorExtentTargets, minorStepTargets); } if (localDistortions.majorCrossings) { appendCircles(majorExtentTargets, majorStepTargets); } return {type: "MultiPolygon", coordinates}; }34:[] 31:{"id":"b8342be7406bb6f3","slug":"map-projection-distortion","title":"Map Projection Distortion","thumbnail":"7a24ad1663c911e50dd1ac37a3ff59dce675ad5eb7c319ba7f36de7e07dd42d3","access_level":"public","create_time":"$D2020-12-10T11:27:16.293Z","update_time":"$D2021-02-22T10:47:19.649Z","view_time":null,"first_public_time":"$D2020-12-10T15:44:19.096Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":"starter_2024"},"version":456,"publish_version":456,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}],"members":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c820f2af0d45ff3a","slug":"cartography","title":"Cartography","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"title":"Map Projection Distortion","cells":[{"id":0,"value":"md`# Map Projection Distortion\n\nA slightly different approach demonstrating [d3-geo-projection](https://github.com/d3/d3-geo-projection)s based on [d3.**geoGraticule**](https://github.com/d3/d3-geo#geoGraticule) which\n\n> Constructs a geometry generator for creating graticules: a uniform grid of meridians and parallels for showing projection distortion. The default graticule has meridians and parallels every 10° between ±80° latitude; for the polar regions, there are meridians every 90°.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {projections} from \"@nikita-sharov/map-projection-classification\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`## Projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof surface = {\n const options = [\n \"Cylindrical\",\n \"Pseudocylindrical\",\n \"Conic\",\n \"Pseudoconic\",\n \"Polyconic\",\n \"Azimuthal\",\n \"Pseudoazimuthal\",\n \"Miscellaneous\"\n ];\n \n return radio({\n title: \"Surface\",\n options,\n value: options[options.length - 1]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof metrics = {\n const metrics = projections.filter(d => d.metrics !== undefined)\n .map(d => d.metrics)\n .flat();\n \n const uniqueMetrics = [...new Set(metrics)];\n let options = uniqueMetrics.sort(); \n \n return checkbox({\n title: \"Metrics\",\n options,\n value: options[0]\n }); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof construction = { \n const constructions = projections.filter(d => d.construction !== undefined)\n .map(d => d.construction)\n .flat();\n\n const uniqueConstructions = [...new Set(constructions)];\n return checkbox({\n title: \"Construction\",\n options: uniqueConstructions.sort()\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof name = {\n let filteredProjections = projections.filter(d => (d.surface === surface) && !d.unsuitable);\n \n if (metrics.length > 0) {\n filteredProjections = filteredProjections.filter(d => d.metrics)\n .filter(d => d3.intersection(d.metrics, metrics).size === metrics.length);\n }\n \n if (construction.length > 0) {\n filteredProjections = filteredProjections.filter(d => d.construction)\n .filter(d => d3.intersection(d.construction, construction).size === construction.length);\n }\n \n if (filteredProjections.length === 0) {\n throw \"No matching projections found.\";\n }\n \n let options = filteredProjections.map(d => d.name).sort();\n return radio({\n title: \"Name\",\n options,\n value: options[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Graticule`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof horizontalExtent = inputsGroup(\n [\n [\n rangeSlider({\n title: \"Minor extent, longitude\",\n min: -180,\n max: 180,\n value: [\n minorExtentDefaults[0][0],\n minorExtentDefaults[1][0]\n ],\n step: 10,\n format: v => `${v}°`\n }),\n rangeSlider({\n title: \"Major extent, longitude\",\n min: -180,\n max: 180,\n value: [\n majorExtentDefaults[0][0],\n majorExtentDefaults[1][0]\n ],\n step: 10,\n format: v => `${v}°`\n })\n ]\n ],\n [\n [\n \"minor\",\n \"major\"\n ]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof verticalExtent = inputsGroup(\n [\n [\n rangeSlider({\n title: \"Minor extent, latitude\",\n min: -90,\n max: 90,\n step: 5,\n value: [\n minorExtentDefaults[0][1],\n minorExtentDefaults[1][1]\n ],\n format: v => `${v}°`\n }),\n rangeSlider({\n title: \"Major extent, latitude\",\n min: -90,\n max: 90,\n step: 5,\n value: [\n majorExtentDefaults[0][1],\n majorExtentDefaults[1][1]\n ],\n format: v => `${v}°`\n })\n ]\n ],\n [\n [\n \"minor\",\n \"major\"\n ]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof horizontalStep = inputsGroup(\n [\n [\n slider({\n title: \"Minor step, meridians\",\n min: 10,\n max: 180,\n step: 10,\n value: minorStepDefaults[0],\n format: v => `every ${v}°`, \n }),\n slider({\n title: \"Major step, meridians\",\n min: 10,\n max: 180,\n step: 10,\n value: majorStepDefaults[0],\n format: v => `every ${v}°`, \n }) \n ]\n ],\n [\n [\n \"minor\",\n \"major\"\n ]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof verticalStep = inputsGroup(\n [\n [\n slider({\n title: \"Minor step, parallels\",\n min: 10,\n max: 90,\n step: 10,\n value: minorStepDefaults[1],\n format: v => `every ${v}°`,\n }),\n slider({\n title: \"Major step, parallels\",\n min: 10,\n max: 90,\n step: 10,\n value: majorStepDefaults[1],\n format: v => `every ${v}°`,\n })\n ]\n ],\n [\n [\n \"minor\",\n \"major\",\n ]\n ]\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof localDistortions = inputsGroup(\n [\n [\n checkbox({\n title: \"Minor crossings, local distortion\",\n options: [\n {label: \"Tissot’s (pseudo-) indicatrices\", value: \"minorCrossing\"}\n ],\n value: \"minorCrossing\"\n }),\n checkbox({\n title: \"Major crossings, local distortion\",\n options: [\n {label: \"Tissot’s (pseudo-) indicatrices\", value: \"majorCrossing\"}\n ]\n }),\n ] \n ],\n [\n [\n \"minorCrossings\",\n \"majorCrossings\"\n ]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`---\n## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"majorExtentDefaults = d3.geoGraticule().extentMajor();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"majorExtentTargets = [\n [horizontalExtent.major[0], verticalExtent.major[0] + EPSILON], \n [horizontalExtent.major[1], verticalExtent.major[1] - EPSILON]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"minorExtentDefaults = d3.geoGraticule().extentMinor();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"minorExtentTargets = [\n [horizontalExtent.minor[0], verticalExtent.minor[0] - EPSILON], \n [horizontalExtent.minor[1], verticalExtent.minor[1] + EPSILON]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"EPSILON = 0.000001","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"majorStepDefaults = d3.geoGraticule().stepMajor()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"majorStepTargets = [horizontalStep.major, verticalStep.major]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"minorStepDefaults = d3.geoGraticule().stepMinor()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"minorStepTargets = [horizontalStep.minor, verticalStep.minor]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"createGraticule = d3.geoGraticule()\n .extentMajor(majorExtentTargets) \n .extentMinor(minorExtentTargets)\n .stepMajor(majorStepTargets)\n .stepMinor(minorStepTargets);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"graticule = createGraticule()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`---\n## Representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"responsiveWidth = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"height = {\n const projection = createProjection().fitWidth(planeWidth, outline)\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection).bounds(outline);\n return Math.ceil(y1 - y0) + (margin * 2);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"createProjection = {\n const meta = projections.find(d => d.name === name);\n return d3[meta.propertyName];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"planeWidth = responsiveWidth - (margin * 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"margin = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"projection = createProjection()\n .fitWidth(planeWidth, outline)\n .translate([responsiveWidth / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3-array@2\", \"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {checkbox, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"