2f:T477,

Problem	A	B	C	D
${outline.problem1.name}	✅	✅	✅	✅
${outline.problem2.name}	✅	✅	✅
${outline.problem3.name}	✅	✅
${outline.problem4.name}	✅

30:T603,mdPlus` - [ ] Add the necessary citations and attributions. The original dataset source is not cited in every notebook unfortunately, but you can [find it here](https://users.econ.umn.edu/~holmes/data/WalMart/store_openings.html). - [ ] Change the projection to include Alaska and Hawaii. [[1](https://observablehq.com/plot/features/projections)] - [ ] Adjust the plot background and nation style to both have a fill color, and to draw the nation outline. [[1](https://observablehq.com/plot/marks/frame)] - [ ] Add internal state boundaries ONLY in white. Use \`statemesh\` from the [Choropleth](https://observablehq.com/@d3/choropleth/2) notebook as a starting point. - [ ] Fill each dot by year ONLY. Inspect the \`walmarts\` array for the property to use. Adjust the style of the dots as needed. - [ ] Adjust the color to use a \`quantize\` scale in an appropriate color scheme [[1]](https://observablehq.com/plot/features/scales#color-scales). - [ ] Adjust the voronoi mesh to be less visually prominent (to more clearly push it in the "background" and bring the data to the "foreground"). - [ ] Make the voronoi mesh interactive to show the nicely-formatted date [[1](https://d3js.org/d3-time-format)] in a tooltip when hovered over by the mouse [[2]](https://observablehq.com/plot/marks/tip). *Hint: Set the title attribute.* ***Important:** You are making the voronoi cell interactive, not the dot itself. This will make it much easier to interact with!* - [ ] Add a title, subtitle, and caption to the visualization. `31:T6f1,mdPlus` - [ ] Change the projection to something else that does *not* require rotation to view the entire world. Explore options with the [World Projections](https://observablehq.com/@observablehq/plot-world-projections) notebook. - [ ] Customize the appearance of the projection spehere [[1](https://observablehq.com/plot/marks/geo#sphere)] and land masses, and add the projection grid (or graticule) [[2](https://observablehq.com/plot/marks/geo#graticule)] to the map. - [ ] Using the [earthquake GeoJSON](https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson) data feed being loaded and the [descriptions of each property](https://earthquake.usgs.gov/data/comcat/index.php), add to the \`d3.json(...)\` call the following two properties to the \`earthquakes\` dataset: - The significance (or severity) of the earthquake - The place description - The timestamp using \`%Q\` to parse [[1](https://d3js.org/d3-time-format)] into a date - [ ] Color the circles by significance using an appropriate color scale and add a color legend. The fill should be slightly transparaent, and the color legend should reflect that as well. [[1](https://observablehq.com/plot/features/legends#legend-options)] - [ ] Enable a tooltip [[1](https://observablehq.com/plot/marks/tip)] on the circles that shows the place, nicely formatted date [[2](https://d3js.org/d3-time-format)], original magnitude, and severity. Do *not* include the latitude, longitude, or transformed magnitude. ***Hint:** You will need to set the \`channels\` attribute and the tip \`format\` attribute. Use the [Tip Format](https://observablehq.com/@observablehq/plot-tip-format) notebook as a starting point.* - [ ] Add a title, subtitle, and caption to the visualization. `32:[{"id":"ed695f70a6ea86b3e9f622994de8902388679fefb9698ab85d2d8444628b41fb4e6f6782587198303284f4f5e206ee6f1ae6b0f2e05ca44246d394c7ae68434a","href":"https://static.observableusercontent.com/files/ed695f70a6ea86b3e9f622994de8902388679fefb9698ab85d2d8444628b41fb4e6f6782587198303284f4f5e206ee6f1ae6b0f2e05ca44246d394c7ae68434a","name":"earthquakes.png","type":"image/png","lastModified":1762390209108.801,"size":253652},{"id":"2afc67bc3423ec8514b039973eb72ad7bc7c61791b62f2df1f94164675548d7d4fb0b482a7299dcf69b897508120d5c077898491b8dd23b8d9548484bdf9da9e","href":"https://static.observableusercontent.com/files/2afc67bc3423ec8514b039973eb72ad7bc7c61791b62f2df1f94164675548d7d4fb0b482a7299dcf69b897508120d5c077898491b8dd23b8d9548484bdf9da9e","name":"unemployment.png","type":"image/png","lastModified":1762390209108.801,"size":102482},{"id":"30cbc85ee8f08cb9f376b25bdb0dfb640ce863afdbd8486a88da60cac45c1fbbfe9720a33c42af079f3e38e497536c48c1de172ff303bcb27204b543c98e9e51","href":"https://static.observableusercontent.com/files/30cbc85ee8f08cb9f376b25bdb0dfb640ce863afdbd8486a88da60cac45c1fbbfe9720a33c42af079f3e38e497536c48c1de172ff303bcb27204b543c98e9e51","name":"walmart@1.png","type":"image/png","lastModified":1762390209108.801,"size":747184}] 2d:{"title":"Lab 7 Geospatial","cells":[{"id":0,"value":"# Lab 7 Geospatial","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"

\n New:\n Please add your notebook to the \"Lab # Submissions\" collection when forking this notebook. This will help speed up grading. You can delete this notice after reading.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":172,"value":"$${cs181ap.helpers.deadlineNotice(today, lab.due)}","pinned":false,"hidden":false,"mode":"html"},{"id":206,"value":"Read the introduction and follow the instructions below. Make sure to replace any `TODO` cells with your responses. \n\n*Note: If you accidentally modify or delete one of the instruction cells, you can reference the [starter notebook](${lab.start}) for the original or [view your notebook history](https://observablehq.com/documentation/notebooks/history) instead.*","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"Inputs.button(\"Highlight TODOs\", { reduce: cs181ap.helpers.markTODOs })","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Introduction\n\nThe lab introduction will be included here.","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"### Learning Goals\n\n1. Practice different geospatial data visualization techniques in Observable Plot and D3.js.\n2. Practice interactivity.","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"### Grading Rubric\n\nThe letter grade for this homework will be broken down as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":298,"value":"Visit the [Lab Grading](https://hmc-datavis-fall2025.notion.site/lab-grading?source=copy_link) guide for details on how the base letter grade and minus/plus grades are calculated.","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"### Targeted Grade\n\nTo make sure the grades do not miss anything, make sure to indicate your **targeted letter grade** below. You do not need to specify a plus or minus grade.","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"**Expected Grade:** B","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"## ${outline.problem1.name}\n\nThe goal of this problem is to customize a non-proportional symbol map created in Observable Plot to add state boundaries using TopoJSON, add color, and support simple details-on-demand interactivity.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":643,"value":"Start by creating a fork (**visible to the team**) of the following notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"[Walmart Voronoi](https://observablehq.com/@observablehq/plot-walmart-voronoi)","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"In your forked notebook, complete the following tasks:","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"An *example* of what your visualization should look *similar* to (without title the and caption) is provided below with the mouse hovered over one of the voronoi cells:","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"walmart = FileAttachment(\"walmart@1.png\").image({width: 450})","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"When you are done, [import the completed visualization](https://observablehq.com/documentation/notebooks/imports#importing-cells) from your forked notebook (including titles and caption) below:","pinned":false,"hidden":false,"mode":"md"},{"id":940,"value":"import {walmart_map} from \"571dc64c9e146ca3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"walmart_map","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"Enter a link to your forked notebook below. Double-check that the forked notebook is **visible to the team**.","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"[NOTEBOOK LINK](https://observablehq.com/d/571dc64c9e146ca3)","pinned":false,"hidden":false,"mode":"md"},{"id":748,"value":"Add the necessary citations and attributions below. The original dataset source is not cited in every notebook unfortunately, but you can [find it here](https://users.econ.umn.edu/~holmes/data/WalMart/store_openings.html).\n","pinned":false,"hidden":false,"mode":"md"},{"id":750,"value":"Data source:[ Holmes, Thomas J. Store Openings Dataset. 2010, University of Minnesota, Federal Reserve Bank of Minneapolis, and NBER.](https://users.econ.umn.edu/~holmes/data/WalMart/store_openings.html) ","pinned":false,"hidden":false,"mode":"md"},{"id":427,"value":"## ${outline.problem2.name}\n\nThe goal of this problem is to customize a proportional symbol map created in Observable Plot to customize the projection, add the projection grid, add color, and support simple details-on-demand interactivity.\n\nStart by creating a fork (**visible to the team**) of the following notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"[Earthquake globe](https://observablehq.com/@observablehq/plot-earthquake-globe)","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"In your forked notebook, complete the following tasks:","pinned":false,"hidden":false,"mode":"md"},{"id":429,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"An *example* of what your visualization should look *similar* to (without title the and caption) is provided below with the mouse hovered over one of the circles:","pinned":false,"hidden":false,"mode":"md"},{"id":730,"value":"earthquakes = FileAttachment(\"earthquakes.png\").image({width: 450})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"When you are done, [import the completed visualization](https://observablehq.com/documentation/notebooks/imports#importing-cells) from your forked notebook (including titles and caption) below:","pinned":false,"hidden":false,"mode":"md"},{"id":951,"value":"import {earthquake_globe} from \"b484cf347e5ba875\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"earthquake_globe","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"Enter a link to your forked notebook below. Double-check that the forked notebook is **visible to the team**.","pinned":false,"hidden":false,"mode":"md"},{"id":773,"value":"[Notebook](https://observablehq.com/d/b484cf347e5ba875)","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"Add the necessary citations and attributions below. You can [learn more about the dataset](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) and [the licensed used](https://www.usgs.gov/information-policies-and-instructions/copyrights-and-credits#copyright) for all USGS data.","pinned":false,"hidden":false,"mode":"md"},{"id":775,"value":"- Globe was created using [GeoJSON](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php)\n- Earthquake data comes from the [ANSS Comprehensive Earthquake Catalog](https://earthquake.usgs.gov/data/comcat/index.php#place) from USGS","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"## ${outline.problem3.name}\n\nThe goal of this problem is to customize an interactive map created in D3.js such that it is a choropleth of unemployment data.\n\nStart by creating a fork (**visible to the team**) of the following notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":825,"value":"[Zoom to bounding box](https://observablehq.com/@d3/zoom-to-bounding-box)","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"You should also open the following notebook for reference:\n\n[U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2)","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"In your forked notebook, complete the following tasks:","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"mdPlus`\n- [ ] Import the \\`unemployment\\` data and any other useful cells from the [U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2) notebook.\n\n- [ ] Modify how the \\`states\\` group is filled to encode the unemployment rate the exact same way as the [U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2) notebook.\n\n- [ ] Add a color legend the exact same way as the [U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2) notebook.\n\n- [ ] Remove the extra state boundaries that are currently being drawn (that have fill \"none\" and stroke \"white\").\n\n- [ ] Change the zoom interactivity to make the stroke red (instead of the fill) and make sure to raise the current state selected as the zoom focus.\n\n- [ ] Add a title, subtitle, and caption to the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"The resulting visualization should look *exactly* the same as the [U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2) notebook, but now with zoom capability. Below is an example of what the zoom should look like (notice the legend should also zoom):","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"earthquakes1 = FileAttachment(\"unemployment.png\").image({width: 450})","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"When you are done, [import the completed visualization](https://observablehq.com/documentation/notebooks/imports#importing-cells) from your forked notebook (including titles and caption) below:","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"import {chart} from \"e836ed57f083d9f2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"## US Unemployment Rates by State \n\nColor encodes unemployment for that state, data from 2019.","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"Notebook [forked](https://observablehq.com/@d3/zoom-to-bounding-box). Data source: [Bureau of Labor Statistics](https://www.bls.gov/lau/#tables)","pinned":false,"hidden":false,"mode":"md"},{"id":844,"value":"Enter a link to your forked notebook below. Double-check that the forked notebook is **visible to the team**.","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"[Notebook](https://observablehq.com/d/e836ed57f083d9f2)","pinned":false,"hidden":false,"mode":"md"},{"id":846,"value":"Add the necessary citations and attributions below. You can find the data source in the [U.S. state choropleth](https://observablehq.com/@d3/us-state-choropleth/2) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":847,"value":"- The data for this notebook comes from the [Bureau of Labor Statistics](https://www.bls.gov/lau/#tables)\n- This notebook is forked from [Zoom to bounding box](https://observablehq.com/@d3/zoom-to-bounding-box)\n- The chloropleth coloring is from [this notebook](https://observablehq.com/@d3/us-state-choropleth/2)","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"## ${outline.problem4.name}\n\nThe goal of this problem is to explore any other geospatial visualization using either D3.js or Observable Plot.\n\nThe tasks you must complete for this problem are summarized below:\n","pinned":false,"hidden":false,"mode":"md"},{"id":891,"value":"mdPlus`\n- [ ] Browse the [Observable Plot Gallery](https://observablehq.com/@observablehq/plot-gallery) or [D3.js gallery](https://observablehq.com/@d3/gallery) for geospatial visualization examples. You may also reference the [lecture notebooks](https://observablehq.com/collection/@hmc-datavis-fall2025/lectures) too.\n\n- [ ] Choose a notebook to fork. Make sure your forked notebook is **visible to the team**. (You may not choose one of the notebooks already used by this lab.)\n\n- [ ] Choose either to:\n\n 1. Change the dataset to something else (such as switching from Walmart locations to airport locations).\n\n 2. Change the encoding to something else (such as converting a proportional symbol map to a choropleth or visa versa).\n\n 3. Add interactivity (such as adding brushing or a detailed tooltip).\n\n 3. Significantly change several aspects of the design such that it looks distinct from the original.\n\n- [ ] Add a title, subtitle, and caption to the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"When you are done, [import the completed visualization](https://observablehq.com/documentation/notebooks/imports#importing-cells) from your forked notebook (including titles and caption) below:","pinned":false,"hidden":false,"mode":"md"},{"id":906,"value":"[TODO: ADD PROBLEM 4 VISUALIZATION]","pinned":false,"hidden":false,"mode":"md"},{"id":928,"value":"Describe the changes you made to the visualization below:","pinned":false,"hidden":false,"mode":"md"},{"id":930,"value":"[TODO: ADD PROBLEM 4 CHANGES]","pinned":false,"hidden":false,"mode":"md"},{"id":907,"value":"Enter a link to your forked notebook below. Double-check that the forked notebook is **visible to the team**.","pinned":false,"hidden":false,"mode":"md"},{"id":909,"value":"[TODO: ADD PROBLEM 4 NOTEBOOK LINK]","pinned":false,"hidden":false,"mode":"md"},{"id":908,"value":"Add the necessary citations and attributions below. This should always include the original inspiration notebook too!","pinned":false,"hidden":false,"mode":"md"},{"id":910,"value":"[TODO: ADD PROBLEM 4 CITATIONS]","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"## Submission","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"Reminder: The deadline is **${cs181ap.helpers.longDate(lab.due)}**. To submit this assignment:\n\n1. Follow the [lab instructions](https://observablehq.com/@hmc-datavis-fall2025/lab-instructions) for how to prepare this notebook to submit.\n\n2. Copy the following URL to this notebook:\n\n ```${document.baseURI}```\n \n3. Open [this Canvas assignment](${lab.submit}) and paste in the above URL.","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"{\n if (lab.review) {\n return htl.html`

Don't forget! The feedback for this assignment is due on ${cs181ap.helpers.longDate(lab.review)}. Go to your Canvas submission to find your assigned peer reviews. Reach out on Piazza for help if you have any issues with your submission or feedback.

`;\n }\n\n return htl.html`

Reach out on Piazza for help if you have any issues with your submission.

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"## Configuration\n\nThis section includes notebook configuration, such as loading libraries or data sources. You may add to this section, but please do not modify existing cells.","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"import { cs181ap } from \"@hmc-datavis-fall2025/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"import { mdPlus } from \"@tmcw/bonus-markdown-flavor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"lab = cs181ap.assignments.lab7","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"today = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":559,"value":"outline = ({\n problem1: {\n name: 'Problem 1: Non-Proportional Symbol Map',\n task1: 'Task 1.1: TODO',\n task2: 'Task 1.2: TODO'\n },\n problem2: {\n name: 'Problem 2: Proportional Symbol Map',\n task1: 'Task 2.1: TODO',\n task2: 'Task 2.1: TODO'\n },\n problem3: {\n name: 'Problem 3: Choropleth',\n task1: 'Task 3.1: TODO',\n task2: 'Task 3.2: TODO'\n },\n problem4: {\n name: 'Problem 4: Exploration',\n task1: 'Task 4.1: TODO',\n task2: 'Task 4.2: TODO'\n } \n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}