Create a custom application to analyze cancer center catchment areas

In 1971, through the National Cancer Act, the National Cancer Institute (NCI) Cancer Centers Program was created. This program recognizes and funds leading cancer centers performing state-of-the-art research that deliver cutting-edge treatments to the patients in their service areas, commonly called cancer center catchment areas.

In this tutorial, you will learn how to create a map that visualizes the coverage of National Cancer Institute cancer center catchment areas across the United States, including their designated cancer centers and then further analyze the demographic composition of each catchment area to learn more about the population being served. In the context of health care, catchment areas are the geographic regions where patients are referred to a specific health-care facility or service. This allows for strategic planning and resource allocation for the cancer center facilities to ensure they are serving their patients effectively. Cancer center catchment areas are self-defined geographic areas that each NCI-Designated Cancer Center serves or intends to serve in the research it conducts, communities it engages, and the outreach it performs.

This tutorial was last tested on October 25, 2024.

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role (see options for software access)
• GeoEnrichment privilege
• Network Analysis privilege

Create a map of cancer catchment areas

The United States currently has 72 NCI-designated cancer centers in 36 states and the District of Columbia. Most, but not all, are affiliated with university medical centers.

To understand cancer center catchment area coverage and access, you will first explore existing NCI-designated cancer center locations across the United States and then download their associated catchment area polygons. From this data, you will create a web map. Visualizing cancer center catchment area coverage on a map is the first step in understanding the populations served by cancer centers.

After you've built the map, you will create a web app to allow you and your colleagues to view infographics detailing key information about the populations served by each cancer center.

Download catchment area data

First, you will download catchment area polygons from the NCI website to create a map of cancer centers and their respective catchment areas.

1. In a browser, go to the NCI Catchment Areas page.
2. Scroll about halfway down the page until you reach the section titled Datasets.
3. Click the Catchment Area Shapefile link to download a .zip archive of the data.

   

   The NCI_Catchment_Areas_fall2023.zip file is downloaded to your computer.

   Make a note of the location where the file is downloaded.

You've downloaded some of the data you'll need for your map.

Create a map

Next, you'll start a new map with cancer center information.

1. Go to ArcGIS Online and click Sign In.
2. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

3. Click Map.

   

   A new map opens.

   You will first add the Cancer Center address points to your map to visualize their locations across the United States. This data is already in ArcGIS Online and is ready to be added directly to the map.

4. In the Layers pane, click the Add button.

   

5. Click the My content drop-down list and click ArcGIS Online.

   

6. In the search box, type NCI center addresses.
7. Look for the NCI_Center_Addresses layer owned by Esri Tutorials, click the layer, and click the Add button.

   

   The cancer center point features are added to the map.

   

   They are symbolized by type, with the categories and symbols listed in the Properties pane for the layer, in the Symbology section.

   

   While this is useful data, it does not show the geographic areas covered by each cancer center. To visualize this, you will add the cancer center catchment area data you downloaded from the NCI website.

Create a new layer of catchment areas

Next, you'll create a new layer showing the cancer center catchment areas, using the .zip file you downloaded from the NCI site.

1. On the Contents toolbar, click Add and click Add layer from file.

   

   The Add Layer pane appears.

   

   The Add Layer pane allows you to drag files to upload them to ArcGIS Online.

2. Go to the folder on your computer where the NCI_Catchment_Areas_fall2023.zip file was downloaded. Click and drag the .zip file to the file upload pane.

   

   The Add Layer pane detects that the uploaded .zip file contains shapefile data.

   

   Next, you'll add a title and some metadata to help identify the new layer.

3. Click Next.
4. For Title, type Cancer Center Catchment Areas_ and add your initials.

   

5. For Tags, type the following tags and press the Tab key after each tag.

   • Health
   • Cancer Center Catchment Areas
   • Healthcare services

6. For Summary, type This layer represents Cancer Center Catchment Areas for Fall 2023 as per the National Cancer Institute.

   

7. Click Create and add to map.

   

   The layer is created and added to your map.

Change the layer order and basemap

You now have a web map with the cancer centers and their associated catchment areas. This map shows where cancer centers are physically situated and their geographic service areas. The cancer centers are responsible for providing cancer care services to the populations living in their catchment area. You will update the map to focus on the catchment areas.

1. In the Add layer pane, click the back button.

   

   The Contents pane appears, showing the layers you've added to the map.

