2f:T426,[**Plot.geo**](https://observablehq.com/@observablehq/plot-geo) draws geographic features and other polygonal geometry, and combined with other marks (_e.g._ dot, line, density, etc.) provides a user-friendly way to build maps with [Observable Plot](https://observablehq.com/@observablehq/plot-mapping). The aim of this tutorial is to get you up-and-running with your first map in Plot, focusing on: - Using Plot.geo in combination with other Plot marks - Customizing the map (updating aesthetics, and adding layers) - Extending your knowledge and data to new map types You can temporarily make edits to this notebook in [tinker mode](https://observablehq.com/@observablehq/tinker-mode). To store your changes, [fork](https://observablehq.com/@observablehq/fork-suggest-merge) this notebook to make updates in your own copy. If you are new to Observable, we recommend checking out our [Learning Observable](https://observablehq.com/collection/@observablehq/intro-to-observable) course, which introduces notebooks, cells, accessing data, and Observable Plot.30:T418,To create the bubble map, we need to give Plot some essential information: 1. A projection. Here, we’ll use “albers-usa”. Adding a projection will apply the projection function to _all_ the marks in the chart. For example, points created in a Plot.dot layer will be updated using the same projection function as a basemap created with Plot.geo. Learn more about Observable [Plot projections](https://observablehq.com/@observablehq/plot-projections). 2. The state boundaries (states) 3. Power plant locations (with longitude and latitude as x and y, respectively), from the us_power_plants data, added as dots using [Plot.dot](https://observablehq.com/@observablehq/plot-dot). That’s right — the marks you are already using in Plot can often be used in combination with Plot.geo! 4. Dot radius (r), which we can update to be the Total_MW (total capacity, megawatts) for each plant The code and output below show the dot map produced only using those essential pieces of information, plus a few optional updates to the canvas dimensions.31:T654,powerPlantsHighlighted = Plot.plot({ title: "US Power Plants", projection: "albers-usa", marks: [ Plot.geo(states, { strokeWidth: 4, stroke: "grey" }), // outline of the USA Plot.geo(states, { fill: "white", strokeWidth: 2, stroke: "#e2e2e2" }), // Stroke color for internal state boundaries Plot.dot(us_power_plants, { x: "longitude", y: "latitude", r: "Total_MW", fill: "PrimSource", opacity: 0.7 }), Plot.dot(us_power_plants, { // Can you figure out what this additional Plot.dot layer adds? x: "longitude", y: "latitude", r: "Total_MW", fill: "PrimSource", stroke: "black", filter: d => d.Total_MW > 3500 }), Plot.text(us_power_plants, { // Add text to the map using data from us_power_plants x: "longitude", // Place text horizontally at plant longitude y: "latitude", // Place text vertically at plant latitude text: "Plant_Name", // The text that appears is the value from the Plant_Name column, filter: (d) => d.Total_MW > 3500, // Only add text for plants with capacity exceeding 3500 MW fontSize: 12, // Increased font size fontWeight: 600, // Increased font weight stroke: "white", // Adds white outer stroke to text (for readability) fill: "black", // Text fill color textAnchor: "start", // Left align text with the x- and y-coordinates dx: 15 // Shifts text to the right (starting from left alignment with coordinate) }) ], r: { range: [1, 15] }, color: { legend: true }, height: 500, width: 800, margin: 10, marginRight: 100 })32:T632,function legendRadius( scale, { label = scale.label, ticks = 5, tickFormat = (d) => d, strokeWidth = 0.5, strokeDasharray = [5, 4], lineHeight = 8, gap = 20, style } = {} ) { // const s = scale.scale; const s = scale.type === "pow" ? d3.scalePow(scale.domain, scale.range).exponent(scale.exponent) : d3.scaleLinear(scale.domain, scale.range); // TODO add more types as needed const r0 = scale.range[1]; const shiftY = label ? 10 : 0; let h = Infinity; const values = s .ticks(ticks) .reverse() .filter((t) => h - s(t) > lineHeight / 2 && (h = s(t))); return Plot.plot({ width: 2 * r0 + 90, x: { type: "identity", axis: null }, r: { type: "identity" }, y: { type: "identity", axis: null }, marks: [ Plot.link(values, { x1: r0 + 2, y1: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY, x2: 2 * r0 + 2 + gap, y2: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY, strokeWidth: strokeWidth / 2, strokeDasharray }), Plot.dot(values, { r: s, x: r0 + 2, y: (d) => 8 + 2 * r0 - s(d) + shiftY, strokeWidth }), Plot.text(values, { x: 2 * r0 + 2 + gap, y: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY, textAnchor: "start", dx: 4, text: tickFormat }), Plot.text(label ? [label] : [], { x: 0, y: 6, textAnchor: "start", fontWeight: "bold", text: tickFormat }) ], height: 2 * r0 + 10 + shiftY, style }); }33:[{"id":"910c3e3aede5825085d0765e749f85b898011e0427ec6ae34f2782878c61e8dc4efe543afe42d0cc3fc395e2aa42aa6dfeacd15cceefda35f82030bba14ea36a","href":"https://static.observableusercontent.com/files/910c3e3aede5825085d0765e749f85b898011e0427ec6ae34f2782878c61e8dc4efe543afe42d0cc3fc395e2aa42aa6dfeacd15cceefda35f82030bba14ea36a","name":"bubbles.png","type":"image/png","lastModified":1702417353654.152,"size":3855992},{"id":"42ebb07693caf831d1519a69fee444de246ede2fa18d16469eed04124660b15ac4653698e6278fa263a74e5338eaed2aafa419fa599175662604ec5bffe0159f","href":"https://static.observableusercontent.com/files/42ebb07693caf831d1519a69fee444de246ede2fa18d16469eed04124660b15ac4653698e6278fa263a74e5338eaed2aafa419fa599175662604ec5bffe0159f","name":"us_power_plants.csv","type":"text/csv","lastModified":1702417353654.152,"size":1248043},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1702417353654.152,"size":842177},{"id":"5416e921a75b1701f029cb06d7a9929848596ab8a21403f86f0ff21385e31fbfdaef9c1908517ed203d39ee6a37b84634434909516b51425c0dd407d007a02b3","href":"https://static.observableusercontent.com/files/5416e921a75b1701f029cb06d7a9929848596ab8a21403f86f0ff21385e31fbfdaef9c1908517ed203d39ee6a37b84634434909516b51425c0dd407d007a02b3","name":"us-county-unemployment.csv","type":"text/csv","lastModified":1702417353654.152,"size":109819}] 2d:{"title":"3.1) Intro to Thematic Mapping","cells":[{"id":0,"value":"# 3.1) Intro to Thematic Mapping","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"This tutorial walks through the process of building a bubble (proportional symbol) and choropleth maps of United States ","pinned":false,"hidden":false,"mode":"md"},{"id":1316,"value":"bubbles = FileAttachment(\"bubbles.png\").image({width: 700})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"---\n## Introduction","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"---\n## Power Plant Data","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"We will create and customize a bubble map of power plants in the United States, with bubble radius representing the plant capacity (in megawatts). The data is published in the US Energy Information Administration’s [US Energy Atlas](https://atlas.eia.gov/datasets/eia::power-plants/about).\n\nA preview of the power plant data (from the attached us_power_plants.csv file) is shown below in a [Data Table](https://observablehq.com/@observablehq/data-table-cell) cell. See [Learning Observable](https://observablehq.com/@observablehq/learning-observable-getting-data-into-observable?collection=@observablehq/intro-to-observable) for an introduction to getting data into Observable notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"us_power_plants = await FileAttachment(\"us_power_plants.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"The us_power_plants data provides the location and capacity of power plants. We also need a base map of the United States to place those bubbles on for spatial context. For our base map, we’ll use state boundaries from the attached us-counties-10m.json file. ","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"First, we import us-counties-10m.json into the notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"Then, we access the state borders:","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Now, with the power plant locations (us_power_plants) and state borders (states) ready to go, we can start building our map. ","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"---\n## A basic bubble map: US power plant locations and capacity","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"Plot.plot({ // Initialize the plot\n projection: \"albers-usa\", // Set the projection\n marks: [\n Plot.geo(states), // Add the state boundaries\n Plot.dot(us_power_plants, { // Create dot marks (bubbles) using data from power_plants\n x: \"longitude\", // Provide longitude values\n y: \"latitude\", // Provide latitude values\n r: \"Total_MW\" // Update bubble radius based on this variable's value\n })\n ],\n height: 600, // Update canvas height\n width: 900, // Update canvas width\n margin: 10 // Update margins\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"So we’ve made our first bubble map. Hooray! And also, yikes — this could really use some work to make it more readable and meaningful. For example, the overlapping circles are hard to read, and there is potentially important information missing (like power source). In the next section, we’ll explore a few ways to customize our map.","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"---\n## Map customization","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Okay, so we have some work to do. Good news: you can customize maps built in Observable Plot with simple additional options in the marks’ definitions.","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"As a start, we’ll:\n- Add channels to update states **fill** and border color (**stroke**)\n- Update the bubble **fill** color to depend on primary source\n- Add a **legend** so that the bubble color is meaningful\n- Reduce the point **opacity** to reveal overlapping points\n- Limit the radius size **range** to make the map more readable","pinned":false,"hidden":false,"mode":"md"},{"id":256,"value":"Check out the [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets) to learn more about customizing charts. All the mark types in Plot (including Plot.geo) can be configured in similar ways — whether it’s scatterplots, maps, histograms. ","pinned":false,"hidden":false,"mode":"md"},{"id":1491,"value":"legendRadius(powerPlants.scale(\"r\"), { ticks: 3, label: \"Total MW by Power Plant\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"powerPlants = Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(states, { strokeWidth: 4, stroke: \"grey\" }), // outline of the USA\n Plot.geo(states, { fill: \"white\", strokeWidth: 2, stroke: \"#e2e2e2\" }), // Stroke color for internal state boundaries\n Plot.dot(us_power_plants, {\n x: \"longitude\",\n y: \"latitude\",\n r: \"Total_MW\",\n fill: \"PrimSource\", // Update dot fill color to depend on primary source (variable: PrimSource)\n opacity: 0.7 // Decrease opacity (0 = transparent, 1 = opaque)\n })\n ],\n r: { range: [1, 14] }, // Limit the size range for dot radii\n color: { legend: true }, // Include a legend for the fill color\n height: 500,\n width: 800,\n margin: 15\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"try_it(htl.html`Try it! Update the dot radius range, dot opacity and states fill color in the cell above to see how the map changes.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"Note that the legend showing the relative sizes of circles at the top of the map had to be added separately. At the time of writing, it's difficult to add multiple legends on the same figure. The code for the relative circle legend was sourced from [here](https://observablehq.com/@recifs/a-radius-legend-for-plot-665)","pinned":false,"hidden":false,"mode":"md"},{"id":1383,"value":"Using default settings for a [continuous radius scale in Plot](https://observablehq.com/@observablehq/plot-scales#cell-80), a zero value maps to zero for an accurate areal encoding. In the map above, that would make power plants with very low capacities difficult (or impossible) to see. So that low-capacity plants are visible on the map, we’ve updated the lower limit of our radius range to 1.","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"Now, we can start considering some patterns. For example: \n\n- Where do we see concentrations of hydroelectric power plants?\n- Do most wind plants exist within the Midwestern wind belt, where the [highest average wind speeds](https://windexchange.energy.gov/maps-data/319) occur?\n- What other interesting clusters or patterns do you notice in the data?","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"Let’s build up from our functional bubble map and see how we can continue adding layers with different marks. ","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"---\n## Building maps, layer by layer","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"It’s often useful to layer multiple marks atop one another when creating maps. For example, you may want to view point locations of wind turbines overlayed onto contours of average wind speeds. Or — as we’ll practice here — you may want to add helpful text labels to highlight notable locations, values or patterns. ","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"Let’s add text labels to US power plants with total capacity exceeding 3,500 MW. We’ll add a layer to our map using [Plot's text mark](https://observablehq.com/@observablehq/plot-text), then update the appearance and position. ","pinned":false,"hidden":false,"mode":"md"},{"id":1481,"value":"legendRadius(powerPlantsHighlighted.scale(\"r\"), { ticks: 4, label: \"Total MW by Power Plant\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"try_it(htl.html`Try it! Update the outline color, line weight (hint: add a strokeWidth option), and line color for the labeled power plants. Then, update the text labels so that the Utility_Name is shown, change the font size, and update text alignment so that labels are to the right of the bubble.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"In the map above, text labels are added in the Plot.text layer. Additionally, a second Plot.dot layer is added to highlight labeled plants by making their dots opaque (the default if no opacity is specified) and adding a black border. \n","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"\n**Takeaway:** different marks can be layered together to add context and meaning to your maps.\n\nIf you’re new to JavaScript, the notation in those filtering steps (d => d.something...) might look unfamiliar. That’s called _arrow function notation_, which provides a concise way of writing a function. In this case, it checks the value of the Total_MW column in us_power_plants, only including rows if the value is greater than 3,500. Learn more about writing functions in JavaScript: [Learn Just Enough JavaScript: Introduction](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=@observablehq/tutorial#cell-129).","pinned":false,"hidden":false,"mode":"md"},{"id":1430,"value":"## Choropleth Map\n\nA very common type of data map is a [Choropleth Map](https://en.wikipedia.org/wiki/Choropleth_map). This type of map shades polygons or areas by different colours depending on data values. \n\nFor example, lets create a Choropleth map for unemployment by county in the United States.\n\nFirst, we need to load data on Unemployment, and 'join' it do the geographic boundary data of US Counties. For more details on building choropleth maps and joining data, check out [this tutorial](https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot) ","pinned":false,"hidden":false,"mode":"md"},{"id":1434,"value":"counties = {\n const counties = topojson.feature(us, us.objects.counties);\n const rate = await FileAttachment(\"us-county-unemployment.csv\").csv();\n const map = new Map(rate.map((d) => [d.id, +d.rate]));\n counties.features.forEach((g) => {\n g.properties.unemployment = map.get(g.id);\n });\n return counties.features;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"Now let's create the map! Try tinkering with the options in the `color` object to adjust how the map is displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":1441,"value":"Plot.plot({\n projection: \"albers-usa\",\n color: {\n type: \"quantile\",\n n: 5,\n scheme: \"Purples\",\n label: \"Unemployment (%)\",\n legend: true\n },\n marks: [\n Plot.geo(counties, {\n fill: (d) => d.properties.unemployment,\n opacity: 0.9\n }),\n Plot.geo(states, {\n stroke: \"black\",\n strokeWidth: 1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"---\n## Other map types at-your-fingertips","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"We can use many [of Observable Plot’s existing marks](https://observablehq.com/@observablehq/plot-mapping) to add map layers, which means we can quickly switch between and tinker with different map types with relatively minor code changes or additions. \n\nBelow, we use [Plot.density](https://observablehq.com/@observablehq/plot-density) to visualize the highest concentrations of US power plants (weighted by capacity). The weight channel is used to signify that some points have proportionally more influence than others. We’ve also made the map interactive by connecting it to an [Input](https://observablehq.com/@observablehq/inputs) (in this case, a menu that allow to selects one or several sources of primary energy).","pinned":false,"hidden":false,"mode":"md"},{"id":1198,"value":"viewof selectSource = Inputs.select(us_power_plants.map(d => d.PrimSource),\n { unique: true, label: \"Select primary source(s):\", multiple: true, value: [\"coal\", \"nuclear\", \"hydroelectric\", \"wind\"] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(states, { fill: \"white\", stroke: \"#e2e2e2\" }),\n Plot.dot(us_power_plants, {\n x: \"longitude\",\n y: \"latitude\",\n r: \"Total_MW\",\n stroke: \"PrimSource\",\n strokeOpacity: .5,\n opacity: d => selectSource.includes(d.PrimSource) ? 0.7 : 0,\n }),\n Plot.density(us_power_plants, {\n x: \"longitude\",\n y: \"latitude\",\n bandwidth: 10,\n thresholds: 10,\n stroke: \"PrimSource\",\n fill: \"PrimSource\",\n fillOpacity: 0.25,\n opacity: d => selectSource.includes(d.PrimSource) ? 0.7 : 0, // (transparent unless source selected)\n mixBlendMode: \"multiply\", \n weight: \"Total_MW\"\n })\n ],\n height: 500,\n width: 800,\n margin: 50,\n density: {\n domain: [100, 2000]\n },\n r: { range: [1, 15], domain: d3.extent(us_power_plants, (d) => d.Total_MW) },\n color: { legend: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"Or, by slightly updating the code, we can create a hexbin map to show counts of plants near different locations:","pinned":false,"hidden":false,"mode":"md"},{"id":653,"value":"Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(states, { fill: \"#eaeaea\", stroke: \"white\" }),\n Plot.dot(\n us_power_plants,\n Plot.hexbin(\n { r: \"count\", fill: \"count\" },\n { x: \"longitude\", y: \"latitude\" }\n )\n )\n ],\n height: 500,\n width: 800,\n margin: 50,\n r: { range: [0, 15] },\n color: {\n legend: true,\n label: \"Number of power plants:\",\n scheme: \"cool\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"---\n## Wrap-up","pinned":false,"hidden":false,"mode":"md"},{"id":729,"value":"So there you have it — your first map (maps, even!) made with Plot. Several major takeaways from this tutorial: \n\n- Create maps with Observable Plot using Plot.geo in combination with other marks\n- The projection is applied to Plot.geo _and_ other marks\n- Customize maps in Plot using channels and syntax used in other chart types, and by adding additional layers for context and meaning\n- You can quickly switch between or tinker with many different map types\n","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"This is a first taste of map making in Plot. To learn more, visit: \n\n- [Mapping with Plot](https://observablehq.com/@observablehq/plot-mapping)\n- [Plot.geo documentation](https://observablehq.com/@observablehq/plot-geo)\n- [Plot: Projections](https://observablehq.com/@observablehq/plot-projections)\n- [Build your first choropleth map with Observable Plot](https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot)","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"import {try_it} from \"@observablehq/notes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}