2f:[{"id":"d5b12e83fa8ef8dc76ac8b1d051975e330b55d783f279c4314f18ffbfdd3b7e2c948dc47f6a1aa20d71069cf17f3c300b2da6556f7afbf9bac595cde4014aa4e","href":"https://static.observableusercontent.com/files/d5b12e83fa8ef8dc76ac8b1d051975e330b55d783f279c4314f18ffbfdd3b7e2c948dc47f6a1aa20d71069cf17f3c300b2da6556f7afbf9bac595cde4014aa4e","name":"land.json","type":"application/json","lastModified":1680015531635.885,"size":2396812},{"id":"fee89c376624f835f9700ea61f06611feffec64c19a4dc769ac58a13865f576c1e4505a6f4281b346aeef79904d1c2729b5336b4c7b99caa941f7e78575e3e6d","href":"https://static.observableusercontent.com/files/fee89c376624f835f9700ea61f06611feffec64c19a4dc769ac58a13865f576c1e4505a6f4281b346aeef79904d1c2729b5336b4c7b99caa941f7e78575e3e6d","name":"beagle.json","type":"application/json","lastModified":1680015531635.885,"size":4707},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1680015531635.885,"size":842177},{"id":"ee8afc06d280f74df98603cf5b594f7eec8acf249c84f006e01b9bad44eb6fa325f93034fbe26120c473fc9d0f1c2be90b3ba11c384751b2dc1429c98a6c0cb6","href":"https://static.observableusercontent.com/files/ee8afc06d280f74df98603cf5b594f7eec8acf249c84f006e01b9bad44eb6fa325f93034fbe26120c473fc9d0f1c2be90b3ba11c384751b2dc1429c98a6c0cb6","name":"us-county-unemployment.csv","type":"text/csv","lastModified":1680015531635.885,"size":109819}] 2d:{"title":"Geo Mark / Observable Plot","cells":[{"id":368,"value":"

Geo Mark / Observable Plot

Observable Plot › Marks › Geo · API

\n\n# Plot: Geo\n\nThe **geo** mark draws geographic features and other polygonal geometry, often as maps. It works with Plot’s flexible [geographic projection system](https://observablehq.com/@observablehq/plot-projections${location.search}).","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"Plot.geo(counties, {fill: (d) => d.properties.unemployment}).plot({\n projection: \"albers-usa\",\n color: {\n type: \"quantile\",\n n: 8,\n scheme: \"blues\",\n label: \"Unemployment (%)\",\n legend: true\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"The [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) above shows county-level unemployment rates for the contiguous United States. To create it, we join a collection of county polygons (a GeoJSON file) with a table of unemployment rates (a CSV file): the _fill_ function looks up the unemployment rate for the given county. The data is prepared and explained in the [appendix below](#appendix).","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"A geo mark’s data is typically [GeoJSON](https://geojson.org/). You can pass a single GeoJSON object, a feature or geometry collection, or an array or iterable of GeoJSON objects. The map below combines Point, LineString, and MultiPolygon geometries to track Charles Darwin’s voyage on HMS _Beagle_. (Data via [Benjamin Schmidt](/@bmschmidt/data-driven-projections-darwins-world).)","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"land = FileAttachment(\"land.json\").json() // multi-polygon representing land area","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"beagle = FileAttachment(\"beagle.json\").json() // line representing the Beagle’s route","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"london = ({type: \"Point\", coordinates: [-0.13, 51.5]}) // London’s longitude and latitude","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"Plot.geo([land, beagle, london]).plot({projection: \"equirectangular\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"To improve this map, we can fill the land, thicken the line, increase the point size, add a bit of color to the [line](/@observablehq/plot-line) mark, and a caption. We can also adopt the [Equal Earth](https://equal-earth.com/equal-earth-projection.html) projection designed by Bojan Šavrič, Bernhard Jenny, and Tom Patterson.","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"Plot.plot({\n projection: \"equal-earth\",\n marks: [\n Plot.geo(land, {fill: \"currentColor\"}),\n Plot.graticule(),\n Plot.line(beagle.coordinates, {stroke: (d, i) => i, z: null, strokeWidth: 2}),\n Plot.geo(london, {fill: \"red\", r: 5}),\n Plot.sphere()\n ],\n caption: htl.html`The voyage of Charles Darwin aboard HMS Beagle, 1831–1836.`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1545,"value":"Note how the line uses the default _auto_ **curve** option, which interpolates by using the shortest path which, on the sphere, follows the great circle. Try and change the code above to specify curve: \"linear\" on the line mark, and see the difference!","pinned":false,"hidden":false,"mode":"md"},{"id":427,"value":"The convenience helper Plot.**graticule** draws a uniform grid of meridians (constant longitude) and parallels (constant latitude) every 10° between ±80° latitude (for the polar regions, meridians every 90°). Plot.**sphere**, for its part, draws the outline of the projected sphere.","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"Plot.plot({\n inset: 4,\n height: 400,\n projection: {type: \"orthographic\", rotate: [0, -35, 20]},\n marks: [Plot.graticule({strokeOpacity: 0.5}), Plot.sphere()]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"Like all marks, geo accepts both constant and channel values for the common mark options (such as fill, stroke, opacity…). The constant red color above allowed us to style the Point representing London. A variable channel, in turn, produces a different color for each geometry based on the associated datum.","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"The radius of Point and MultiPoint geometries is specified via the *r* option. It can be a constant number in pixels (as with London above), or a channel. If it a channel, geometries are sorted by descending radius, and the effective radius is controlled by the _r_ scale, which defaults to _sqrt_ such that the area of a point is proportional to its value. Points with a negative radius are not rendered.","pinned":false,"hidden":false,"mode":"md"},{"id":1192,"value":"earthquakes = (await fetch(\"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson\")).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1194,"value":"Plot.plot({\n projection: \"equirectangular\",\n marks: [\n Plot.graticule(),\n Plot.geo(land, {fill: \"#ccc\"}),\n Plot.geo(earthquakes, {r: d => Math.exp(d.properties.mag)}),\n Plot.sphere()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1246,"value":"As an alternative to Plot.geo with point geometries, you can pass longitude and latitude to Plot.dot’s _x_ and _y_ channels, and indeed many of Plot’s basic marks can be projected (like we did with the [line](/@observablehq/plot-line) mark for the _Beagle_’s route). You can even mix the two types of marks, depending on how your dataset is structured! Maps often layer several marks, as the [Mapping with Plot](/@observablehq/plot-mapping) notebook illustrates.","pinned":false,"hidden":false,"mode":"md"},{"id":1224,"value":"The geo mark’s _geometry_ channel can be used to generate geometry from a non-GeoJSON data source. For example, to visualize the shockwave created by the explosion of the Hunga Tonga–Hunga Haʻapai volcano on January 15, 2022 with a series of geodesic circles of increasing radius:","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"Plot.plot({\n projection: {\n type: \"equal-earth\",\n rotate: [90, 0]\n },\n color: {\n legend: true,\n label: \"Distance from Tonga (km)\",\n transform: (d) => 111.2 * d, // degrees to km\n nice: true\n },\n marks: [\n Plot.geo(land, { fill: (d) => palette2[9]}),\n Plot.geo(radii, {\n geometry: d3\n .geoCircle()\n .center(tonga)\n .radius((r) => r),\n stroke: (r) => palette2[r%9],\n strokeWidth: 2\n }),\n Plot.geo({ type: \"Point\", coordinates: tonga }, { fill: \"red\", r: 4 }),\n Plot.sphere()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1569,"value":"chartTmp = Plot.plot({\n projection: {\n type: \"albers-usa\",\n rotate: [96, 0],\n domain: counties,\n },\n color: {\n type: \"ordinal\",\n legend: true,\n \n },\n \n marks: [\n Plot.geo(counties, { fill: (d ,i) => palette3[i % palette3.length]}),\n \n \n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1671,"value":"chartTmp4 = Plot.plot({\n projection: {\n type: \"albers-usa\",\n rotate: [96, 0],\n domain: counties,\n },\n \n \n marks: [\n Plot.geo(counties, { fill: (d ,i) => palette5[i % palette5.length]}),\n \n \n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1664,"value":"// Manually set the colors using the `range`\nPlot.legend({\n color: {\n type: \"categorical\",\n domain: d3.range(palette5.length).map(d => `Category ${d + 1}`), \n range: palette5\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1555,"value":"palette2 = [\"rgb(158, 1, 66)\", \"rgb(214, 66, 75)\", \"rgb(244, 125, 77)\", \"rgb(253, 190, 112)\", \"rgb(254, 237, 161)\", \"rgb(240, 248, 169)\", \"rgb(190, 229, 160)\", \"rgb(119, 198, 167)\", \"rgb(67, 143, 180)\", \"rgb(94, 79, 162)\"]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1610,"value":"viewof nb = Inputs.range([2, 100], { label: \"nb\", step: 1, value: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1612,"value":"viewof color1 = Inputs.color({ label: \"color1\", value: \"#f4e153\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1614,"value":"viewof color2 = Inputs.color({ label: \"color2\", value: \"#38134e\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1676,"value":"palette5 = d3.quantize(d3.interpolateHcl(color1, color2), nb)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1617,"value":"palette3 = d3.quantize(d3.interpolateHcl(\"#bb1b2b\", \"#2f65bc\"), nb)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"{\n const h = 30;\n const boxw = width / nb;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, h]);\n\n svg\n .selectAll(\"rect\")\n .data(palette5)\n .join(\"rect\")\n .attr(\"x\", (d, i) => i * boxw)\n .attr(\"y\", 0)\n .attr(\"height\", h)\n .attr(\"width\", boxw)\n .attr(\"fill\", (d) => d)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.1);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1378,"value":"radii = d3.range(10, 171, 10) // degrees radii of circles to be centered around Tonga","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"tonga = [-175.38, -20.57]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1288,"value":"Lastly, Plot.geo is not limited to spherical geometries. [Plot’s projection system](/@observablehq/plot-projection) includes planar projections, which allow you to work with shapes—such as contours—generated on an arbitrary flat surface.","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":941,"value":"### GeoJSON, TopoJSON and other formats for geographic information\n\nThe GeoJSON format is a common way to represent geographic shapes: it can be used to specify geometries such as points (Point and MultiPoint), lines (LineString, MultiLineString), and areas (Polygon, MultiPolygon). Geometries can also be assembled and connected to properties (such as names, values…), to create Features.","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"For various reasons, features are often stored in a different format than GeoJSON. A common format is TopoJSON, which both offers a more compact representation (faster loading times), and facilitates topological operations such as merging polygons, computing meshes of edges, etc. Before feeding these to Plot.geo, you have to convert them to GeoJSON with the [topojson-client](https://github.com/topojson/topojson-client) library—automatically available in Observable notebooks. Other libraries exist that can read various formats used to encode geographic shapes—such as shapefiles, geoparquet, _etc._ In all cases, there exists a way to create a GeoJSON representation from these files, that we can pass to Plot.geo.","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"In fact, in the case of TopoJSON files, the code that does the job is shorter than our explanation! See below how we extract the *nation* feature, aggregate the edges between states in *statemesh*, and retrieve the counties as a FeatureCollection, all from a single file *us-counties-10m.json*, saved as a TopoJSON file attachment.","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"counties = {\n const rate = new Map(unemployment.map(({id, rate}) => [id, rate]));\n const counties = topojson.feature(us, us.objects.counties);\n for (const county of counties.features) county.properties.unemployment = rate.get(county.id);\n return counties;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1463,"value":"### Tabular data\n\nThe dataset below contains the 2016 unemployment rates for each county from the [U.S. Bureau of Labor Statistics](https://www.bls.gov/lau/tables.htm). Above, we index them by the county’s [FIPS code](https://en.wikipedia.org/wiki/FIPS_county_code) for faster access when joining them with the geometries.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"unemployment = (await FileAttachment(\"us-county-unemployment.csv\").csv()).map(({rate, ...rest}) => ({...rest, rate: +rate}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1551,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}