2b:null 2c:["$","title",null,{"children":"Projections / Observable Plot | Observable | Observable"}] 31:T63e,

${globe.plot({ projection: "equirectangular", width: 300, height: 180, caption: htl.html`

equirectangular (plate carrée)

` })} ${globe.plot({ projection: "orthographic", width: 300, height: 180, caption: htl.html`

orthographic

` })} ${globe.plot({ projection: "stereographic", width: 300, height: 180, caption: htl.html`

stereographic

` })} ${globe.plot({ projection: "mercator", width: 300, height: 180, caption: htl.html`

Mercator

` })} ${globe.plot({ projection: "equal-earth", width: 300, height: 150, caption: htl.html`

Equal Earth

` })} ${globe.plot({ projection: "azimuthal-equal-area", width: 300, height: 180, caption: htl.html`

azimuthal equal-area

` })} ${globe.plot({ projection: "gnomonic", width: 300, height: 180, caption: htl.html`

gnomonic

` })} ${globe.plot({ projection: "transverse-mercator", width: 300, height: 180, caption: htl.html`

Transverse Mercator

` })} ${globe.plot({ projection: "azimuthal-equidistant", width: 300, height: 180, caption: htl.html`

azimuthal equidistant

` })}

32:T6cd,## Fitting a domain to the frame Before we proceed to more projection types, we need a way to center and zoom our projection on a certain region. We don’t always need to make a map of the whole world, but often want to focus on a city, a country, a region of interest. All the built-in projections come with a default domain that they aim to represent. Usually, the domain is the whole sphere, but there are some exceptions. For instance, the stereographic projection would extend to infinity if it had to show the whole sphere, and it is clipped to the hemisphere; likewise, the Mercator projection [extends indefinitely](https://observablehq.com/@fil/truth-mercator) to the North and to the South, and is generally clipped at 85° in both directions, to fit a square. To set up a projection to show a given region, specify a GeoJSON object as the **domain** that must be included in the frame. This object can be a geometry, such as a MultiPolygon or Polygon describing the shape contour of what needs to be included. It can also be a Feature (or a FeatureCollection). In the examples below, we often use a MultiPoint geometry that contains a handful extremal points of the region (continent or country) we want to represent. When a domain has been specified, Plot scales and translates the projection to make the whole domain fit exactly in the frame. Or rather, one axis fits exactly, with the domain touching either both top and bottom, or both left and right. The orthogonal axis generally has a bit of wiggle room, and the extra space is distributed evenly, effectively centering the domain. (Note that, in cases where Plot is unable to fit the projection to the domain, it defaults back to the projection’s original aspect.)33:T752,## Aside: planar projections While this notebook mostly details _spherical_ projections, you sometimes have data whose coordinates live on an arbitrary plane, and not a spherical world of longitudes and latitudes. Some of the rules that apply on the sphere, do not apply any more. For example, the _x_ coordinate does not wrap between −180 and +180, and the _y_ coordinate does not stop at the poles at +90 and −90. This data can come from different places. Here are the three planar projections that Plot supports, with some use cases. 1. The _null_ projection. You might have already projected your spherical data to screen coordinates, or the shapes are not geographical, but correspond to something that the user has drawn on the very same screen. In this case, you can use the _null_ projection, which acts as a pass-thru. This coordinate system is expressed in pixels: it has its origin in the top-left corner of the frame, with *x* denoting the distance to the right, and *y* the distance down. It is the fastest method, but as a drawback it cannot be used to fit the projection to the frame. 2. The **identity** projection follows a similar coordinate system, with *x* pointing right → and *y* pointing down ↓. However, it allows the projection to be translated and scaled to fit the frame. You should use it if the data has already projected to screen coordinates, but you need to focus on a certain region. 3. The **reflect-y** projection is like the identity projection, but *y* points up ↑. It is commonly used with geographic data expressed in any planar Coordinate reference system (CRS) where *x* is the _easting_ (number of kilometers to the east from a reference point) and *y* the northing (distance in the direction of the north). If east points right, north points up, we need to reflect the *y* direction to avoid inverted maps. 34:T616,When you work with large-scale maps, for example at the level of a city, and the data hasn’t already been projected (if, in other words, coordinates are longitudes and latitudes), then by all means use the Mercator projection. The Mercator is locally accurate, and makes your map compatible with tile-based systems. (What Mercator does _not_ allow—and has been vilified for—is to compare different areas of the globe if they are not at the same latitude.) However, as soon as the region to be displayed extends beyond a certain area, the choices open up, and there are no hard rules to follow. All map projections present trade-offs, and you’ll want to select a projection that most accurately reflects the data you want to display, at the expense of less important features. For example, if you work on land cover, you will want an equal-area projection, even if the distortion in angles is a bit more visible; but if you are showing a regular grid, you might prefer a conformal map that doesn’t introduce shearing. Many projections seek a certain balance between the distortions; for that reason, they are called compromise projections. The built-in Equal-Earth projection belongs to that rather large family. As you learn more about projections, you should also let your sense of aesthetics guide you, in particular as you explore the extended palette of possibilities offered by D3 projections: they can all be used within Plot. Check out the [Extended Projections](/@observablehq/plot-extended-projections) notebook and see them in action! 35:[{"id":"f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","href":"https://static.observableusercontent.com/files/f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","name":"land-110m.json","type":"application/json","lastModified":1669910144243.597,"size":55207},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1670177411087.84,"size":795407},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1670177734449.406,"size":842177},{"id":"798a51d9193c59efce7426c09040b312dfd0c84bc762d54fdd1af6f864bfaab254ff9200c6c6025e5b4738eae691fdb41b70bfe4d1db86c824d2c4c4cb889052","href":"https://static.observableusercontent.com/files/798a51d9193c59efce7426c09040b312dfd0c84bc762d54fdd1af6f864bfaab254ff9200c6c6025e5b4738eae691fdb41b70bfe4d1db86c824d2c4c4cb889052","name":"westport-house.json","type":"application/json","lastModified":1670405940775.868,"size":63146}] 2f:{"id":"2db01ed9804afea3","slug":"plot-projections","title":"Projections / Observable Plot","thumbnail":"dc5a5bb1addccb577197417b527c780c93e3beaef5320c885624ae179d623ea8","access_level":"public","create_time":"$D2022-12-01T15:51:12.285Z","update_time":"$D2023-04-19T15:00:14.079Z","view_time":null,"first_public_time":"$D2022-12-12T22:59:39.578Z","fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1367,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"5f492f2ba1b8fec9","reply_to_id":null,"content":"I love this interactive example!","create_time":"$D2022-12-06T23:44:07.894Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"219fcbd74a53a1ac","reply_to_id":null,"content":"with the scrubber animation this doesn't stop at ⟨100, −30⟩ and the text above doesn't work. Should we:\n- fix the text,\n- remove autoplay, or\n- forget about the third rotation angle?","create_time":"$D2022-12-12T17:55:20.054Z","update_time":"$D2022-12-12T17:55:26.983Z","resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"a80b9d3a2188880c","reply_to_id":"219fcbd74a53a1ac","content":"I think I’ll bring back the separate sliders and then use a play button to animate the sliders, instead of using Scrubber.","create_time":"$D2022-12-12T18:30:18.315Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"f968ab4b9b7dfdb8","reply_to_id":"219fcbd74a53a1ac","content":"Is there a reason why this cell (and the ones in this notebook) is not \"embeddable\" ('Embed' is greyed out in the cell menu...)?","create_time":"$D2023-02-13T09:29:25.721Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c2f17e4031105178","login":"espinielli","name":"Enrico Spinielli","avatar_url":"https://avatars-next.observableusercontent.com/2bf5259d0c49a57cec6acc725062bdc41374a518de8772a2a051315f6be64567","tier":null}},{"id":"43a9d7f700a2e0e2","reply_to_id":"219fcbd74a53a1ac","content":"that's because the cell is not named, so it can't be embedded individually","create_time":"$D2023-02-13T09:59:30.116Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"e46e7fef06fc1103","reply_to_id":null,"content":"Hi, It seems that the \"next\" link is broken here. It should be \"plot-area\" instead of \"area\".","create_time":"$D2023-04-19T07:26:22.169Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ef385df54c3fe400","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":null}},{"id":"77db26c6e88c9e35","reply_to_id":"e46e7fef06fc1103","content":"correct, thanks!","create_time":"$D2023-04-19T15:00:05.831Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":12,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Projections / Observable Plot","cells":[{"id":0,"value":"

