Customize an infographic-focused web app

You are a researcher at a nonprofit organization. You want to create an app that shares community information in a presentation-ready and interactive format. You'll use ArcGIS Experience Builder to create an app using a Business Analyst template with the What's in My Community infographic. You'll customize the app to include a Justice40 web map that visualizes disadvantaged communities. You'll also change the geography of the app and add walk-time ring buffers.

This tutorial was last tested on December 7, 2023.

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Experience Builder

Create an Experience Builder app

First, you'll create an infographic-focused web app using ArcGIS Experience Builder.

Create a web experience from a template

You'll start with a Business Analyst template and then set up the app.

1. Sign in to your ArcGIS organizational account.

   Note:

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

2. Click the Content tab. Click the Create app button.

   

3. Choose Experience Builder.

   

4. Click the Create new button.

   

   The Template screen appears with the Default tab active.

5. On the Template screen, click the ArcGIS Online tab to find ready-made templates.

   

6. In the list of sub-categories, click Business Analyst to filter the templates.

   

   A list of Business Analyst specific templates appears. Templates are Experience Builder apps that are ready to use and customizable.

7. Locate the What's in My Community template and click Create.

   

   The template appears on the canvas.

   

   Note:

   If this is your first time using this template in Experience Builder, you may receive a pop-up notification with a tour that shows you how to navigate in Experience Builder. If so, click Skip.

   The What's in My Community template features an infographic, providing information about the businesses, services, and amenities in the local community, as well as an interactive map widget. There may be a pop-up window when you open a template that includes a description of the widget preset mode and settings.

8. Under the title, on the vertical toolbar, click the Page button.

   

9. Click the Page tab to view the web experience without the pop-up window.

   

   Now the app displays without the pop-up window.

   

Add a web map to the app

The nonprofit that you work for needs information about disadvantaged communities in the area of Louisville, Kentucky. Now that you have selected and set up your app, you'll add a web map of disadvantaged communities mapped using Justice40 criteria.

1. On the canvas, click the map widget to select it.

   

2. In the Map pane, click Select map.

   

   The Select data pane appears.

3. At the bottom of the Select data pane, click Add new data.

   

   The Add data page appears. On this page, you can choose where you want to add data from.

4. Click Living Atlas.

   

   ArcGIS Living Atlas is a collection of web maps with geographic information that you can add to your apps.

5. In the search box, type justice40. Choose the Justice40 November 2022 Version 1.0 web map.

   

   The Justice40 initiative is a legislative policy to deliver 40 percent of benefits of certain federal investments to disadvantaged communities. To learn more, see A Snapshot of disadvantage in the United States.

6. In the pop-up window, click Done.

   

   The Justice40 web map is added to the Select data pane.

   

7. In the Select data pane, click the Justice40 November 2022 Version 1.0 web map to apply it to the map widget.

   

You built a web app from a Business Analyst template and added a web map to it.

Configure and publish the app

Next, you'll configure the app. Then, you'll publish and share it.

Set up buffers and infographics

You'll change the geography of the app and add walk-time buffer rings to enrich your understanding of the different neighborhoods. You'll also view the infographic in compare mode to see how the distribution of businesses, services, and amenities differs in the walk-time buffer rings.

1. On the canvas, click the What's in My Community infographic widget.

   The Business Analyst pane appears with the Content tab active. There are several options available to customize the infographic widget. First, you'll set the location to Louisville, Kentucky, where the nonprofit organization that you work for is located.

2. In the Business Analyst pane, click the current location of Chicago, Illinois.

   

   Note:

   When you applied the Justice40 web map, the default location was set to Chicago, Illinois.

3. In the Set a location pane, delete Chicago, Illinois.

   

4. For Enter location or boundary, type Louisville. From the results, choose Louisville, KY, USA.

   

   The new geography is applied on the widget.

   

   Next, you add walk time buffers to learn more about the area.

5. In the Business Analyst pane, under Buffers, click Walk time.

   

6. In the Set buffers pane, type walk-time buffers of 5, 10, and 15 minutes.

   

   Walk-time ring buffers provide more detailed information about your community and its neighborhoods. It also shows how businesses, services, and amenities are distributed differently across these ring buffer areas.

7. Click the Apply button to display the walk-time buffers in the map widget.

   The walk-time buffers are added to the web map.

   

8. In the Business Analyst pane, expand Infographic settings. Click the View mode drop-down menu and choose Compare.

   

   The infographic transforms into a variable grid. It shows a comparison of the different businesses, services, and amenities for each walk-time ring buffer.

   

9. In the Infographic settings, for Background color, click the current color.

   

10. Under Standard, click the gray color.

    

    The infographic automatically refreshes showing the background color change. The gray background increases the color contrast with the variable grid.

    

11. On the ribbon, click the Save button to save the app.

    

Publish and share the app

The app is complete, but currently only you can see it. You'll publish the app and change the sharing settings so others in your organization can access and use it.

1. On the ribbon, click the Publish button.

   

2. On the ribbon, click the More button and choose View published item.

   

   The app opens in a different web browser tab.

3. In the search bar, type a location of your choice to view the information in the infographic.
4. Return to the browser tab that has the app in edit mode.

   Now that the app is published, you can share it with others. By default, the app is only accessible by its owner (you), but you can change the sharing settings so others can access it. From the More menu, you can copy the link of the shared item to send to others and you can also change the sharing settings. If you change the sharing settings, you'll be directed to the item details page in ArcGIS Online where you can choose to share with the public.

5. On the ribbon, click the More button and choose Copy published item link.

   

   You can send this copied link to others to access it. First, you must change the sharing settings so other can access the app.

6. On the ribbon, click the More button and choose Change share settings.

   

   The item details page for the web app appears.

7. Click the Share button.

   

   The Share window appears with various options for sharing. Currently, only the owner of the app can access it, but you can change a setting to share it with your organization or with everyone (the public).

8. In the Share window, click Organization and click Save.

   

   Now the app is shared so other members of your organization can use it.

You have built an app from a template, added a custom web map to it, configured it, published it, and shared the app with your ArcGIS organization. Anyone who uses the app can type a location and get valuable demographic information using the walk-time buffers and the infographic. Using Experience Builder and a Business Analyst template, you created a useful and informative web app to help provide insight into locations within the community.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• The workflow described in this tutorial draws from the Esri Community post How to create an Experience Builder application with the Business Analyst widget in Preset mode, by Fasil Tiru.
• Demographic data was accessed with ArcGIS Business Analyst. See the Terms of use.
• Cover photo: Harold Stiver - stock.adobe.com.