2b:null 2c:["$","title",null,{"children":"Mapping / Observable Plot | Observable | Observable"}] 31:T4b0,To make a map, follow the order of things described by the painter Wassily Kandinsky in _Point and Line to Plane_ ([1926](https://www.wassilykandinsky.net/book-117.php)): lay out your planes (areas, filled polygons), draw lines above them (contours, arrows), then finally put dots on top. (You can add labels, too.) Plot’s [**projection**](/@observablehq/plot-projection?collection=@observablehq/plot) option is going to be your paint tool. Where classic charts are concerned, the **x** and **y** axes are independent, and generally represent different dimensions of the data, with different types of scales. Once a projection is set in Plot, though, it takes over the x and y dimensions, which now _jointly_ represent a location on a surface (flat, or spherical). For any location on that surface, the projection function will indicate the corresponding position on the map. In practice, the ⟨_x_, _y_⟩ pair denotes the horizontal and vertical coordinates of a point, for planar geometries; and for spherical geometries, it corresponds to the _longitude_ and _latitude_, in degrees. The projection you select will determine where and how geometries in that space will be drawn on the screen.32:[{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1670002643306.265,"size":842177},{"id":"8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","href":"https://static.observableusercontent.com/files/8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","name":"walmarts.tsv","type":"text/tab-separated-values","lastModified":1670002614620.033,"size":99268},{"id":"2405a721fab9f4c1a8d3e8aca09af04a0d24538df9ddb22cbbfc08e7a072c99c32105b2a7c6172ede7aedff7e2b66a8f88978c16a11dcda57ce375988f4a6bfd","href":"https://static.observableusercontent.com/files/2405a721fab9f4c1a8d3e8aca09af04a0d24538df9ddb22cbbfc08e7a072c99c32105b2a7c6172ede7aedff7e2b66a8f88978c16a11dcda57ce375988f4a6bfd","name":"beagle.csv","type":"text/csv","lastModified":1670362113950.594,"size":4082},{"id":"5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","href":"https://static.observableusercontent.com/files/5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","name":"us-presidential-election-2020.csv","type":"text/csv","lastModified":1670452516167.637,"size":98462},{"id":"d5b12e83fa8ef8dc76ac8b1d051975e330b55d783f279c4314f18ffbfdd3b7e2c948dc47f6a1aa20d71069cf17f3c300b2da6556f7afbf9bac595cde4014aa4e","href":"https://static.observableusercontent.com/files/d5b12e83fa8ef8dc76ac8b1d051975e330b55d783f279c4314f18ffbfdd3b7e2c948dc47f6a1aa20d71069cf17f3c300b2da6556f7afbf9bac595cde4014aa4e","name":"land.json","type":"application/json","lastModified":1670878161699.913,"size":2396812}] 2f:{"id":"0069f063e6b8f2d5","slug":"plot-mapping","title":"Mapping / Observable Plot","thumbnail":"02dc8bc250505e431f0ba894d600cb034bcb5fc0be4ee55252712916a19d444f","access_level":"public","create_time":"$D2022-12-02T15:18:07.717Z","update_time":"$D2025-05-12T18:50:32.481Z","view_time":null,"first_public_time":"$D2022-12-12T22:59:46.247Z","fork":false,"stars":70,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":775,"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":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"be752cc86c84866d","reply_to_id":null,"content":"I'm not happy with the image and label demo in this notebook; ideally I'd prefer to avoid introducing a new dataset, but no interesting images come to mind with the walmarts. For labels we could do \"first opening\", or states names.","create_time":"$D2022-12-04T10:54:55.676Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"c4bd4e18af24ead5","reply_to_id":"be752cc86c84866d","content":"For text, we could add labels for a few of the largest cities (suggested by Maria).","create_time":"$D2022-12-05T15:25:37.469Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"5bd914bd1fdcb459","reply_to_id":null,"content":"if we merge the curve-geodesic PR, can mention it here, with a toggle","create_time":"$D2022-12-05T15:51:41.399Z","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":"79b0d866c340b2e8","reply_to_id":"be752cc86c84866d","content":"For images, maybe pass (add a note in the dots & symbols section?).","create_time":"$D2022-12-05T15:53:37.143Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"1abd848e0b9b0141","reply_to_id":"5bd914bd1fdcb459","content":"May be worth mentioning what {clip: \"frame\"} is doing at some point in the doc (since it shows up in some Plot.geo lines, but not in others)?","create_time":"$D2022-12-05T16:26:37.271Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null}},{"id":"59752e9926af4f6e","reply_to_id":"be752cc86c84866d","content":"I like Maria's idea for largest city labels!","create_time":"$D2022-12-05T16:34:43.756Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null}},{"id":"9762a7ed64934a6f","reply_to_id":"5bd914bd1fdcb459","content":"The Beagle example is really compelling (variable color and cutting across the antimeridian). It would be great to include here.","create_time":"$D2022-12-06T19:46:38.727Z","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":"e433320b9c6771f2","reply_to_id":"5bd914bd1fdcb459","content":"changed it to beagle","create_time":"$D2022-12-06T21:44:36.810Z","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":"1949a0a3d280b157","reply_to_id":null,"content":"todo remove the whole thing (it's already done in the Plot: geo notebook); make a different line map","create_time":"$D2022-12-08T00:38:27.079Z","update_time":null,"resolved":false,"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":61,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Mapping / Observable Plot","cells":[{"id":0,"value":"

Mapping / Observable Plot

Observable Plot › Mapping · API

\n\n# Mapping with Plot\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":209,"value":"## Geometries\n\nThe [**geo**](/@observablehq/plot-geo?collection=@observablehq/plot) mark draws geographic features, such as polygons and lines, connecting points through the shortest path (which, on the sphere, is not a straight line, but a geodesic or “great circle” line). We use this mark to show the outline of the contiguous United States—the canvas on which we’ll make maps in this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":210,"value":"Plot.plot({\n projection: \"albers\",\n marks: [Plot.geo(nation), Plot.geo(statemesh, { strokeOpacity: 0.2 })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"## Everything is spatial\n\nAs they flow through the same projection, all the point-based marks work in unison. Whether you are using the **geo** mark, the **dot**, **text**, and **image** marks, a given location will be represented in the same position. The **line** mark will work too, connecting dots in a straight (or curved) line. Even complex marks such as **density**, **hexbin**, **voronoi**… operate on the projected coordinates. Marks such as **arrow**, **link** or **rect**, that work with pairs of coordinates x1, x2, y1, and y2, are also supported.\n\n_Note:_ Marks that expect _x_ or _y_ to be ordinal scales, such as bars, cells, or ticks, cannot be used in conjunction with projections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"## Dots (& symbols)\n\nTo plot locations as dots on a map, use [the dot mark](/@observablehq/plot-dot), passing longitudes as the **x** channel and latitudes as the **y** channel. All the options of dot can be used, like for example the **stroke** color for each dot, or the **symbol** channel. The map below represents the opening year of every Walmart store in the contiguous United States.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"Plot.plot({\n width: 960,\n height: 600,\n projection: \"albers\",\n color: {\n legend: true,\n label: \"Opening year\"\n },\n marks: [\n Plot.geo(nation),\n Plot.geo(statemesh, {strokeOpacity: 0.2}),\n Plot.dot(walmarts, {x: \"longitude\", y: \"latitude\", stroke: \"date\", symbol: \"square\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"## Facets\n\nIn conjunction with facets, the dot mark tells the same story as a comic strip (“small multiples”), where each facet plots the new stores opened in every decade:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"Plot.plot({\n width: 960,\n height: 150,\n marginLeft: 0,\n marginRight: 0,\n projection: \"albers\",\n fx: { tickFormat: (d) => `${d}’s`, padding: 0 },\n facet: { data: walmarts, x: (d) => Math.floor(d.date.getUTCFullYear() / 10) * 10 },\n marks: [\n Plot.geo(statemesh, { clip: \"frame\", strokeOpacity: 0.1 }),\n Plot.dot(walmarts, { x: \"longitude\", y: \"latitude\", r: 1, fill: \"currentColor\" }),\n Plot.geo(nation, { clip: \"frame\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Voronoi\n\nThe\n[Plot.voronoi and Plot.delaunay marks](https://observablehq.com/@observablehq/plot-voronoi)\nhappily consume the projected coordinates (in screen/pixel space). For example,\nthis voronoiMesh mark draws the catchment area of each store:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"Plot.plot({\n width: 960,\n height: 600,\n projection: \"albers\",\n marks: [\n Plot.geo(nation),\n Plot.dot(walmarts, {x: \"longitude\", y: \"latitude\", fill: \"currentColor\", r: 1}),\n Plot.voronoiMesh(walmarts, {x: \"longitude\", y: \"latitude\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"_A note for purists (including us)._ Distances between projected points are\nnot—and cannot be—exactly proportional to the corresponding distances on the\nsphere. This creates a discrepancy between the planar Voronoi diagram and its\nspherical counterpart. For more accuracy, you may want to try\n[d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi)—and let Plot.geo draw\nits outputs (see [Planar vs. Spherical Voronoi](https://observablehq.com/@observablehq/planar-vs-spherical-voronoi) for details).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"### Hexbin\n\nHexagonal bins, based on the projected coordinates. See\n[Plot.hexbin](https://observablehq.com/@observablehq/plot-hexbin) for details. Hexbins have a great visual appeal, but be aware that the underlying statistics are usually to be taken with a grain of salt. At any scale, geographic binning suffers from the\n[MAUP](https://en.wikipedia.org/wiki/Modifiable_areal_unit_problem). On a small scale map, this is compounded by the Earth’s curvature, which makes it impossible to create an accurate and regular grid. At any rate, prefer an equal-area projection to makes the different regions of the map comparable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"Plot.plot({\n width: 975,\n projection: \"albers\",\n r: {\n range: [0, 20]\n },\n color: {\n legend: true,\n label: \"First year opened\",\n scheme: \"spectral\"\n },\n marks: [\n Plot.geo(statemesh, { strokeOpacity: 0.25 }),\n Plot.geo(nation),\n Plot.dot(\n walmarts,\n Plot.hexbin(\n { r: \"count\", fill: \"min\" },\n { x: \"longitude\", y: \"latitude\", fill: \"date\" }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"### Density\n\nPlot.density… just works. See\n[Plot.density](https://observablehq.com/@observablehq/plot-density) for details. On a small-scale map showing the whole globe, you might have to clip the results. And, because the density is computed on the projected coordinates, it is recommended to use an equal-area projection to limit distortion.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"Plot.plot({\n width: 960,\n height: 600,\n projection: \"albers\",\n color: {\n scheme: \"blues\"\n },\n marks: [\n Plot.density(walmarts, {\n x: \"longitude\",\n y: \"latitude\",\n bandwidth: 12,\n fill: \"density\"\n }),\n Plot.dot(walmarts, {\n x: \"longitude\",\n y: \"latitude\",\n r: 1,\n fill: \"currentColor\"\n }),\n\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"## Text\n\nUse the **text** mark to draw labels. The _stroke_ option helps to detach the text from the background noise, and the _textAnchor_ and _dx_, _dy_ options to adjust their placement. Here, we use the [centroid](https://observablehq.com/@observablehq/plot-centroid?collection=@observablehq/plot) transform to position the text labels in the middle of each feature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":544,"value":"Plot.plot({\n projection: \"albers\",\n marks: [\n Plot.geo(statemesh, { clip: \"frame\", strokeOpacity: 0.1 }),\n Plot.geo(nation, { clip: \"frame\" }),\n Plot.text(\n states.features,\n Plot.centroid({\n text: (d) => d.properties.name,\n textAnchor: \"middle\",\n stroke: \"white\",\n fill: \"black\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"## Vectors\n\nDid we mention [vectors](https://observablehq.com/@observablehq/plot-vector)? The map below shows the margin by which the winner of the US presidential election of 2020 won the vote in each county. The arrow’s length encodes the difference in votes, and the orientation and color show who won ( for the Democratic candidate, and for the Republican candidate).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":588,"value":"winds = {\n // id is the county’s fips code; we index it in a fast lookup table\n const lookup = d3.index(counties.features, (d) => d.id);\n return Plot.plot({\n projection: \"albers-usa\",\n width: 975,\n marks: [\n Plot.geo(statemesh, { strokeWidth: 0.75 }),\n Plot.geo(nation),\n Plot.vector(\n elections,\n Plot.centroid({\n filter: (d) => d.votes > 0,\n anchor: \"start\",\n geometry: (d) => lookup.get(d.fips),\n sort: (d) => Math.abs(+d.results_trumpd - +d.results_bidenj),\n stroke: (d) => +d.results_trumpd > +d.results_bidenj ? \"red\" : \"blue\",\n length: (d) => Math.sqrt(Math.abs(+d.margin2020 * +d.votes)),\n rotate: (d) => (+d.results_bidenj < +d.results_trumpd ? 60 : -60)\n })\n )\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"## More marks: image, rect, link, arrow, line\n\nProjections can work with any mark that consumes continuous *x* and *y* channels—as well as marks that use *x1* and *y1*, *x2* and *y2*. Use the [image](/@observablehq/plot-image) mark to center an image at the given location. The [arrow](/@observablehq/plot-arrow) and [link](/@observablehq/plot-link) marks connect two points, and can be used in thematic mapping to express, say, trade flows between countries. The [rect](/@observablehq/plot-rect) mark creates a rectangle from two opposite corners, and can be used to draw a selection (brush), an inset, a bounding-box…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":758,"value":"Next \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"---\n\n### Appendix\n\nTo learn more about this topic, see our hands-on tutorials: [Build your first map with Observable Plot](https://observablehq.com/@observablehq/build-your-first-map-with-observable-plot), and [Build your first choropleth map with Observable Plot](https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot).\n\nThe attached datasets respectively contain the locations and opening dates of all the Walmart stores in the contiguous US; and the winner and margin in each county in the U.S. presidential election of 2020. We load and process a TopoJSON file describing the counties and states.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"walmarts = FileAttachment(\"walmarts.tsv\").tsv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"elections = FileAttachment(\"us-presidential-election-2020.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"counties = topojson.feature(us, us.objects.counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"