31:[] 2f:{"title":"Plot: Planar vs. Spherical Voronoi","cells":[{"id":0,"value":"

Plot: Planar vs. Spherical Voronoi

\n\n# Planar vs. Spherical Voronoi\n\nThe distances between points projected on the plane are not exactly proportional to the corresponding distances on the sphere. This unescapable mathematical fact creates a discrepancy between the planar Voronoi diagram and its spherical counterpart.\n\nFor example, a “true” (spherical) diagram has polygons that cross the antemeridian line, which are impossible on the planar diagram. In general, the planar Voronoi distorts polygons that are close to the edge of the map.\n\nFor the sake of simplicity (and for faster loading times), Plot defaults to the planar algorithm. But if you want more accuracy, you can require [d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi), and let Plot.geo draw its outputs.\n","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"The maps below compare the planar (on the left) and spherical (on the right) Voronoi diagrams associated with a dataset of the [world’s airports](https://observablehq.com/@d3/world-airports-voronoi).","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"## Orthographic\n${show(\"orthographic\")}","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"## Mercator\n${show(\"mercator\")}","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"## Equal Earth\n\nThe distortion near the edges (at the poles and on the antimeridian line) is quite important.\n\n${show(\"equal-earth\")}","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"## Zoom\n\nWhen we start zooming in, like here with the stereographic projection, the\ndistortion recedes.\n\n${show(\"stereographic\", true)}\n","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"## Focus\n\nZooming in a bit closer, for example by focusing on the U.S. with Albers’ conic\nprojection, the distortion is almost invisible.\n\n${show(\"albers\", true)}\n","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"Click on the button below to overlay the maps with blue and red colors.","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"viewof compose = Inputs.radio([\"side by side\", \"blue and red\"], {\n value: \"side by side\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"---\n\n*supporting code*","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"show = (projection, frame) => compose === \"side by side\" ?\n htl.html`

\n ${planar(projection, frame)}\n ${spherical(projection, frame)}\n `\n :\n htl.html`\n ${mix(projection, frame)}\n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"planar = (projection, frame) =>\n Plot.plot({\n width: 0.49 * width,\n height: 0.49 * width * (projection === \"equal-earth\" ? 0.5 : 1),\n projection,\n marks: [\n Plot.voronoiMesh(points, {\n clip: \"sphere\",\n strokeOpacity: 1,\n strokeWidth: 0.5\n }),\n Plot.dot(points, { r: 1, fill: \"black\" }),\n frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()\n ],\n caption: \"Planar\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"spherical = (projection, frame) =>\n Plot.plot({\n width: 0.49 * width,\n height: 0.49 * width * (projection === \"equal-earth\" ? 0.5 : 1),\n projection,\n marks: [\n Plot.geo(d3.geoVoronoi().cellMesh(points), {\n clip: \"sphere\",\n strokeOpacity: 1,\n strokeWidth: 0.5\n }),\n Plot.dot(points, { r: 1, fill: \"black\" }),\n frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()\n ],\n caption: \"Spherical\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"mix = (projection, frame) =>\n Plot.plot({\n width: 0.49 * width,\n height: 0.49 * width * (projection === \"equal-earth\" ? 0.5 : 1),\n projection,\n marks: [\n Plot.voronoiMesh(points, {\n clip: \"sphere\",\n strokeOpacity: 1,\n strokeWidth: 0.5,\n stroke: \"red\"\n }),\n Plot.geo(d3.geoVoronoi().cellMesh(points), {\n clip: \"sphere\",\n strokeOpacity: 1,\n strokeWidth: 0.5,\n stroke: \"blue\"\n }),\n Plot.dot(points, { r: 1, fill: \"black\" }),\n frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()\n ],\n caption: htl.html`Planar — Spherical`\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3-geo-voronoi@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {points} from \"@d3/world-airports-voronoi\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}