2. In the Contents pane, click the grab handle for the NCI_Center_Addresses layer and drag it above the Cancer_Center_Catchment Areas_YOUR INITIALS layer.

   

   

   The points layer will now draw above the polygons layer.

   

   Now the cancer centers are more easily seen in relation to the cancer center catchment areas. However, the hosted feature layer of the cancer center catchment area polygons is symbolized with a default color, and the map has a default basemap. Since you plan to share your final app, you want to change these defaults to remove distracting information and better visualize the important data, starting with the basemap.

3. On the Contents toolbar, click the Basemap button.

   

   The map is currently using the Topographic Basemap option. ArcGIS Online basemaps are part of ArcGIS Living Atlas of the World, a collection of authoritative maps and data from Esri and thousands of other organizations. Since the cancer center catchment areas are the focus of your map, you will change the basemap to one that provides a simpler, more neutral background, allowing your data to stand out more.

4. Scroll down the Basemap list and click the Light Gray Canvas basemap.

   

   The map updates to show the cancer center data on the new basemap.

   

   This change focuses attention on the feature data rather than the basemap.

Change the layer symbol

Next, you will change the color of the cancer center catchment area polygons.

1. On the Contents toolbar, click the Layers button.

   

2. Click the Cancer_Center_Catchment Areas_YOUR INITIALS layer.

   

3. On the Settings toolbar on the right side of the map, click the Styles button.

   

4. In the Styles pane, in the Pick a style section, click Style options.

   

5. In the Styles pane, in the Location (Single symbol) section, click the edit button next to the Symbol style patch.

   

   The Symbol style pane appears.

   You will edit the fill and border colors for the catchment area polygons.

6. In the Symbol style pane, click the edit button next to the Fill color patch.

   

7. OIn the Select color pane, in the color number box, type 067ac6.

   

   The number 067ac6 is a hexadecimal (hex) code number for a specific shade of blue. Entering a hex code is a shortcut for specifying a color, if you know the code for the color you want. You can also choose your own color by specifying Red Green Blue (RGB) or Hue Saturation Value (HSV) values, or by clicking the interactive color picker widgets.

8. Click Done.
9. In the Symbol style pane, click the edit button next to the Outline color patch.

   

10. In the Select color pane, in the color number box, type FFFFFF and click Done.

    

    The hex code FFFFFF is white.

11. Close the Symbol style pane and click Done on the Styles pane.
12. Close the Styles pane.

    You have improved to cartography to better illustrate cancer centers and their cancer center catchment area coverage.

    Next, you'll save the map so it can be used in an interactive app.

13. On the Contents toolbar, click Save and open and click Save as.

    

14. In the Save map pane, for Title, type Cancer Center Catchment Areas Map and add your initials.

    

15. For Tags, type the following tags and press the Tab key after each tag.

    • Health
    • Cancer Center Catchment Areas
    • Healthcare services

16. For Summary, type This map displays NCI-designated cancer centers and their associated catchment areas.

    

17. Click Save.

    Next, you'll create an interactive app to explore the demographics of the populations served within the catchment areas. This information is critical for resource allocation and service delivery decisions.

You have successfully downloaded data and created and symbolized a map that displays the NCI-designated cancer centers across the United States, along with their corresponding cancer center catchment area polygons. Your map helps you understand the coverage of cancer center catchment areas across the United States.

Your map also allows you to identify regions that may not have adequate access to cancer care services. Health-care organizations and policymakers can leverage this information to make informed decisions about how best to extend care to these unserved and under-served populations.

The next step is to use demographic data to better understand the populations included in each cancer center catchment area. This is a critical step to ensure that cancer research and services are tailored to the local needs. You will build a web app that will create infographics summarizing the population data for each of these areas.

Create an app to display infographics

Now you will use ArcGIS Experience Builder to develop a web app that allows a user to select a cancer center, see its catchment area, and examine an infographic of demographic information for the served population. This app will be a valuable tool for health-care professionals, researchers, and policymakers who aim to align their efforts with the unique characteristics of the communities served by each catchment area.

Create the app from the map

You will begin by creating an ArcGIS Experience Builder app directly from the map you created. There are a variety of apps you can create from maps. You will be using Experience Builder because it includes the ArcGIS Business Analyst widget, which provides access to demographic information you want to include in the app.

To create an Experience Builder app with the Business Analyst widget, you must be signed in with an ArcGIS Online account that has privileges for GeoEnrichment and Network Analysis. For more information, see the Business Analyst widget—ArcGIS Experience Builder documentation.

1. On the Contents toolbar, click the Create App button and click Experience Builder.

   

   The ArcGIS Experience Builder templates page opens in a new tab. This page allows you to choose a template for your app. You will choose a blank template, which will allow you to configure widgets exactly where you want them.