Projections / Observable Plot

Observable Plot › Projections · API

\n\n# Plot: Projections\n\nPlot’s projection system opens the door for all kinds of geographic maps (and more). Once set, the top-level **projection** option takes over the *x* and *y* [scales](/@observablehq/plot-scales) and considers associated channels as _jointly_ describing a location on a surface, typically the globe of the Earth.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Projections apply to any point-based mark, but are most commonly used with the [geo mark](/@observablehq/plot-geo). Below, we create a [composite mark](https://github.com/observablehq/plot/blob/main/README.md#plotmarksmarks) consisting of three geos: a graticule showing lines of constant latitude and longitude, a set of polygons showing land area, and the outline of the sphere.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"globe = Plot.marks([Plot.graticule(), Plot.geo(land, {fill: \"currentColor\"}), Plot.sphere()])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"We can now conveniently render a globe centered over the contiguous United States using a rotated orthographic projection. This projection corresponds to a camera looking at the Earth from far away (say, from the Moon). Only one hemisphere is visible.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":48,"value":"globe.plot({height: 640, inset: 1, projection: {type: \"orthographic\", rotate: [100, -30]}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"The **rotate** option is an array of two (or three) angles—called Euler angles—that determine how to rotate the globe, or, equivalently, where the camera is situated. The animation below shows the construction of the aspect of the orthographic projection pictured above, by going from the default aspect, centered on latitude and longitude ⟨0, 0⟩ to the US-centered aspect ⟨100, −30⟩.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":297,"value":"globe.plot({width: 240, height: 245, projection: {type: \"orthographic\", rotate}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1311,"value":"viewof rotate = Inputs.form([\n Inputs.range([-180, 180], {step: 0.1, label: \"λ\"}),\n Inputs.range([-90, 90], {step: 0.1, label: \"φ\"}),\n Inputs.range([-180, 180], {step: 0.1, label: \"γ\"})\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"play = {\n let frame;\n const button = Inputs.button(\"Play\", {reduce: animate});\n visibility().then(animate);\n function animate() {\n if (frame) cancelAnimationFrame(frame);\n let i = 0;\n const n = 400;\n const rotate = d3.piecewise([[0, 0, 0], [100, 0, 0], [100, -30, 0]]);\n viewof rotate.addEventListener(\"mousedown\", () => cancelAnimationFrame(frame));\n (function tick() {\n if (!(++i <= n && button.isConnected)) return;\n viewof rotate.value = rotate(i / n);\n viewof rotate.dispatchEvent(new Event(\"input\"));\n frame = requestAnimationFrame(tick);\n })();\n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"In the first phase (first angle, λ), we turn the globe around its natural axis of rotation, and by 100°. In the second phase (φ), we rotate it “down”—or, equivalently, move our camera “up”—by 30° to face the region of interest. A third phase (γ) is possible, by tilting the camera… we don’t need it in the aspect of the map above, and it is often ignored (it defaults to 0). But if you pushed the γ slider completely to the right, you will have seen the startling effect!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"## Built-in projections\n\nPlot provides a variety of built-in world projections. These expect coordinates to be pairs of ⟨_longitude_, _latitude_⟩ values in degrees. The longitude is usually a number in the interval [−180, +180], but this interval is periodic (with a period of 360°). The latitude is comprised between −90 (the South Pole) and +90 (the North Pole). The maps below show their default aspect, before any scaling or rotation is applied. (All projections can be rotated.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":235,"value":"Why so many? Each projection has its own history, issues, and benefits—some would say raison d’être. _Conformal_ projections preserve angles and are used when we want shapes to be locally accurate. _Equal-area_ (also called equivalent) projections preserve the proportion between surface areas, and are preferable when comparing statistical properties over, say, land use. _Equidistant_ projections allow parallels—or meridians—to be equally spaced. _Azimuthal_ projections expand radially from a center, which might be the central feature of your map. _Cylindrical_ projections are symmetric around the globe’s axis. The _stereographic_ projection preserves circles, the _gnomonic_ projection displays all great circles as straight lines… All these have pros, and cons. No projection from sphere to plane is ever going to be the most accurate, or exempt from distortions: the curvature of the Earth makes it impossible for a projection to be, for instance, at once conformal and equal-area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":436,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":736,"value":"### Insets\n\nWhen trying to fit a specific shape to the frame, we often don’t want the shape to exactly touch the frame. Similarly to scales, the **inset** option adds some padding space on all sides of the frame before fitting to the domain. You can also individually specify **insetLeft**, **insetRight**, **insetTop** and **insetBottom**, which default to inset.\n\nThe interactive below shows all these options:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":748,"value":"viewof fitOptions = Inputs.form({\n width: Inputs.range([200, 928], {step:1, label:\"width\", value: 960}),\n radius: Inputs.range([5, 179], {step:1, label:\"domain’s radius\", value: 20}),\n ...useInsets ?\n { insetLeft: Inputs.range([0, 150], {step:1, label:\"insetLeft\", value: 0}),\n insetRight: Inputs.range([0, 150], {step:1, label:\"insetRight\", value: 0}),\n insetTop: Inputs.range([0, 150], {step:1, label:\"insetTop\", value: 0}),\n insetBottom: Inputs.range([0, 150], {step:1, label:\"insetBottom\", value: 0})} : {inset: Inputs.range([0, 150], {step:1, label:\"inset\", value: 0})},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"viewof useInsets = Inputs.toggle({label:\"individual insets\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":742,"value":"{\n const domain = d3.geoCircle().center([9, 34]).radius(fitOptions.radius)();\n return globeF(Plot.geo(domain, { stroke: \"red\" })).plot({\n width: fitOptions.width,\n height: 400,\n projection: {\n type: \"azimuthal-equidistant\",\n rotate: [-9, -34],\n domain,\n insetLeft: fitOptions.insetLeft ?? fitOptions.inset,\n insetRight: fitOptions.insetRight ?? fitOptions.inset,\n insetTop: fitOptions.insetTop ?? fitOptions.inset,\n insetBottom: fitOptions.insetBottom ?? fitOptions.inset,\n },\n marks: [Plot.frame()]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1270,"value":"It is also possible to clip a projection (usually an azimuthal projection) at a certain angular distance from its center. For a map of Antarctica:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1276,"value":"globe.plot({\n width: 360,\n projection: {\n type: \"azimuthal-equidistant\",\n rotate: [0, 90],\n clip: 30, // 🇦🇶 comment this line out\n domain: d3.geoCircle().center([0, -90]).radius(30)(),\n inset: 2\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1053,"value":"For example, you might want to draw a floor plan, which comes as a geometry that is not anchored to a specific location on our good planet. Like the schematic plan of the second floor of the [Westport House](https://en.wikipedia.org/wiki/Westport_House) in Dundee, Ireland (see Appendix).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1054,"value":"Plot.plot({\n projection: { type: \"identity\", domain: westport },\n marks: [Plot.geo(westport)]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"## Conic projections\n\nIn addition to the projections listed above, Plot also provides three generic _conic_ projections. These are typically used to represent a specific region (rather than the whole globe), by setting their parallels and a rotation in a way that minimizes the distortion over the region of interest. If you use them directly, the map of the whole globe is ready to be wrapped in the shape of a cone. (Pretty bad, of course—except for teaching.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":154,"value":"

