2f:T582,viewof projection = Inputs.select( new Map( // commenting out the projections that don't work for my data [ ["equirectangular", { type: "equirectangular" }], //"orthographic", [ "stereographic", { type: "stereographic", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], ["mercator", { type: "mercator" }], [ "equal-earth", { type: "equal-earth", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], [ "azimuthal-equal-area", { type: "azimuthal-equal-area", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], // "gnomonic", [ "transverse-mercator", { type: "transverse-mercator", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], [ "azimuthal-equidistant", { type: "azimuthal-equidistant", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], [ "identity", { type: "identity", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ], [ "reflect-y", { type: "reflect-y", rotate: d3.geoCentroid(moha_admin0).map((d) => -d) } ] ], { label: "Select Projection", value: "mercator" } ) )30:[{"id":"98faea32e13315abed9e387a15e9689c5007a1fd2740343d25f0f53e67a9494e8e75868cc255c804b3e4b020e4a18907249e522a44f9e7f752d9ebf156002e99","href":"https://static.observableusercontent.com/files/98faea32e13315abed9e387a15e9689c5007a1fd2740343d25f0f53e67a9494e8e75868cc255c804b3e4b020e4a18907249e522a44f9e7f752d9ebf156002e99","name":"osm_bagmati_admin7.geojson","type":"application/geo+json","lastModified":1676768360593.718,"size":3874055},{"id":"8df7cdc3b428485564eb7f0949bb0045ea83d0a614afcc0049caa5238784ef06fade4f4c3ad987d9a36f826e019b855b2bebeb61c1b5cd20759b01e9c4ffbd8a","href":"https://static.observableusercontent.com/files/8df7cdc3b428485564eb7f0949bb0045ea83d0a614afcc0049caa5238784ef06fade4f4c3ad987d9a36f826e019b855b2bebeb61c1b5cd20759b01e9c4ffbd8a","name":"ghimire_admin3_municipal_simplified-1.json","type":"application/json","lastModified":1676768360593.718,"size":10425431},{"id":"bede682c9eb71d39750b63c55c54f4c8f70f4cb00c083310ad88bd3b378c4ebbdc3168f29bcf82c2864616a56e34b1812b02579fafbae0957a0a0dfe87d31d14","href":"https://static.observableusercontent.com/files/bede682c9eb71d39750b63c55c54f4c8f70f4cb00c083310ad88bd3b378c4ebbdc3168f29bcf82c2864616a56e34b1812b02579fafbae0957a0a0dfe87d31d14","name":"moha_admin0_state.json","type":"application/json","lastModified":1676768360593.718,"size":2245374},{"id":"e0a505d2debedd8639a10c7e50b0bf2d1ef0e703c6575a8f9e1ab090ac0b3723f6b29e726a9e950a128a88d5039fbd39076bd74a3251279decc09c5b8ae00f3a","href":"https://static.observableusercontent.com/files/e0a505d2debedd8639a10c7e50b0bf2d1ef0e703c6575a8f9e1ab090ac0b3723f6b29e726a9e950a128a88d5039fbd39076bd74a3251279decc09c5b8ae00f3a","name":"kathmandu cadmapper.geojson","type":"application/geo+json","lastModified":1676768360593.718,"size":11038891}] 2d:{"title":"Plot.geo | Overcoming Common 'Gotchas'","cells":[{"id":0,"value":"# Plot.geo | Overcoming Common 'Gotchas'","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"With the release of [Plot.projections](https://observablehq.com/@observablehq/plot-projections) and [Plot.geo](https://observablehq.com/@observablehq/plot-geo), it's now easier than ever to render a map view of geospatial data.","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"Observable's official [docs](https://github.com/observablehq/plot/blob/main/README.md) and examples are very helpful and cover the majority of use cases. Yet every now and then, there comes a pesky file that doesn't immediately render, or renders differently than you might expect. As a novice cartographer and a newbie Plot user, I can at times feel overwhelmed with reading through the [API documentation](https://github.com/observablehq/plot/blob/main/README.md). I offer this notebook on how to map one or two such thorny examples `:)` ","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"## Domain","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"_How do I get the right viewing area?_","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"The basic [Plot.geo](https://observablehq.com/@observablehq/plot-geo) example for rendering a map is simple, just: Plot.geo(your_data_here).plot({projection: {your_projection_here}})","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"But if we pass in data of one area on the map, rather than the whole world, we're returned a map that shows our data zoomed out at the global level. _Why is this? And how to change it?_","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"/// Can you see Nepal above? By default, data passed to plot with no additional context shows up on a global projection\nPlot.geo(moha_admin0).plot({\n projection: \"mercator\",\n height: 400\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"_Why isn't this zoomed in on my data?_ By default, Plot.geo is assuming that the domain of your intended map is global. As the [Plot: Projections](https://observablehq.com/@observablehq/plot-projections) notebook clarifies, when you wish to make a map that focuses on a city, a country, a region of interest, you will need to set a parameter for the **[domain](https://observablehq.com/@observablehq/plot-projections#cell-436)**—the extent of the subject matter that a map represents, or the specific area being mapped. ","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"_How to control the domain?_ Fortunately for us, Plot.geo includes an option for setting custom domains. \n To use it, all that you need to do is to pass this option into your projection settings, {domain: your_chosen_domain}. Oh, and because you'll are now adding multiple options into the projecting setting, you'll also need to be a bit more verbose by naming your projection type (see code below).\n\n_Note that in the example below, since I wanted to see the full extent of my data, I set the domain to be my data source._","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Plot.plot({\n projection: {\n type: \"mercator\",\n // this tells Plot that I wish to focus on an area that is specific to the spatial extents of my geo data file\n domain: moha_admin0\n },\n // this tells Plot to use the Plot.geo mark to draw my geo data file\n marks: [Plot.geo(moha_admin0)],\n height: 400\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"_What if I want to zoom in on a specific area within my dataset?_","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"For [Plot.projection](https://observablehq.com/@observablehq/plot-projections) to render your map, the domain option requires an area—a space between two points. If you have a specific coordinate on which you would like to focus, the easiest way to transform that point into an area (polygon) is to use [D3.geoCircle](https://github.com/d3/d3-geo#geoCircle) to generate an object of type polygon approximating a circle on the surface of a sphere. You can also set the [center](https://github.com/d3/d3-geo#circle_center), [radius](https://github.com/d3/d3-geo#circle_radius) and [precision](https://github.com/d3/d3-geo#circle_precision). The example below provides the radius value as an input—simulating a 'zoom' feature.","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":" // D3 and Plot expect coordinates to be specified as [longitude, latitude], so if you're setting your center point by grabbing coordinates from Google Maps, you'll need to reverse them.\nviewof radius = Inputs.range([0.05, 3.4], {\n value: 0.1,\n step: 0.05,\n label: \"radius around the center (degrees)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"Plot.plot({\n projection: {\n type: \"mercator\",\n // D3 and Plot expect coordinates to be specified as [longitude, latitude], so if you're setting your center point by grabbing coordinates from Google Maps, you'll need to reverse them.\n domain: d3.geoCircle().center([85.3, 27.7]).radius(radius)(),\n inset: 2\n },\n marks: [Plot.geo(ghimire_admin3, { stroke: \"blue\", strokeWidth: 0.4 })],\n height: 300\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"## Projection","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"Plot provides a variety of [built-in world projections](https://observablehq.com/@observablehq/plot-projections#cell-65). Once you have your map working, you can experiment by choosing among the built-in projections.","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"Plot.plot({\n projection: {\n ...projection,\n domain: moha_admin0 // this allows us to \"focus\" on our target polygon\n },\n marks: [\n // see: https://github.com/observablehq/plot/blob/main/README.md#plotgraticuleoptions\n Plot.geo(d3.geoGraticule().step([1, 1])(), { strokeOpacity: 0.1 }),\n Plot.geo(moha_admin0),\n Plot.geo(ghimire_admin3, {\n clip: \"frame\",\n stroke: \"blue\",\n strokeOpacity: 0.1\n })\n ],\n height: 400\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"Sometimes, however you don't know how your data are projected. In this case, a helpful projection option is ['identity'](https://github.com/observablehq/plot/blob/main/README.md#projection-options). It is intended for planar geometry, and I've found that it generally works to render most spatial data files that I encounter. However sometimes (perhaps _often_) the identity projection will render data 'upside down'. When this happens, you can correct by using \"reflect-y\" instead (it's like the identity projection, but the y-axis points up).","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"The main benefit (and intended use case) for the identity projection is that it works to visualize data that aren't projected to the globe, such as the CAD map of Kathmandu below. To achieve a zoom effect, we'll use [insets](https://observablehq.com/@observablehq/plot-projections#cell-736).","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"viewof inset = Inputs.range([-3500, 0], {\n value: -250,\n step: 50,\n label: \"Zoom\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"viewof type = Inputs.select([\"identity\", \"reflect-y\"], {\n label: \"Adjust Projection Type\",\n value: \"reflect-y\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"Plot.plot({\n projection: {\n domain: kathmandu_cad,\n type,\n inset\n },\n marks: [\n Plot.geo(kathmandu_cad, {\n strokeWidth: 0.3\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"## Winding Order\n\nA recurring issue with spherical GeoJSON is errors in the winding order of the\npolygons (see [@mbostock's](https://observablehq.com/@mbostock) [Winding Order](https://observablehq.com/@d3/winding-order) for an illustration of this issue).\n","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"When you have a left-wound polygon, things can sometimes go wonky.","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"// This happens commonly with files I download from Overpass Turbo\nPlot.plot({\n projection: {\n type: \"mercator\",\n domain: osm_bagmati_admin7\n },\n marks: [\n Plot.geo(osm_bagmati_admin7, {\n stroke: \"brown\"\n })\n ],\n height: 300\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"Fortunately, [@fil's](https://observablehq.com/@fil) [Geo: Rewind](https://observablehq.com/@fil/rewind) notebook offers us a solution (and a fantastic deep-dive on winding)!","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"import {rewind} from \"@fil/rewind\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"Plot.plot({\n projection: {\n type: \"mercator\",\n domain: rewind(await FileAttachment(\"osm_bagmati_admin7.geojson\").json())\n },\n marks: [\n Plot.geo(\n rewind(await FileAttachment(\"osm_bagmati_admin7.geojson\").json()),\n { stroke: \"brown\", strokeWidth: 0.4 }\n )\n ],\n height: 400\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"## Embellishments","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"Not quite a 'gotcha', but one embellishment built into [Plot.geo](https://observablehq.com/@observablehq/plot-geo) that took me a bit of time to work out is the graticule option. The [documentation](https://github.com/observablehq/plot/blob/main/README.md#plotgraticuleoptions) glosses this a bit, but it's possible to adjust the step of graticules (distance between each line drawn) by using D3, and Plot options to specify their color and opacity.","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"Plot.plot({\n projection: {\n type: \"equirectangular\",\n // rotate: [-90, 0],\n domain: moha_admin0 // this allows us to \"focus\" on our target polygon\n },\n marks: [\n // Plot's default here is d3.geoGraticule10(), which is a convenience function using d3.geoGraticule()()\n // To adjust the step, simply define your desired grid interval in degrees\n // The first parameter controls longitude and the second controls latitude\n // see: https://github.com/observablehq/plot/blob/main/README.md#plotgraticuleoptions\n // see also: https://github.com/d3/d3-geo/blob/main/README.md#geoGraticule10\n Plot.geo(d3.geoGraticule().step([1, 1])(), {\n stroke: \"red\",\n strokeOpacity: 0.3\n }),\n Plot.geo(moha_admin0),\n Plot.geo(\n await FileAttachment(\"ghimire_admin3_municipal_simplified-1.json\").json(),\n { clip: \"frame\", stroke: \"blue\", strokeOpacity: 0.1 }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":574,"value":"The data used in this notebook are as follow:\n","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"Ministry of Home Affairs. 2019. [Outline 1](https://web.archive.org/web/20191024194225/http://drm.moha.gov.np/layers/geonode:outline_1). Nepal Government Geoportal.","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"moha_admin0 = FileAttachment(\"moha_admin0_state.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"Ghimire, Sagar. 2020. [Administrative boundaries geographic data of 753 municipalities in Nepal.](https://opendatanepal.com/dataset/nepal-municipalities-wise-geographic-data-shp-geojson-topojson-kml) Open Data Nepal.","pinned":false,"hidden":false,"mode":"md"},{"id":659,"value":"ghimire_admin3 = FileAttachment(\"ghimire_admin3_municipal_simplified-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"Open Street Maps. 2022. Bagmati. Downloaded from Overpass Turbo using [@Saneef's](https://observablehq.com/@saneef) notebook[Generate GeoJSON from OpenStreetMap Data](https://observablehq.com/@saneef/geojson-from-openstreetmap)","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"osm_bagmati_admin7 = FileAttachment(\"osm_bagmati_admin7.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"[CADmapper](https://cadmapper.com/). 2022. Kathmandu. ","pinned":false,"hidden":false,"mode":"md"},{"id":664,"value":"kathmandu_cad = FileAttachment(\"kathmandu cadmapper.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}