2. In the Select a template to start pane, for the Blank fullscreen template, click the Create button.

   

3. If you are prompted to take a tour of Experience Builder, click Skip.

   

4. In the app name box, click Untitled experience 1.

   

   This is the default new app name. You will change it to something more meaningful.

5. In the app name box, delete the old name and type Cancer Center Catchment Area Demographics, and press Enter.

   Since you created this app directly from your map, the map widget is already on the canvas. The canvas is the workspace in Experience Builder where you will add and configure widgets. Widgets enable specific, focused in-app functionality. You want your app to allow users to explore and understand cancer center catchment areas and the populations they serve. This will require two more widgets: the Business Analyst widget and List widget.

Add the Business Analyst widget

The Business Analyst widget allows users to visualize key indicators and information about a specific location using interactive infographics. You'll add this widget now.

1. If the Insert widget pane is not visible, on the sidebar, click the Insert widget button.

   

   The Insert widget pane shows a list of widgets. The widgets are organized into various categories, such as Map centric, Data centric, and Page elements.

2. Scroll down the list of widgets in the Map centric section to the Business Analyst widget.
3. Click and drag the Business Analyst widget onto the canvas above the map widget.

   

   A box appears on the canvas representing the widget. Don't worry about positioning it now; you'll do that later.

   

   The Business Analyst widget configuration pane appears to the right of the canvas.

   

   The default mode for the widget is Workflow mode.

4. In the Mode section, click Preset.

   

   With the widget in Preset mode, you define a specific site and infographic for users of the app. This approach helps to ensure they are seeing the information you want them to see. For this app, the specific sites to investigate are the cancer center catchment areas, and you will choose a default health-specific infographic that is already designed to include relevant health information. You will configure these later.

   The widget placeholder on the canvas changes.

   

   You will configure additional settings for the widget later.

Add the List widget

Next, you'll add a List widget to allow users of the app to select the different cancer centers.

1. Scroll down the list of widgets in the Data centric section to the List widget.
2. Click and drag the List widget onto the canvas to the left of the map widget.

   

   The List widget displays data records in a custom list view.

3. Move the pointer over the List widget.

   The pointer changes to indicate that you can select and move the widget.

   

4. Click the List widget and drag it down and to the left on the canvas.

   The widget moves, and guide lines appear indicating its position. The guide lines help you position widgets precisely on the canvas.

   

5. Move the pointer over the upper-right corner of the List widget.

   The pointer changes to indicate that you can select and move the corner of the widget.

   

6. Click and drag the corners of the List widget so that it takes up approximately one third of the canvas on the left side.

   

7. Use the same technique to resize and reposition the map widget so that it occupies the bottom quarter of the remaining space on the canvas.

   

8. Use the same technique to resize and reposition the Business Analyst widget so that it occupies the remaining space on the canvas.

   

   To learn more about layout functionality in Experience Builder, see the Design a layout in ArcGIS Experience Builder tutorial series.

Connect the List widget to the data

Right now, the List widget is not connected to the data on the map. You will change this, since you want the List widget to display information about each cancer center, using the map as the data source.

1. On the canvas, click the List widget.

   

   The List widget configuration pane appears to the right of the canvas.

   

2. At the bottom of the List widget configuration pane, click Start.

   

3. At the top of the List widget configuration pane, click Select data.

   

   The Select data pane appears.

4. In the Select data pane, click the Expand button next to Cancer Center Catchment Area Map.

   

5. Click the Cancer Center Catchment Areas polygon layer.

   

   The List widget is now connected to the data in the map.

Configure the List widget to show dynamic text

You will now configure the list widget to show key information about each cancer center, such as its name and address, and a link to its website. Each of these is included as an attribute of the Cancer Center Catchment Areas polygon layer.

1. On the canvas, on the List widget, click the image placeholder circle.

   

2. On the List widget item editing toolbar, click the Delete button.

   

3. Click the text box on the List widget.

   

4. Click and drag the lower left corner of the text box to use the space where the image placeholder was.

   

5. Resize the text box to occupy the available space.

   

6. Double-click the text box to edit its content.

   An inline editor pops up to allows you to format the text for the list. Rather than input each cancer center’s name and address manually, you can use dynamic content in the list to show those attributes from the data layer.

7. On the List widget item editing toolbar, click the Dynamic content button.

   

   A list appears of the attributes of the Cancer Center Catchment Areas polygon layer.

