Creating a Spatio-Temporal Dashboard in ArcGIS Online

Dashboards are web-based graphical user interfaces that provide an at-a-glance interactive summary of related information (analytics) on a single topic or business process. Dashboards are commonly driven by data sources that are updated in real time. Dashboards can be used to inform decision making (Wikipedia 2021).

One notable dashboard that brought the technique to public notice was a dashboard developed by the Johns Hopikins University Coronavirus Resource Center during the pandemic of 2020 - 2021.

This tutorial will demonstrate the creation of a simple dashboard of a World Bank development indicator using ArcGIS Dashboards.

Johns Hopkins University Coronavirus Resource Center dashboard (16 May 2021)

Acquire the Data

For this example, we will use historic life-expectancy data by country that was collected by the World Bank.

Download the CSV file, unzip the .zip archive, and open the data .csv file in a spreadsheet program.

Downloading and unzipping a .csv file from data.worldbank.org

Process the Data

Spreadsheet data provided by the World Bank is organized in a two-dimensional "wide" format, with rows representing different countries and columns representing different years.

However, in order to use this data with ArcGIS Online, we will need to reshape the data so that all values are in a single data column, with category columns that specify the country and year associated with each cell in that data column. For simplicity, we will only use three years from the data (1960, 1990, 2018), which will allow us to see the general trend of increasing life expectancy over the 58 years covered by this data set.

Downloading and unzipping a .csv file from data.worldbank.org

Store the Data

To use the data in an ArcGIS Dashboard, you will need to upload it as a hosted layer in ArcGIS Online.

  1. On your ArcGIS Online Content, select Add Item and From this computer to upload your CSV file.
  2. For Location, choose the style that reflects how locations are stored in your CSV file. For this data, we use the Country Name.
  3. Verify that your variables are detected as the appropriate type. Quantitative variables should be of type Double (double-precision floating point, which is a highly-accurate internal representation).
  4. For Year, use the String type rather than the default of Integer so that years are displayed as four digits without a comma (2018 vs 2,018).
Uploading a .csv file to create a hosted layer in ArcGIS Online

Communicate the Data: Map

ArcGIS Dashboards are usually built around a single map that provides a geographic visualization of the where component of the data.

  1. From the information page for the new hosted layer, select Open in Map Viewer.
  2. Under Styles and Choose Attributes, for the Field select the field that will determine the styling of the features.
  3. Under Try a drawing style select the visual variable. For this example we use Color and Size (hue) together to make differences in values clearer.
  4. Adjust the Style options.
    • For the Fill we use a red color ramp that highlights areas with lower life expectency in a darker color.
    • Adjust the Size range of the bubbles so they are not overwhelmingly large with this many features.
  5. Under Properties and Appearance, change the Blending to Multiply. This will use the bubble colors to color the areas under the bubbles so that is is possible to see both the bubble colors and the location names at the same time.
  6. Save the map under a meaningful name. For this example, we use the same name as the hosted layer so it is clear that the map and layer go together.
  7. Share the map with Everyone so that it will be accessible to everyone when you include it in the dashboard.
Creating the main dashboard map with the hosted feature layer

Communicate the Data: Dashboard

Finally, you can begin adding elements to create the dashboard.

Create the Dashboard

From your ArcGIS Online Content page, select Create and Dashboard.

Give the dashboard a meaningful name. This name will not be displayed on the dashboard, so you can use whatever naming scheme will help you organize your materials. For this example, we use the same name as the hosted layer and map so we know all these materials go together.

Creating the new dashboard app

Add a Map

Click the plus sign (+) at the top of the page and add the map you created above. This map and the data in the hosted layer in the map will be the data driving the dashboard.

Add a map to the dashboard

Add a Serial chart

Serial charts can be used to summarize categorical data or present a time series. For this example, we will create a three bar graph to display average life expectancy in the three different decades represented by the World Bank data used to create the map.

  1. Click the plus sign (+) at the top of the page and add a new Serial chart.
  2. For Select a layer, use the hosted layer from the map.
  3. The Category field indicates how values will be grouped together across the x-axis. For this example we use the Year field from the data.
  4. For the Field, use the data field. In this example, it is the Life Expectancy field.
  5. The summary Statistic indicates how to combine values in the different categories. For this example, we use the Average.
  6. If desired, on the Series tab, change the Color of the bars.
  7. On the General tab, give the chart a meaningful Name and Title. The name is use internally to help you keep track of the different dashboard elements, but the title is displayed to users.
Add a serial chart to the dashboard

Add a Legend

Thematic maps that use symbols to represent quantitative or qualitative values need a legend so the user can know what the different types of symbols mean.

Add a legend

Add a List

Lists can display selected data from the map. For this example, we will use this to show the countries currently displayed on the map along with the year and data value.

  1. Click the plus sign (+) at the top of the page and add a new List.
  2. Under Data, select the map layer that will be the source data for the list.
  3. Under List in the Line item template, indicate what each line will show. Fields from the data are enclosed in braces. In this case, we show the country name, year, and data value.
  4. Under General options, give the list a meaningful (internal) name.
Add a list

Add Credits

Any presentation of data should cite the source for that data. For this example we use a Rich Text box and fill it with the source information on the World Bank page.

Add a rich text box with credits

Add a Title

The title visible in the dashboard editor will not be visible when the dashboard is viewed by users. Therefore, we add a Rich Text box with a title with the quantitative unit (in years) so users know what they are looking at.

For the styling of the heading we use the HTML <h2> so that the title inherits the overall styling of the page.

Add a rich text box with the dashboard title

Add Actions

Dashboard Actions are ways that map elements can respond when users click on those elements. Actions allow users to analyze specific portions of the data, and this interactivity makes dashboards more useful than simple static displays of information.

  1. On the map, add Map Actions to Filter the serial chart histogram and the list of countries. In this example, as the user zooms in an out, only data for the visible countries will be summarized in the histogram and list.
  2. On the Value tab , we select fixed minimum and maximum values the bar sizes are comparable across different regions.
  3. On the list, add Actions to Flash the location on the map. In this example, clicking on a country will briefly place a halo around the feature on the map. This can be especially useful for helping users find unfamiliar countries.
  4. On the histogram (serial chart), add Actions to Filter both the map and the list. This will allow users to see only data for specific years and compare changes over the decades.
Add a rich text box with the dashboard title

Test the App

To test the app, Save the app, go back to your Content page, and view the info page

Set the sharing as needed.

View app to see the app as users will see it.

To get a sharable link, copy the link from the location bar in window running the app.

Viewing and testing the completed app