\n ${globe.plot({\n projection: \"conic-conformal\",\n width: 300,\n height: 180,\n caption: htl.html`

conic-conformal

`\n })}\n ${globe.plot({\n projection: \"conic-equal-area\",\n width: 300,\n height: 180,\n caption: htl.html`

conic-equal-area

`\n })}\n ${globe.plot({\n projection: \"conic-equidistant\",\n width: 300,\n height: 180,\n caption: htl.html`

conic-equidistant

`\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":109,"value":"The common use case for these conic projections is for map that focus on a specific region. For example, here is the South America Lambert conformal projection ([ESRI:102015](https://epsg.io/102015)):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"globe.plot({\n width: 350,\n height: 454,\n projection: {\n type: \"conic-conformal\",\n rotate: [60, 0],\n parallels: [-5, -42],\n domain: {type: \"MultiPoint\", coordinates: [[-90, 0], [-30, 0], [-60, 15], [-60, -60]]}\n }, marks: [Plot.frame()]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"## US Albers\n\nFor maps of the United States, the go-to projection is Albers’ conic equal-area projection, which could be expressed as:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":161,"value":"Plot.plot({\n width: 320,\n height: 200,\n projection: {\n type: \"conic-equal-area\",\n rotate: [96, 0],\n parallels: [29.5, 45.5],\n domain: states48\n },\n marks: [Plot.geo(states48, { strokeWidth: 1.5 })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"Don’t worry, there is no need to memorize these numbers: Plot has a convenient **albers** shorthand name for this projection. It is optimized for an aspect ratio of 1.6 (_e.g._ 975×610 pixels) that neatly fits the 48 contiguous states:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":378,"value":"Plot.plot({\n width: 320,\n height: 200,\n projection: \"albers\",\n marks: [\n Plot.geo(statesMesh, { strokeOpacity: 0.5 }), // see appendix for statesMesh and nation\n Plot.geo(states48, { strokeWidth: 1.5 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"To include the Alaska and Hawaii, use the composite **albers-usa** projection instead. Note that the projection is not equal-area anymore: surfaces are still comparable across the contiguous 48 states, but the huge state of Alaska has been scaled down.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":593,"value":"Plot.plot({\n width: 1152,\n projection: \"albers-usa\",\n marks: [\n Plot.geo(countiesMesh, { strokeOpacity: 0.15 }),\n Plot.geo(statesMesh, { strokeOpacity: 0.5 }),\n Plot.geo(nation, {\n strokeWidth: 1.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"## A few other regions\n\nEuropean statistics are often presented on the official Lambert azimuthal equal-area reference [ETRS89/LAEA](https://spatialreference.org/ref/epsg/etrs89-etrs-laea/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":233,"value":"globe.plot({\n width: 454,\n height: 454,\n projection: {\n type: \"azimuthal-equal-area\",\n rotate: [-10, -52],\n domain: {type: \"MultiPoint\", coordinates: [[-16, 52], [42, 52], [10, 32], [10, 70]]}\n }, marks: [Plot.frame()]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"The projection below applies the Mercator projection to Australia. For regions that are more elongated in the North-South direction than in the West-East direction, the transverse Mercator is recommended to limit area distortion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":445,"value":"globe.plot({\n width: 454,\n height: 454,\n marginBottom: 2,\n projection: {\n type: \"mercator\",\n rotate: [-133, 27],\n domain: {type: \"MultiPoint\", coordinates: [[113, -24], [154, -28], [141, -10.5], [146, -44]]}\n }, marks: [Plot.frame()]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"The plate carrée projection (equirectangular) works well for the African continent, which is harmoniously laid out on both sides of the Equator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":623,"value":"globe.plot({\n width: 454,\n height: 454,\n projection: \n {\n type: \"equirectangular\",\n domain: {\n type: \"MultiPoint\",\n coordinates: [\n [54, 12],\n [21, -36],\n [-19, 14],\n [10, 39]\n ]\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"An azimuthal projection is the obvious choice for polar regions (here, we choose the equidistant version, with its constant intervals between the parallels):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":408,"value":"

\n ${globeF().plot({\n width: 454,\n height: 454,\n projection: {\n type: \"azimuthal-equidistant\",\n rotate: [0, -90],\n domain: {type:\"MultiPoint\", coordinates: [[-90, 65], [90, 65]]},\n }\n})}\n ${globeF().plot({\n width: 474,\n height: 454,\n marginLeft: 20,\n projection: {\n type: \"azimuthal-equidistant\",\n rotate: [0, 90],\n domain: {type:\"MultiPoint\", coordinates: [[-90, -65], [90, -65]]},\n }\n})}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":674,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"## Line sampling\n\nAs a final note, all the spherical projections have a configurable **precision**, that varies the number of interpolation points when doing line sampling (see [details](https://github.com/d3/d3-geo/blob/main/README.md#projection_precision)). Again, it’s a trade-off: the more precise the map, the slower it gets to render. The default precision is fine for most purposes, but you can refine it if you plan to export the map for printing. The map below has markers on the control points of several (interpolated) lines:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":924,"value":"viewof projection = Inputs.select([\"stereographic\", \"mercator\", \"orthographic\", \"equal-earth\"], {label:\"projection\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":900,"value":"viewof precision = Inputs.range([0.005, 1], {label:\"precision\", step: 0.005, value: 0.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"Plot.plot({\n marginBottom: 3,\n projection: { type: projection, precision },\n marks: [\n Plot.graticule(),\n Plot.line(\n [\n [-10, -20],\n [80, 50],\n [-90, 20],\n [-10, -20]\n ],\n {\n marker: \"dot\",\n stroke: [\"a\", \"b\", \"c\", \"a\"],\n z: null\n }\n ),\n Plot.sphere()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1361,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"Our base geographic files are in the TopoJSON format. We use the [topojson-client](https://github.com/topojson/topojson-client) library (available in Observable with the topojson symbol) to extract the GeoJSON shapes we want to draw on the maps, for the whole world, then for the US.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"world = FileAttachment(\"land-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":577,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1160,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"counties48 = us.objects.counties.geometries.filter(\n ({ id }) =>\n ![\"02\", \"15\", \"60\", \"66\", \"69\", \"72\", \"78\"].includes(id.slice(0, 2)) // removes Alaska, Hawaii etc.\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"states48 = topojson.merge(us, counties48)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"statesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1169,"value":"countiesMesh = topojson.mesh(us, us.objects.counties, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"Floor plan, adapted from [wrld3d](https://github.com/wrld3d/wrld-indoor-maps-api):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1056,"value":"westport = FileAttachment(\"westport-house.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"---\n*helpers*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":705,"value":"// a version of globe that clips to the frame\nglobeF = (marks) =>\n Plot.marks([\n Plot.graticule({ clip: \"frame\" }),\n Plot.geo(land, { fill: \"currentColor\", clip: \"frame\" }),\n Plot.sphere(),\n marks\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"