8. In the Dynamic content attribute list, click name.

   

9. In the Dynamic content attribute list, click address.

   

   The name attribute and the address attribute are added to the text box of the list item. The curly braces indicate that these are dynamic text.

   

10. Close the Dynamic content attribute list.
11. In the text box, click between {name} and {address}, and press Enter.

    The {address} dynamic text item is moved to the second line of the text box.

    

12. In the text box, click {name}, and on the text formatting bar that appears, click the Bold button.

    

13. On the list item, click the white space above the button.

    

    The List widget updates to show the two attributes for each feature.

    

    You've configured the List widget to show dynamic text from the attributes of the Cancer Center Catchment Areas polygon features. Next, you'll configure a button to link to the cancer center web pages.

Configure a button in the List widget

The Cancer Center Catchment Areas layer also includes the URLs for each cancer center’s web page. With the name and address set up, you can now add the URL for each center to the list widget. Cancer center web pages often provide accurate and up-to-date information about various types of cancer programs and specialties, treatment options, clinical trials, and support services. By linking directly to the cancer center pages, you are providing users of your app with a trusted source of information.

You will configure a button for each item in the List widget that will open that center's page.

1. On the List widget item, click the Button control.

   

   The Button pane appears.

   

2. In the Button pane, click in the Text box, delete the default text, Button, and type Website.

   

   The users of the app will see that clicking this button will lead them to the cancer center’s website.

3. In the Button pane, click the Set link button.

   

   The Set link pane appears.

4. In the Set link pane, click the Link to drop-down list.

   

5. In the Link to list, click URL.

   

6. Click the Page button beside the URL box.

   

7. In the Page list, click Attribute.

   

8. In the Attribute list, click url.

   

   This is the field that stores the URL for each cancer center’s web page.

9. Click OK.

   

   The List widget item buttons are now configured to open the cancer center web pages.

Style the button to match your map

Now you'll style the button to match the symbology of the catchment areas on the map.

1. In the Button pane, turn on the Advanced settings.

   

   Additional button formatting options appear in the Advanced section of the Button pane.

2. Click the button Fill color patch.

   

3. In the color panel, click More.

   

   You will use the same color as the fill color of the catchment areas.

4. In the HEX text box, replace the default value with #067ac6.

   

5. Click the Button pane next to the Fill color panel to hide the color panel.

   

   The button color now matches the catchment area polygon color on the map.

   

   To make the button text easier to read, you will make it bold and change its color to white.

6. In the Button pane, on the Text formatting toolbar, click Bold.

   

7. In the Button pane, on the Text formatting toolbar, click the Text Color button, and in the color panel, in the Standard colors section, click the white color patch.

   

8. Click the Button pane next to the Text formatting toolbar to hide the color panel.

   The button text is now bold and white to show up better on the blue background of the button.

   

   You've formatted the button. Next you'll make the app more interactive.

Configure widget actions

With the List widget formatted, you can move on to enable widget actions. Using widget actions within the web app significantly boosts the interactivity of the app, allowing users to select and view features and information of interest to them.

1. Click the top of the List widget.

   

   The List widget configuration pane appears.

2. In the List widget configuration pane, click the Action tab.

   

3. On the Action tab, click Add a trigger.

   

   The Select a trigger pane appears.

4. In the Select a trigger pane, click Record selection changes.

   

   The Select a target pane appears.

   This pane allow you to choose which widgets will be affected by selection changes in the list widget.

5. In the Select a target pane, in the Widgets section, click Map.

   

   The Select an action pane appears.

   

6. In the Select an action pane, click Zoom to.

   The Zoom to action is added for the widget.

   

   You'll add one more action to connect the Business Analyst widget to the List widget.

7. Click Add action.

   

8. In the Select a target pane, in the Widgets section, click Business Analyst.

   

9. In the Select an action pane, click Select feature.

   

   You have configured your app so when a user clicks on a cancer center in the List widget, the Map widget will zoom to that area, and the Business Analyst widget will display the demographic and health data for that cancer center's catchment area.

Add search capability

Users of you app will often know which cancer center they want to view the demographic information for. You will enable the search function on the List widget so users can search for a specific center.

1. In the List widget configuration pane, click the Content tab.

   

2. On the Content tab, expand the Tools section.

   

3. In the Tools section, turn on the Search option.

   

   You expect that users of the app will primarily want to search based on the cancer center’s name or its location. You will configure the search to look within those attributes.

4. In the Search section, click the Select searching fields drop-down list.

   

5. In the field list, check the name and address boxes.

   

