25:["$","title",null,{"children":"Mapping / Observable Plot | Daniel Tan | Observable"}] 49: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.4a:[{"id":"8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","href":"https://static.observableusercontent.com/files/8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","name":"walmarts.tsv","type":"text/tab-separated-values","lastModified":1714386755806.989,"size":99268},{"id":"5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","href":"https://static.observableusercontent.com/files/5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","name":"us-presidential-election-2020.csv","type":"text/csv","lastModified":1714386755806.989,"size":98462},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1714386755806.989,"size":842177}] 29:{"id":"bf9159383518eb9b","slug":null,"title":"Mapping / Observable Plot","thumbnail":"a28b2fc5c784e6e8464aafbb5343985bd4f44bf778f2d1062b60690479027349","access_level":"public","create_time":"$D2024-04-29T10:32:35.806Z","update_time":"$D2024-04-29T11:10:19.425Z","view_time":null,"first_public_time":"$D2024-04-29T10:32:35.806Z","has_unpublished_edits":null,"fork":{"id":"0069f063e6b8f2d5","slug":"plot-mapping","title":"Mapping / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0387711d7952e4ed","login":"dddanieltan","name":"Daniel Tan","avatar_url":"https://avatars-next.observableusercontent.com/1586cfda9db4d34e10adc795f6cf13cfe01d79e8fd4edcc500564da5e87b365d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":823,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca5c4eea246b9196","login":"dddanieltan","name":"Daniel Tan","avatar_url":"https://avatars-next.observableusercontent.com/1586cfda9db4d34e10adc795f6cf13cfe01d79e8fd4edcc500564da5e87b365d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"0387711d7952e4ed","login":"dddanieltan","name":"Daniel Tan","avatar_url":"https://avatars-next.observableusercontent.com/1586cfda9db4d34e10adc795f6cf13cfe01d79e8fd4edcc500564da5e87b365d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ca5c4eea246b9196","login":"dddanieltan","name":"Daniel Tan","avatar_url":"https://avatars-next.observableusercontent.com/1586cfda9db4d34e10adc795f6cf13cfe01d79e8fd4edcc500564da5e87b365d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"layers","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"dots","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"facets","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"voronoi","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"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: \"Greys\",\n // range: sequential13188028.rangeURLs\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"\nimport {sequential13188028} from \"@tomshanley/cheysson-color-palettes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"walmarts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"sequential13188028.rangeURLs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"density","database":"$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 Plot.geo(statemesh, { strokeOpacity: 0.3 }),\n Plot.geo(nation)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"vectors","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"Next \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"appendix","database":"$undefined"},{"id":49,"value":"walmarts = FileAttachment(\"walmarts.tsv\").tsv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"elections = FileAttachment(\"us-presidential-election-2020.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"counties = topojson.feature(us, us.objects.counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null