25:["$","title",null,{"children":"Is Calgary a 15-minute city? | Jérémie | Observable"}] 49: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.4a:T57e,Plot.plot({ projection: "albers-usa", marks: [ Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }), 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: 50 })4b:[{"id":"56d3a897b7af49ad78fcfefe593ced5b3fffe66d6e19510776128b01b00df6230be53a29e05c4b6ec7f2e065efb6a0183ec901f866401dbc66373caa07311243","href":"https://static.observableusercontent.com/files/56d3a897b7af49ad78fcfefe593ced5b3fffe66d6e19510776128b01b00df6230be53a29e05c4b6ec7f2e065efb6a0183ec901f866401dbc66373caa07311243","name":"Community District Boundaries.geojson","type":"application/geo+json","lastModified":1677363938999.124,"size":2220004},{"id":"78815b84f6eeeb2c38e449fc19b5aaa4c0cc60cbc49d7dbdcdd15a25977a175467e1731cd5d42d47e65ff6dbc05816288d2e3b632dc38debd46979e3a8dc6c47","href":"https://static.observableusercontent.com/files/78815b84f6eeeb2c38e449fc19b5aaa4c0cc60cbc49d7dbdcdd15a25977a175467e1731cd5d42d47e65ff6dbc05816288d2e3b632dc38debd46979e3a8dc6c47","name":"Calgary_Public_Library_Locations@1.csv","type":"text/csv","lastModified":1677370774173.103,"size":2497},{"id":"8dd2d550869b4dbc7c02e255859c0592c5e12a0ecbe8692f12be74dcfe97b2f1db01d709c1d11fe7e72cbad3fc1aa3a9d9b45f0252422a71ca6074798f7cfd48","href":"https://static.observableusercontent.com/files/8dd2d550869b4dbc7c02e255859c0592c5e12a0ecbe8692f12be74dcfe97b2f1db01d709c1d11fe7e72cbad3fc1aa3a9d9b45f0252422a71ca6074798f7cfd48","name":"Community_Points.csv","type":"text/csv","lastModified":1677367970216.063,"size":42541},{"id":"920d19fd22a76aa669040a6294092fa693f9b4ebee8add052a7f350dedd9d748483cceb89f22c8aa2d43b1053869861d98c4cdf38241faac9a965f843019af51","href":"https://static.observableusercontent.com/files/920d19fd22a76aa669040a6294092fa693f9b4ebee8add052a7f350dedd9d748483cceb89f22c8aa2d43b1053869861d98c4cdf38241faac9a965f843019af51","name":"Parks_Sites.csv","type":"text/csv","lastModified":1677372248820.074,"size":20538768},{"id":"62ea3b44cdb2024f0e03c6a2e35895b38f9cd984c3f78ae0f45014260d1c2fd03e55d031c04a1277426afb9783a018e34107d7afe9a63609bf3ea38cf5f213b8","href":"https://static.observableusercontent.com/files/62ea3b44cdb2024f0e03c6a2e35895b38f9cd984c3f78ae0f45014260d1c2fd03e55d031c04a1277426afb9783a018e34107d7afe9a63609bf3ea38cf5f213b8","name":"School_Locations@3.csv","type":"text/csv","lastModified":1677374797384.103,"size":70043},{"id":"04d691d35aad4074dd0a3f5616a396ec730d07c1cd31b80e7c579c3d28fe6294887c91ef8d65b79a1883d36db5c574e482306893632b5fbb670899e9f573d3dd","href":"https://static.observableusercontent.com/files/04d691d35aad4074dd0a3f5616a396ec730d07c1cd31b80e7c579c3d28fe6294887c91ef8d65b79a1883d36db5c574e482306893632b5fbb670899e9f573d3dd","name":"School_Locations@4.csv","type":"text/csv","lastModified":1677374952237.838,"size":70043}] 29:{"id":"1e0d486929e9b4b5","slug":null,"title":"Is Calgary a 15-minute city?","thumbnail":"8c4d60aacafdd01c62a66a07aa60fcd2ba4e53f0a524a78adc5f7f55ebe9dfcf","access_level":"public","create_time":"$D2023-02-24T21:21:56.862Z","update_time":"$D2024-07-18T06:21:48.418Z","view_time":null,"first_public_time":"$D2023-02-24T21:21:56.862Z","has_unpublished_edits":null,"fork":{"id":"11b13ac42260afc2","slug":"build-your-first-map-with-observable-plot","title":"Build your first map with Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e44fc6a0affb9bf7","login":"jeremiebdn","name":"Jérémie","avatar_url":"https://avatars-next.observableusercontent.com/2f00817d9e632f145488d7658a1f664d32094c094efb17b98974600584a193ff","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1651,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"832ebd2e8d3dbad0","login":"jeremiebdn","name":"Jérémie","avatar_url":"https://avatars-next.observableusercontent.com/2f00817d9e632f145488d7658a1f664d32094c094efb17b98974600584a193ff","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"832ebd2e8d3dbad0","login":"jeremiebdn","name":"Jérémie","avatar_url":"https://avatars-next.observableusercontent.com/2f00817d9e632f145488d7658a1f664d32094c094efb17b98974600584a193ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Is Calgary a 15-minute city?","cells":[{"id":0,"value":"# Is Calgary a 15-minute city?\n\nReplicating Nat Henry's analysis of [Seattle's walkability](https://nathenry.com/writing/2023-02-07-seattle-walkability.html) on Calgary neighbourhoods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"---\n## Introduction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"---\n## Meet the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"We will create and customize a map of communities in Calgary. The data is published on the City of Calgary's [Open Data Portal](https://data.calgary.ca/) (Open Government Licence – City of Calgary).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1642,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1591,"value":"Community center points:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"communities = await FileAttachment(\"Community_Points.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"communities","database":"$undefined"},{"id":61,"value":"Community district boundaries:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"calgary = FileAttachment(\"Community District Boundaries.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"Calgary Public Library locations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1563,"value":"libraries = await FileAttachment(\"Calgary_Public_Library_Locations@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"libraries","database":"$undefined"},{"id":69,"value":"Calgary School locations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1600,"value":"schools = await FileAttachment(\"School_Locations@4.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"schools","database":"$undefined"},{"id":240,"value":"---\n## Map customization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"Plot.plot({ // Initialize the plot\n projection: {\n type: \"mercator\",\n domain: {\n type: \"MultiPoint\", \n coordinates: [[-114.4, 50.85], [-113.7, 50.85], [-114.4, 51.2], [-113.7, 51.2]]\n },\n },\n marks: [\n Plot.geo(calgary, { \n stroke: \"#e2e2e2\",\n }),\n Plot.dot(communities, {\n x: \"longitude\",\n y: \"latitude\",\n r: 4,\n fill: \"CLASS\",\n opacity: 0.7,\n }),\n Plot.dot(libraries, { \n x: \"Longitude\",\n y: \"Latitude\",\n r: \"Square_Feet\"\n }),\n Plot.dot(schools, { \n x: \"Longitude\",\n y: \"Latitude\",\n stroke: \"#DDD\",\n r: 1\n })\n ],\n color: { \n legend: true,\n type: \"categorical\",\n range: [\"#bab0ab\", \"#59a14f\", \"#4e79a7\", \"#76b7b2\"]\n },\n height: 800, // Update canvas height\n width: 800, // Update canvas width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"---\n## Building maps, layer by layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"---\n## Other map types at-your-fingertips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"---\n## Wrap-up","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":830,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":828,"value":"import {try_it} from \"@observablehq/notes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null