6. Click the configuration pane background beside the Select searching fields label to hide the field list.

   The List widget is now connected with both the Map and Business Analyst widgets, creating a cohesive and connected experience for users. This integration allows users to search for cancer centers, retrieve information from their websites, visualize their locations on the map, and view relevant demographic data about the populations they serve.

Configure the Business Analyst widget

Now you will configure the Business Analyst widget to show an infographic for selected catchment areas.

Business Analyst infographics are dynamic and visually appealing presentations that summarize data and analytics into easily understandable formats. They are designed to convey complex information quickly and clearly through a combination of maps, charts, texts, and images.

1. On the canvas, click the Business Analyst widget.

   

   By default, if a feature is not selected, the widget displays the text Select a feature on the map or search for a location to view infographics.

   You want the app user to select a cancer center from the List widget, so you will update this text.

2. In the Business Analyst widget configuration pane, on the Content tab, in the Introduction text box, replace the existing text with the following: Search for a cancer center from the list to view an interactive infographic with health care and insurance statistics for the population within the cancer center’s catchment area.

   

   These directions will help people use your app effectively. You will now choose the infographic to show when a cancer center is selected from the list.

3. Scroll down the Business Analyst widget configuration pane to the Infographics section and click Select an infographic.

   

   The Select an infographic pane appears.

4. In the Select an infographic pane, expand the Esri infographics section.

   

   A list of infographics that span a wide array of topics appears. For this app, the information you want to provide for each cancer center catchment area includes basic population numbers, insurance coverage, and health-care expenditures, highlighting how people in the area pay for care and which types of health insurances are most common in the area. The Health Care and Insurance Statistics infographic will work well for this purpose.

5. Scroll down the list of infographics to Health Care and Insurance Statistics and click Health Care and Insurance Statistics.

   

6. Close the Select an infographic pane.

   The infographic is added to the widget configuration pane.

   

   You have configured all the widgets in your ArcGIS Experience Builder app to make it interactive and dynamic.

Publish the app

The app is now ready to publish and test.

1. At the top of the app window, click the Save button.

   

2. Click the Publish button.

   

   The button text updates to indicate that the app is published.

   

3. Click the More button and click View published item.

   

   A new tab opens with the app in its published state.

   

4. In the list widget, click the first item.

   

   The map zooms to focus on the cancer center's catchment area.

   

   The Business Analyst widget shows the infographic of the demographic characteristics of the catchment area.

   Note:

   If the infographic does not display, revisit the configuration steps for the Business Analyst widget.

5. In the Search box of the List widget, type Dallas and press Enter.

   

   The list is filtered to the one item with Dallas in its Address field.

6. Clear the search by clicking the Clear button in the Search box..
7. Click the Website button for an item in the List widget.

   The website for the cancer center opens in a new tab.

   The app is working correctly.

   Right now, this app is private. You can change this to share the app within your organization for stakeholders to use to make decisions, or even share it publicly to engage the community and enhance their understanding about cancer care and their community characteristics.

   Note:

   Viewing and downloading infographics consumes ArcGIS Online credits. Read more about sharing the Business Analyst widget in a public app.

   You've configured an ArcGIS Experience Builder app by incorporating a List widget to facilitate the selection of cancer centers and a Business Analyst widget to display demographic information for each catchment area. You published the app so it can be shared and used by others to learn about cancer centers and the populations they serve.

In this tutorial, you built an interactive app to provide comprehensive insights into the nation’s NCI-designated cancer centers, their catchment areas, and served populations. By leveraging the data and analytics offered by this app, individual cancer centers can better inform their research agendas and strategies for service delivery, ensuring that resources are directed where they are most needed. At a national level, this app could support grant funding decisions and pinpoint areas of low or no access to cancer care. A geographic approach to sharing this data not only improves the efficiency of health-care delivery but also ensures that the services provided are tailored to address the unique challenges and requirements of each community. This app can empower the American cancer center program to adopt a focused and effective approach in their mission to support and treat individuals with cancer.

Acknowledgements

• Cancer centers and cancer center catchment areas published by the National Cancer Institute.
• DelNero PF, Buller ID, Jones RR, Tatalovich Z, Vanderpool RC, Ciolino HP, Croyle RT. A National Map of NCI-Designated Cancer Center Catchment Areas on the 50th Anniversary of the Cancer Centers Program. Cancer Epidemiol Biomarkers Prev. 2022 May 4;31(5):965-71. DOI: 10.1158/1055-9965.EPI-21-1230, PMID: 35101903