The links below provide an outline of the material for this lesson. Be sure to carefully read through the entire lesson before returning to Canvas to submit your assignments.
Note: You can print the entire lesson by clicking on the "Print" link above.
Welcome to Lesson 9! Last week, we discussed some of the new technologies that have been influential on current trends in cartography, including interactive and animated maps and 3D visualization. While interactive and dynamic maps present a myriad of opportunities for creating new and exciting designs, they also introduce many new challenges. Studies of interactive maps draw from research not only in cartography and psychology but in other cognate fields such as human computer interaction (HCI), human factors, and usability engineering. We will discuss various approaches for studying dynamic maps in this lesson.
Dynamic maps change based on interactions (either active or passive) by the map reader. In such cases, we begin to consider the map reader as, instead, a map user. Additionally, as these maps typically appear alongside other media (e.g., supplemental charts, article text, videos), we also consider these map-adjacent elements and how they influence the user experience. In Lab 9, we put this knowledge to use and design an interactive data visualization story with the data storytelling platform StoryMaps.
Lesson 9 is a two-week effort.For this lesson, you will choose a spatially-related map topic. This topic can be any spatially-related idea and be focused on anywhere in the world. Once the topic is selected, you will need to acquire appropriate datasets. You will be asked to create three (3) interactive maps. The maps should reflect datasets that support and explain the spatial distribution of the topic of your choosing. The map designs should be cast along a common theme and be supportive of the overall topic. Here is a breakdown of what you should aim to accomplish during the two weeks.
In the first week, you should...
In the second week, you should
By the end of this lesson, you should be able to:
Action |
Assignment | Directions |
---|---|---|
To Read |
There are no external required readings for Lesson 9. Instead, you should explore in-depth the links included in this week's lesson content. In particular, please explore the three links to graphic compilations (NYT [1]; Washington Post [2]; Nat Geo [3]) and the Tableau Stories about AirBnb in Portland [4] in the Data Journalism section. Additional (recommended) readings are clearly noted throughout the lesson and can be pursued as your time and interest allow. |
The required reading material is available in the Lesson 9 module. |
To Do |
|
|
If you have questions, please feel free to post them to the Lesson 7 Discussion Forum. While you are there, feel free to post your own responses if you, too, are able to help a classmate.
We often consider how our map readers might interpret or respond to a map we make. Predicting these behaviors and designing our maps to account for them is a complex problem that we have discussed throughout this course. When making maps, we often must choose a suitable projection, symbolize data appropriately, visualize additional elements such as terrain, and so on. We also account for contextual factors: for example, we might expect our map readers to be stressed or working within time constraints. We may also need to design for media-based constraints such as black-and-white newspaper printing, or for challenging viewing scenarios, such as small sizes (e.g., in an academic journal article) or far distances (e.g., in a slideshow presentation).
You might recall the maps in Figure 9.1.1 from Lesson 1 - each was designed with a different type of map reader in mind.
Figure 9.1.1 shows how minor alterations to a static map (here, technically sections of a larger map) can make it more suitable for a given map audience or purpose. Last lesson, we discussed interactive maps— maps that change based on some form of user input. This realm of mapping has turned our focus from the map reader to the map user (Roth et al. 2017). We now must consider not just how our map’s audience will interpret the map we design in a single state, but how they will interpret it as they use it, which is to say, as they alter it. An interactive map must work not only in one state, but ideally at every state that might be reasonably encountered by the map user. This is no small task.
Even basic interactions such as panning around a slippy map can introduce challenges. Figure 9.1.2, for example, shows two locations on an OpenStreetMap basemap, both at a 1:5,000 scale.
These maps are shown at the same scale but appear vastly different—and this makes sense, given that they are very different places. What this example highlights, however, is the variety between locations that pan-able maps must often be designed to cover. Web maps typically cannot be designed separately for each individual area on Earth (imagine the time that would take!) so cartographers use generalization algorithms and design rules to ensure that their maps will work at locations rural and urban, near and far, and at scales both small and large.
Panning (i.e., moving the map to another location) is among the most basic functions performed with interactive maps. Additional functions such as filtering and route-planning introduce further complexities to interactive map design. For insight on how to best support such tasks, cartographers have turned to the study of usability.
Usability is defined by the International Organization for Standardization (ISO 9241-11:2018) as “the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” Designers of websites, mobile apps, and many other technologies consider system usability when building their products. Though it is a subject with a rich history and many facets, Jakob Nielsen’s (1994) usability heuristics [7] provide an excellent foundation for assessing the usability of a system (such as an interactive map).
Figure 9.1.3 demonstrates two of Nielsen's usability heuristics: error prevention, and consistency and standards.
View Nielsen’s usability heuristics online. Open ArcGIS Pro, and search for examples of these heuristics in the interface. You might also try this out with another favorite (or least favorite) software program. Which heuristics are implemented? Which are forgotten?
As suggested by the ISO (2018) definition, an important component of usability, and one that ought to be considered when implementing the usability heuristics is the idea of context of use. For example, a routing app might be designed specifically so that the interface can be safely manipulated (or not) while the user’s vehicle is in motion.
Despite the importance of context in designing usable systems, a significant amount of scientific research related to usability has focused on developing more generalizable findings, such as whether users can identify changes in animated maps (Fish, Goldsberry, and Battersby 2011). When we consider how to assess maps in terms of their usefulness, it is helpful to distinguish between these two primary approaches: traditional, experimental research intended to elucidate generalizable insights, and design studies that focus on context- specific design. Roth and Harrower (2008) describe these sorts of studies as a continuum from controlled experimentation to usability testing. Despite the helpfulness of conceptualizing cartographic evaluation methods as existing along a continuum, we discuss these methods as falling more generally into one of two categories (1) experimental studies, and (2) design studies, for simplicity and brevity.
Roth, Robert E., and Mark Harrower. 2008. “Addressing Map Interface Usability: Learning from the Lakeshore Nature Preserve Interactive Map.” Cartographic Perspectives, no. 60: 46–66. doi:10.14714/ CP60.231.
Roth, Robert E, Arzu Coltekin, Luciene Delazari, Homero Fonseca Filho, Amy Griffin, Andreas Hall, Jari Korpi, et al. 2017. “User Studies in Cartography: Opportunities for Empirical Research on Interactive Maps and Visualizations.” International Journal of Cartography. doi:10.1080/23729333.2017.1288534.
As noted in the previous section, experimental studies seek to identify generalizable findings. These studies draw heavily from work in psychology, a discipline with a rich history of closely-controlled experimental research. Research conducted by Fish, Goldsberry, and Battersby (2011) on change blindness is a helpful example of experimental research in cartography.
Consider the maps in Figure 9.2.1 below – after viewing these animated frames, do you think you would remember which states changed from the first (left) to the second (right) frame?
Fish, Goldsberry, and Battersby (2011) found that not only did their participants often incorrectly identify which locations had changed from previous animation frame, they were consistently overconfident in their reports. A suggestion made by the authors to mitigate this effect was to incorporate tweening, or gradual graphic transitioning between animation frames, into animated map designs. This suggestion is applicable to a wide variety of animated mapping contexts.
Similar studies have been conducted on other aspects of map design. Limpisathian (2017), for example, studied the influence of visual line and color contrast on map reader perceptions of feature hierarchy and aesthetic quality. Unlike Fish et al., who conducted their research with participants in a lab, Limpisathian recruited and tested participants using the crowd-sourcing platform Amazon Mechanical Turk (MTurk). Such platforms have become increasing popular in recent years as—despite their shortcomings— they enable researchers to run large studies with more diverse sets of participants and at lower costs.
Experimental studies often use web surveys, which can measure task (e.g., map data retrieval) accuracy and speed. Some surveys take advantage of new technologies such as eye-tracking, which measures fixations of the human eye. Griffin and Robinson (2015), for example, used eye-tracking to measure the efficiency of color and leader-line approaches when highlighting geovisualizations. Eye-tracking is a popular method for understanding user response to design, and is regularly used by web design practitioners and in marketing research. Figure 9.2.2 shows an example record of eye-tracking from a study performed on the Healthcare.gov website. Similar studies have been conducted with maps and other spatial tools.
Fish, Carolyn, Kirk P. Goldsberry, and Sarah Battersby. 2011. “Change Blindness in Animated Choropleth Maps: An Empirical Study.” Cartography and Geographic Information Science 38 (4): 350–362. doi: 10.1559/15230406384350.
While experimental studies focus on producing generalizable findings (e.g., “people suffer from change blindness when viewing animated maps”), design studies focus on more specific use contexts. The goal of these studies is generally to improve a specific map or mapping product. Testing often begins early in the design stage, with preliminary design sketches and/or paper prototypes (Figure 9.3.1). Paper prototypes are generally preferred to more formalized mock-ups early in the design process, as they cost little to create, leaving designers more willing to change their designs in accordance with suggestions by testers. Research has also found that testers of "sketchy" designs and paper prototypes are more likely to elicit big picture design suggestions than more formalized prototypes (Dykes and Lloyd 2011). This is because test users are more able to focus on the overall functions of a tool when they view it as unfinished—they are not distracted by small design details (Dykes and Lloyd 2011).
As design studies focus on a specific use context, it is important to test with target users (i.e., the intended users of the product) whenever possible. A map designed to be used by utility maintenance workerspolice officers, for example, will likely require input from these users to be made sufficiently useful in that context. A popular mantra in usability research is this: you are not your users. When designing a map intended for use by the general public (e.g., Figure 9.3.2), it might be enough to test your design with a group of college undergrads for course credit, or through a crowdsourcing platform such as Amazon Mechanical Turk. For more specialized contexts, recruiting those target users is necessary.
Roth, Ross, and MacEachren (2015) emphasize this importance of involving target users throughout the map design process. In their work designing an interactive mapping tool to support the needs of the Harrisburg, PA Bureau of Police, they suggest an iterative approach to system design. They outline three U’s of interactive map design: user (i.e., considerations of target users and use-case scenarios), utility (i.e., whether the map performs the tasks that its users require), and usability (i.e., whether the tool’s functions align with usability design principles/heuristics).
Lloyd, David, and Jason Dykes. “Human-Centered Approaches in Geovisualization Design: Investigating Multiple Methods Through a Long-Term Case Study.”
Roth, Robert, Kevin Ross, and Alan MacEachren. 2015. “User-Centered Design for Interactive Maps: A Case Study in Crime Analysis.” ISPRS International Journal of Geo-Information 4 (1): 262–301. doi: 10.3390/ijgi4010262.
When we talk about interactivity in maps, we must consider not just user interactivity within maps, but interactively among maps, as well as with other tools and visual graphics. Interactive mapping has played an important role in the field of visual analytics, defined as “the science of analytical reasoning facilitated by interactive visual interfaces” (Thomas and Cook 2005).
Recall the Cartography Cube from Lesson 1 (review this concept in the Communicating with Maps [13] section). Most of the maps we have designed thus far would be considered to be in the communication (public, static, and intended to present known information) corner of the cube. Visual analytic tools typically belong in the opposite corner—these tools are characterized by high human-map interaction and are often designed with private data or data that is otherwise meant for domain experts. They also focus on revealing unknowns (i.e., generating insights), rather than communicating known trends.
One domain in which visual analytics has been particularly popular is in public health and epidemiology. An example tool is shown below (Figure 9.4.2). The Pennsylvania Cancer Atlas is an interactive tool designed at the GeoVISTA Center at Penn State, with assistance from the Centers for Disease Control (CDC) (Bhowmick et al. 2008). The atlas includes a choropleth county-level map of Pennsylvania, coordinated charts and tables, and filtering and selection options to compare data across the views. In the view shown below, for example, Bedford County has been selected on the map by the user, and the scatterplot and table have been highlighted to focus on that county as well. This connecting of multiple visual depictions of data is called coordinated views.
A more recent example is FluView, a visual analytic dashboard designed by the CDC for analyzing data related to incidence of the flu in the United States. FluView is shown in Figure 9.4.3 below—you can try it out by selecting the link here: FluView [16].
A demo of a more complex geovisualization built around visual storytelling, Detecting Disease Spread from Microblogs, is shown in the video in Figure 9.4.4. below:
Though health and public safety applications are popular uses for (geo)visual analytic tools, they have been used in many domains. Figure 9.4.5 below shows the geovisualization tool MapSieve, designed for analyzing spatial patterns of student engagement in online courses taken by students all over the world.
While the tools above focus on fairly complex data that often require domain knowledge for effective interpretation, similar visualization tools are also often used in more fun, less serious contexts that are more geared towards a general audience. Figure 9.4.6, for example, shows a Tableau (data visualization software) dashboard that visualizes AirBnb data in Portland, Oregon. We will take a closer look at dashboards like this later in this lesson.
Similar interactive tools are often designed for mapping election results or other data of public interest. Graphics are often accompanied by a significant amount of text, both within the main view as explanatory text, or adjacent, to tell a story supported by the data. We discuss this more in the next section: Data Journalism.
Bhowmick, Tanuka, Anthony C Robinson, Adrienne Gruver, Alan M MacEachren, and Eugene J Lengerich. 2008. “Distributed Usability Evaluation of the Pennsylvania Cancer Atlas.” International Journal of Health Geographics, no. February 2015. doi:10.1186/1476-072X-7-36.
As demonstrated by the Portland AirBnb example, interactive maps designed for public consumption often do not stand alone. Except in the case of very simple data visualizations, these maps and graphics tend to be accompanied by additional text, both within the visualization interface and outside. Such maps are often included—in either static or interactive form—in the type of articles and other media described as data journalism.
Data journalism is a general term that refers to the increasing influence of numerical data in news reporting; data are often reported and/or visualized alongside articles and reports disseminated to the public. Though data journalism does not necessarily have to include visual depictions of data, it often does, —and for good reason. Visual graphics tend to captivate readers, and charts, maps, and graphics are can be much better at communicating data at a glance than data tables and spreadsheets alone. The article in Figure 9.5.1 is an example of this. The article includes a large map, as well as a set of small multiple maps, to visualize the geographic distribution of ammonia. Article text gives the reader additional information about the ammonia gas.
Journal outlets such as the NY Times, Washington Post, and National Geographic are among those creating high-quality graphics and accompanying article content. Visit the links below to see examples:
As demonstrated by the links above, media outlets frequently report on important and emotionally-engaging information. Journalists take on the challenging job of reporting this information to the public. Often, pairing interactive maps and graphics with carefully curated text is the most effective way to do so.
Think back to MacEachren’s Cartography Cube. Where would you place the maps/graphics included in the articles referenced in the links above?
Given recent trends, including as the proliferation of interactive maps and visual analytics, cartographers have begun to focus more on maintaining a balance of text, graphics, and other elements in their work. Think back to our discussion in Lesson 2 of frame lines and neat lines for map layouts—such simple guidelines seem almost irrelevant in the context of data journalism and interactive map making. While cartographers still face traditional design constraints when creating maps for print (e.g., magazine spreads, print advertisements), they must now also work with more complex design formats such as infinite scrolling web pages and interactive dashboards.
In previous lessons, we discussed the importance of design thinking that reaches beyond the map—configuring page layouts and explanatory text in a neat, usable, aesthetically-pleasing fashion. Given our current focus on the map user, note that ideally this design thinking ought to be implemented at all stages of map interaction. For example, see Figure 9.5.2. Shown in this view is the map “on-hover,” which means that the user has hovered their cursor over the point that is highlighted. The tooltip which appears (Figure 9.5.3) must present an amount of information that is adequate but not overwhelming for map users. It could be argued that this is not successfully accomplished here—the coordinate location is likely unnecessary information, and the addition of a short description of the property would assist the map user.
The “visual information-seeking mantra”, first proposed by computer scientist Ben Shneiderman, is frequently referenced by information designers: “Overview first, zoom and filter, and details-on-demand” (Shneiderman 1996). We will use the Portland Airbnb Tableau dashboard to explore this mantra in practice. First, in Figure 9.5.4, the starting view of the dashboard, which shows all of the listings in Portland: overview first.
From the starting view, the user can zoom in and/or pan around the map, and filter the map data by selecting a category of interest. The tool state in Figure 9.5.5 shows the view after the user has zoomed into the map, and selected the "private room," room type. This data could be further filtered by by selecting a property type, such as "hotel-like property." This is the second stage of the mantra: zoom and filter.
Figure 9.5.6 shows the view in 9.5.5 upon mouse hover of this hotel-like property near the river. ID numbers for the host and listing, as well as lat/long coordinates, are given in the tooltip. This is the final element of Shneiderman's mantra: details-on-demand.
Play around with this Tableau Story, Airbnb Data in Portland [24] —in addition to helping you understand the concepts presented in this lesson, it may give you ideas as you work on Lab 9.
Small snippets of text such as tooltips, titles, weblinks, and error messages associated with your maps will often be designed by you, the cartographer. Such text is often called microcontent, and despite its minimal nature can have a large impact on user interpretation of your visualizations. The Nielsen Norman Group provides a helpful reference on how to write such content here: Microcontent: A Few Small Words Have a Mega Impact on Business [25]. Their site is also an informative reference for many aspects of usability and user experience design.
Shneiderman, B. 1996. “The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations.” Proceedings 1996 IEEE Symposium on Visual Languages, 336–343. doi:10.1109/VL.1996.545307.
The visual analytic tools we have have explored thus far include both maps and graphs, and these different data visualization elements have been connected via coordinated views, permitting user filtering, zooming, and more. Given the limited space available in these dashboards—particularly if they are intended for viewing on small, mobile screens—an important question surfaces: do I need a map at all?
When designing data visualizations, maps often provide an invaluable source for insight generation. However, they are not necessarily always the best choice for your data—even if the data contain spatial information.
View the dashboard below in Figure 9.6.1.
This dashboard does not contain a map, and though it’s possible that adding one might provide additional information or interest, its current form gets across the core message: drug overdoses are increasing in Philadelphia, and this is being driven by opioids in general, and fentanyl in particular.
Given the increasing ubiquity of GPS and other location-based technologies, data that contains a geographic component (e.g., state, county, coordinates) is fairly easy to come by. Still, this does not mean that creating a map is always the answer. Imagine, for example, if you had collected data on the rate of Alzheimer's disease by state. Were you to map this data, popular retirement states such as Florida and Arizona would likely jump out—not because there is anything inherently unhealthy about those locations, but because their populations are significantly older. To eliminate the effect of this confounding variable, you could map age-adjusted Alzheimer's rates instead. It's important to consider, however, whether this would be the most informative way to visualize your data. If you were you simply hoping to educate people about Alzheimer's, a graph or chart comparing Alzheimer's rates by gender, age, race, or socioeconomic status might serve your purposes just as well.
Conversely, there are many data visualizations that unfortunately treat space (i.e., geography) as just another variable. For an example, view the dashboard in Figure 9.6.2 below. The designer of this dashboard chose to visualize states as list of values, rather than to create a map. Though this is not inherently incorrect, it is a missed opportunity to provide the user with an at-a-glance understanding of spatial patterns in occupational data. Sure, the user could still pick out individual data values, or compare average annual earnings state-to- state. But data visualization (cartography included) is about making complex data clear; —if your visualization is no more useful than its source data table, then why design it at all?
Critique #5 will be your fourth critique involving a peer review of a map created by someone in this class. In this activity, you will be assigned a colleague's map from this class to critique from Lab 8: Multiscale Web Mapping.
Your peer review assignment includes writing up a 300+ word critique of one of your colleague’s Lesson 8 Lab.
In your written critique please describe:
According to the two prompts above, a map critique is not just about finding problems, but about reflecting on a map in an overall context. Your critique should focus on the map design that works well as much as it does on suggestions for design improvements. In your discussion, you should connect your ideas back to what we learned in the previous lessons.
Remember, your critique should be as much about reflecting upon design ideas well-done as it is about suggesting improvements to the design. In your discussion, connect your ideas to concepts from previous lessons where relevant.
You may find these two resources helpful as you write your critiques:
A rubric is posted for your review.
You will work on Critique #5 during Lesson 9 and submit it at the end of Lesson 9.
When a peer review has been assigned, you will see a notification appear in your Canvas Dashboard To Do sidebar or Activity Stream. Upon notification of the Peer Review (Critique), go to Lesson 8: Lab 8 Assignment. You will see your assignment to peer review one other colleague. (Note: You will be notified that you have a peer review in the Recent Activity Stream and the To-Do list. Once peer reviews are assigned, you will also be notified via email.)
Download/view your colleagues's completed map.
In order to complete the Peer Review/Critique, you must
- Add the PDF as an attachement in the comment sidebar in the assignment.
- Include a comment such as "here is my critique" in the comment area.
- PLEASE DO NOT complete the lesson rubric as your review, award points, or grade the map you are critiquing. Even though Canvas asks you to complete the rubric, PLEASE DO NOT COMPLETE THE RUBRIC OR ASSIGN POINTS/GRADE.
When you're finished, click the Save Comment button. Canvas may not instantly show that your PDF was uploaded. You may need to exit from the course, leave the page, refresh your browser, or some combination thereof to see that you've completed the required steps for the peer review. If in doubt, you can send a message to the instructor for them to check an confirm that your PDF was successfully uploaded.
Note: Again, you will not submit anything for a letter grade or provide comments in the lesson rubric.
Your final lab assignment in this course is to design an interactive story about a chosen dataset using ArcGIS StoryMaps. While this lab draws heavily on concepts discussed in Lesson 9, you will be incorporating knowledge from throughout the course in your design.
NOTE: Unlike other labs, Lab 9 is a two-week assignment and 20 points. The Lesson 9 deliverables are split into two parts.
In Week One, you should develop an idea and gather data for your lab, and complete the cartographic design process in ArcGIS Online (AGOL). Although, the AGOL maps will not be independently graded but will be included in the Week Two deliverable.
In Week two, you will incoporate the maps you created in AGOL into a StoryMaps narrative that tells a story about your specific spatially-related idea.
Further instructions are available in Lesson 9 Lab Visual Guide.
Lesson 9 Lab Visual Guide
To begin, open the Canada_COVID_19_022622.csv [40] Excel file. This file has multiple fields (columns) of data for each province in Canada. It was created by selecting a group of records from a CSV file downloaded from the Public Health Agency of Canada (PHAC), and contains data related to the number of COVID-19 cases and deaths for Canadian provinces as of February 26, 2022. Take note of the column header names. The column highlighted in green box in Figure 9.1 is named “prname” which stands for province name. ArcGIS Online needs to know the geography to locate your data on a map. For example, if you are mapping individual states of the United States, then you would need a column titled, for example, “states” that contains rows listing the different state names.
The most important component of this Excel sheet is the prname column– AGOL will automatically recognize and map several geographies, such as States, Countries, Zipcodes, and Coordinates (lat/long). You may choose to map another geography (e.g., counties, census tracts, block groups) for your own data, but using one of these other geographies will not be covered here.
Log in to AGOL using your PSU ID, then click Content on the navigation bar at the top of your screen. The Content environment appears. You will create an empty folder that will be used to organize all data and maps related to your StoryMaps project. To create a new folder, look in the upper left-hand corner of the Content environment. There is a Folders heading. Click on the small + folder icon to the right of the heading to create a new folder. Title this folder “GEOG486_StoryMap”.
Now that you have a place to store your data, click on the Map button on the navigation bar up top. You should be taken to a screen that looks fairly similar to the Vector Tile Style Editor (VTSE) interface, but with only one map and different tools (shown below in Figure 9.3). This environment is called the Map Viewer (although you can use it to do a whole lot more than just view maps). Click on the + Add button on the left of your screen, then select Add layer from file and select your downloaded CSV.
Add it as a hosted feature layer (don’t worry about what this means for now), then on the next screen, make sure that all the fields are selected. After you confirm the fields that you want to include (all of them), change the Location Settings to Addresses or place names. AGOL can automatically extract location data from tables, but we need to specify which part of the world we’re concerned with or else we’ll have a map showing the cities of Yukon, Oklahoma and Ontario, California. So, open Advanced location settings and change the Region to Canada. Under that, select Location information is in one field. Set the Address or Place field “prname” (Figure 9.2).
When you have successfully added the layer to the map, you’ll notice that your data is represented as a red dot at the center of each province (Figure 9.3).
Even though the data in our spreadsheet can potentially be represented as areas (i.e. as a choropleth map), we don’t currently have the correct data for us to map the provinces as areas. So for now, we will explore how to map the data as point symbols representing each province.
More specifically, we’ll be mapping the provinces using proportional circles. The following series of steps outlines this selection process. Along the right-hand side of the Map Viewer is a series of icons. The topmost icon is the Properties option that will allow you to alter the map properties. Click the Properties button if the panel isn’t open already. The Properties panel appears. Under the Symbology header, choose the Edit layer style option. Begin by choosing an attribute from the .csv spreadsheet to map. Under the Choose attributes header, click on the + Field button and select the “totalcases” attribute that contains the total number of Covid-19 cases by province. By now, you should understand why proportional symbolization rather than choropleth symbolization is appropriate to map total count data. To complete this step, select the Add button at the bottom (Figure 9.4).
Under the Pick a style header, select the Counts and Amounts (size) option. This option proportionally associates each province’s data value with a differently sized circle. Larger circles imply greater data values.
There are other symbol options that you can explore under the Style options button– feel free to explore them, but come back to Counts and Amounts (size) eventually. Click on Style options and experiment with the various options for changing the appearance of the symbols (Figure 9.5).
You’ve made some good progress at this point, so you should save your work. To save your map, click on the Save and open icon found along the left-hand listing of tool in the Map Viewer. On the options that appear, choose the Save As option. Make sure to give your map an informative title. Optionally, add some tags that will help others find your map, and give a short summary of the map. Make sure that you select the save location as your 486-StoryMap folder. Then, choose the Save button.
Figure 9.6 shows the final Canada COVID-19 map showing the total number of COVID-19 cases by province ending February 26, 2022. Note that there are several design changes I have made to the map. Try to replicate these changes on your own using the options found in the Properties panel, as well as other locations. The changes are as follows:
In the previous section, even though you worked with area-based data (data assigned to a province), the map displayed proportional circles centered over each province. A CSV doees not store the geometry of the dataset’s features (i.e. lines or polygons), so if you want to show your data as a line- or area-based symbol, you need to upload an additional file that includes the geography. Here, we will be using shapefiles.
Download the “Canada_Provinces.zip [41].” This zipped file contains the shapefile of the Canadian provincial boundaries that you’ll be using in this example. Return to the map that you made earlier and hide the proportional symbol layer by clicking the eye icon in the Layers pane (NOTE! it is important that you keep all your layers in the same map so that you’ll save time in a much later section of this tutorial). Add the .zip file the same way that you added the CSV earlier (you’ll probably want to include your initials at the end of the file name). Once you add the layer, it might take a few minutes to process, but you should eventually see the province polygons appear on your map (Figure 9.7).
Now, because we need to combine the shapefile and the CSV into a single file, we will perform what is known as a join operation. This process combines files that share at least one identical value in their attribute tables. Luckily, we have exactly what we need in the datasets you’ve added to the map so far (this isn’t always the case in real-world scenarios). Open the attribute table of the COVID case dataset by clicking on the context menu (the ellipsis) in the Layers panel, then click Show table. Note the values that you see in the “prname” field. Now, open the attribute table for your newly-added polygon layer and find the “name” field (Figure 9.8). These fields in each layer share identical values, so AGOL will match each the row containing “Alberta” in the CSV with the row containing “Alberta” in the shapefile. In this way, our COVID data will be matched with the correct polygon feature.
This next part has to happen precisely as described here:
Once you have completed setting all the options, choose the RUN button at the bottom. To complete the join, you may have to wait a few minutes for ArcGIS Online to process all the data.
Once the join process has completed, you can choose to map one of the COVID-19 attributes. To map your COVID-19 data, look in the Styles option (icon listing along the right-hand side of the map environment). In my case, I chose to map the “ratedeaths” attribute and displaying that variable as a series of blues where light blue represents high COVID-19 death rates and dark blue represents low COVID-19 death rates (Figure 9.10).
Now is a good time to save your work!
While we have a map that looks pretty good on its own, we should keep in mind that this is an interactive map, so users will be clicking on features. Go ahead and click on a province, and a window should appear that looks like the one in Figure 9.11.
There is a lot of information being presented here, and almost all of it is either confusing or not useful for most users. Fortunately, we can change what is displayed in these windows. For this next part, keep the pop-up window open.
Start by clicking the Pop-ups button on the right side of your screen. Double check that you have pop-ups enabled, and that you’re editing pop-ups for the correct layer (your join layer). You should see a section titled Fields list. This is one of two content fields in your pop-up window (the other one is Title which we’ll get to in a minute). Note that it says “76/76 fields”. This means that each pop-up window is displaying all 76 attribute fields in your layer’s attribute table. This is not terribly useful, so click on Fields list, and in the resulting section click Select fields. Now, we don’t want to manually deselect all 76 layers, so the fastest way to do this is by clicking Select all, then Deselect all. All the fields in the open pop-up should disappear.
A pop-up with no information isn’t terribly useful either, so let’s add some fields back. The name of the selected province might be helpful, so select the field “name” as well as “name_fr” so that the French spelling of the province name is included as well. Another good field to include for propriety would be “date”. Next, all “totalcases”, “ratecases_total”, “numdeaths” and “ratedeaths”. Your pop-up should now look like Figure 9.13. When finished, click Done.
The amount of information being displayed is now much more reasonable, but the formatting is not terribly appealing. “ratecases_total”, for example, would be much better displayed as “Case rate per 100,000”. We have two options to address this.
The first option is to edit the display name of the field itself. To do so, click the Fields button on the right, then locate the field whose display name you wish to change. Let’s start with “totalcases”. Click it, and edit the name in the Manage field pane that appears (Figure 9.14). Change it to “Total cases”. Then, change “ratecases_total” to “Case rate per 100,000”. While we’re at it, change Significant digits to 0 Decimal places to further simplify our pop-up (Figure 9.14). Finally, change “date” to “Date”, change the Date format to include the name of the month (e.g. February 25, 2022), and un-toggle Show time, as that information isn’t meaningful for our purposes. The advantages of changing field names via the Fields panel are that the field name will display consistently across various locations, and that you can use the field table layout currently in your pop-up window.
The second option is to use an expression. I think that the names of provinces are better represented as standalone items rather than in a table with other items, so return to the Pop-ups pane, click on Fields again, and click the x next to “name” and “name_fr”. Next, close the Fields list, and click + Add content underneath. Choose Text. In the editor that appears, type “Province name / Nom de la province:”. Then hold Shift on your keyboard and press Enter/Return. With your cursor directly uderneath the first line of text, click on the { } button, and choose “name”. Then type “ / “, then “name_fr”/ (Figure 9.15). (I also did some additional text formatting– see if you can replicate it on your own). Click OK.
Repeat this process using “name_fr” and preceding it with “Nom de la province: “. Click on the 6 dots next to the “name” Text content, and drag it to the top, so that it’s underneath Title. Drag the “name_fr” Text under “name”. Finally, click on the Title component, delete the existing text, and replace it with “COVID-19 Data by Province” (Figure 9.16).
Sharing your maps will allow you to show your work to others, but more importantly for this lab, it will allow you to embed them into your StoryMaps. To share your maps that you created, select the Share map icon along the left-edge of the Map Viewer. The Share icon brings up the Share window (Figure 9.17) that allows you to specify how the map is shared. Presently, only share with this Organization (Penn State University).
When you click Save, you’ll probably see a window with a message that says “The shared item(s) reference other items that may not be visible…” While you changed the sharing permissions of your map, you still need to change the permissions for your data. Click Review sharing, then in the next window, click Update sharing to synchronize the sharing permissions for all of your layers. You can change their sharing status later via the Content section of the website.
You now have the basic skills to work in AGOL. Feel free to explore the additional style options, try uploading different data types, and run some additional analyses. AGOL is great for sharing data and making interactive maps, but it does have significant limitations when it comes to data management, symbolization, and analysis. So sometimes it makes more sense to create or edit data in ArcGIS Pro, then upload that data to ArcGIS Online for visualization and sharing– keep that in mind if you encounter a roadblock.
Remember that your StoryMap needs to include a minimum of 3 maps.
Once you feel comfortable with the Map Viewer interface, it’s time to move on to StoryMaps. Either on the AGOL homepage or in the Map Viewer, you’ll see a 3 x 3 matrix of dots in the upper-right corner of your screen. This opens the App Launcher. Click on ArcGIS StoryMaps. On the StoryMaps homepage, click on the green Create story button on the right, and select Start from scratch. This will open the Story Builder interface (Figure 9.18). You are now ready to start telling your story.
Every element of a StoryMaps can be custom designed with typefaces, colors, background textures, etc. To access the design palette for any StoryMaps element, click on the Design button along the menu ribbon at the top of the StoryMaps environment. You have a few options here– let’s change the Cover to Top and the Theme to Slate. When you’re done, click the X at the top of the pane.
To add additional elements (called story blocks) to your StoryMap, scroll down and either click on Tell your story… to add text, or click the + button next to it in order to add a block. Choose the Map block (Figure 9.19).
You’ll be taken to a screen where you should see the Canada COVID map(s) that you made earlier. Choose the map that you want to insert into the story, then in the next screen (Figure 9.20), make any necessary adjustments regarding layer visibility and map functionality. If you notice some additional changes that you’d like to make, such as including an additional layer, changing layer draw order, or changing a layer’s symbolization, then you can click the Edit in ArcGIS button at the bottom-left of the screen. For now, hide all but one of the layers by clicking the eye icon next to their titles. If everything looks good, click Save.
The process for adding and editing additional blocks is fairly similar and straightforward. Definitely experiment with various different blocks and layout options, and take a look at tutorials to learn about more features. Of particular note is the Sidecar block. This allows you to have text and media scroll over a map, or other media. This is a very common feature in StoryMaps, as well as other data journalism features, sometimes called “scrollytelling”.
Making your sidecar block transition between information seamlessly is pretty easy. To start, add a sidecar block to your StoryMap. I chose the Floating layout, but it doesn’t really matter for this. Near the top of the new sidecar block, click + Add, and choose Map. Select your Canada COVID map from earlier. You’ll see the same interface that you used to add a normal map a minute ago. As before, hide (the eye icon) all but the choropleth layer. Adjust the positioning of your data appropriately, then click Save. Now, at the bottom of the sidecar interface, click on the ellipsis button at the bottom-right of the first slide (which is at the bottom-left of the interface). Select Duplicate. You’ll get a second map slide with the exact same data and layout at the first slide. On this second slide, click Edit (pencil icon) at the top of the map. Now, hide the layer that you used in the first slide, and un-hide your proportional symbol layer. Click Save.
Back in the Sidecar interface, click on the first slide and add some helpful text by clicking on Continue your story… Add some contextual information to the text box on the left. Then click on the second slide and do the same. Now when you preview your map, scrolling down the page should result in a seamless transition between the two data views, with the text cards moving past on the left.
This is the basic process of working with sidecars, but you have a number of ways to mix up how your data is presented, like adding images, video, focusing on different areas of your maps, filtering the data of different layers and so on.
Note the attribution footer at the bottom of the interface— you may want to use it in your project. Also, periodically check how your work looks by clicking the Preview button at the top of the screen. This will allow you to see how your layout looks to the people that you’ll share it with.
Once you have completed your StoryMap design and are ready to submit it, you will need to Publish it. To publish your StoryMap, click Publish > at the top of the screen. Change “Who can see this…” to Organization, and if you’d like, edit the Story details accordingly, but this isn’t necessary for the assignment.
Congrats, you've made it to the end of the course! In this lesson, we discussed how the recent re-visioning of the map; reader as a map user has changed the cartographic design process, as well as how we evaluate maps. We discussed many elements that may be integrated with maps, such as graphs, charts, and explanatory text, and explored the different mediums (e.g., interactive dashboards, data journalism) in which these elements are combined.
At the end of the lesson, we discussed when not to map, encouraging a practical approach to data visualization that views maps as a valuable tool but not a panacea. Relatedly, we note that much of cartographic design theory is widely applicable, and can be applied when designing other data visualizations or writing graphic-adjacent text—from microcontent to full articles.
In Lab 9, we designed an interactive map-based story using the visual analytics platform ArcGIS Online and StoryMaps. Though this lab focused heavily on concepts from Lessons 8 and 9, we also drew from concepts throughout the course—refining layouts, symbolizing data, color choices, and thinking critically about map audience and purpose. Your StoryMaps' narrative is now available on the web for you to share with others as demonstration of your skills in map design and data visualization. You're now ready and able to create, analyze, critique, and share high-quality maps!
You have reached the end of Lesson 9! Double-check the to-do list on the Lesson 9 Overview page [42] to make sure you have completed all of the activities listed there. After that, you'll have finished the course!
Links
[1] http://www.nytimes.com/interactive/2018/us/2018-year-in-graphics.html
[2] http://www.washingtonpost.com/graphics/2018/ns/best-graphics/?noredirect=on&utm_term=.2311ffb20fa2
[3] http://www.nationalgeographic.com/2018/12/most-memorable-maps-and-graphics-of-2018/
[4] https://www.portlandoregon.gov/auditservices/article/692191
[5] https://www.beavertonoregon.gov/2311/Utility-Maps
[6] https://creativecommons.org/licenses/by-sa/2.0/
[7] http://www.nngroup.com/articles/ten-usability-heuristics/
[8] https://creativecommons.org/licenses/by-nc-sa/4.0/
[9] https://blogs.cdc.gov/yourhealthyourenvironment/2018/03/19/tracking-network-data-spotlight-poisonings/
[10] https://usabilitygeek.com/what-is-eye-tracking-when-to-use-it/
[11] https://www.nngroup.com/articles/paper-prototyping-cutout-kit/
[12] https://firms.modaps.eosdis.nasa.gov/usfs/map
[13] https://www.e-education.psu.edu/geog486/node/4
[14] https://www.researchgate.net/figure/The-Pennsylvania-Cancer-Atlas-viewable-on-the-web-at_fig1_5231133
[15] https://creativecommons.org/licenses/by/2.0/
[16] https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html
[17] https://vimeo.com/30781990
[18] https://vimeo.com/jsndyks
[19] https://vimeo.com
[20] https://earthobservatory.nasa.gov/images/144351/the-seasonal-rhythms-of-ammonia
[21] https://www.washingtonpost.com/graphics/2018/ns/best-graphics/
[22] https://www.nytimes.com/interactive/2018/us/2018-year-in-graphics.html
[23] https://www.nationalgeographic.com/2018/12/most-memorable-maps-and-graphics-of-2018/
[24] https://www.portlandoregon.gov/auditservices/article/692191#mapoflistings
[25] https://www.nngroup.com/articles/microcontent-how-to-write- headlines-page-titles-and-subject-lines/
[26] https://www.phila.gov/programs/combating-the-opioid-epidemic/reports-and-data/opioid-misuse-and-overdose-data/
[27] https://oklahoma.gov/workforce.html
[28] https://somethingaboutmaps.wordpress.com/2021/02/02/critique-with-empathy/
[29] https://proceedings.esri.com/library/userconf/proc13/papers/1015_20.pdf
[30] https://community.canvaslms.com/docs/DOC-10550-4212103951
[31] https://community.canvaslms.com/docs/DOC-10651-421254363
[32] https://storymaps.arcgis.com/stories/033b34f9c6224f56b9369c06562929a1
[33] https://storymaps.arcgis.com/stories/1d0c560049374198baf467162d26c692
[34] https://storymaps.arcgis.com/stories/ae59e303c15a463cb199a842df9694f7
[35] https://learn.arcgis.com/en/projects/get-started-with-arcgis-online/
[36] https://www.esri.com/en-us/arcgis/products/arcgis-online/features/make-maps
[37] https://learn.arcgis.com/en/projects/share-the-story-of-an-expedition/
[38] https://www.esri.com/en-us/arcgis/products/arcgis-storymaps/overview
[39] https://www.esri.com/en-us/arcgis/products/arcgis-storymaps/resources
[40] https://pennstateoffice365.sharepoint.com/:x:/r/sites/GEOG486FIles/Shared%20Documents/GEOG%20486%20Lab%20Downloads/Canada_COVID_19_022622.csv?d=w91b942ef1bb34cb98a29c0273436f3cf&csf=1&web=1&e=CkAdBa
[41] https://pennstate.maps.arcgis.com/home/item.html?id=6d866e01ea4b42c083b1c6a242f0f4b6
[42] https://www.e-education.psu.edu/geog486/node/922