2 – Authoring Arcgis Dashboards Derek Law, Product Manager - Apps Topics

2 – Authoring ArcGIS Dashboards Derek Law, Product Manager - Apps Topics

• Getting started with ArcGIS Dashboards • COVID-19 examples • Authoring workflow • Dashboard elements • Layout options Designing a dashboard

• Know your audience: - What question(s) are they trying to answer? - What actions will be enabled by this information? - What is their technical level? - How are they going to view the dashboard? - Web browser vs. mobile device vs • Express information clearly and accurately

• Focus attention to where it is needed COVID-19 dashboard examples https://www.esri.com/en-us/covid-19/overview Getting Started with ArcGIS Dashboards 1

• Several ways to open the app 1. App Launcher 2. Map Viewer - Share > Create a web app > Dashboards 2 3. Content page

- Create > Create apps > Dashboards 3 4. Web map item page

- Create web app > Dashboards 4

A Launching ArcGIS Dashboards

• 2 workflows Dashboard 1. Map Viewer | Web map item page • Web map automatically in dashboard

2. App Launcher | Content page Dashboard - Start with an empty dashboard - Conceptually like a “blank canvas” Side Note: Dashboard home page

• Create and manage dashboards - View, edit, update metadata • Search and sort dashboards in your organization Creating a new dashboard Dashboard

1. Open ArcGIS Dashboards

2. Add elements - Select, configure, and position (in layout) - WYSIWYG user experience

3. Adjust dashboard layout, if needed

4. Enable interactions (optional)

A Dashboard Elements Many data visualization options Dashboard elements

• Header • Gauge • Side Panel • List • Map and Map Legend • Details • Serial chart • Rich text • Pie chart • Embedded Content • Indicator

• Does a dashboard need to have ALL of these elements? Adding elements to a dashboard

1. Select element 2. Configure properties - Data source and formatting - Appearance - Will vary depending on the element type 3. Place in dashboard layout

Parameters

A Header and Side Panel elements

• Header - Provides a title, subtitle, logo and background for branding - Options - Selectors for interactivity - Hyperlinks - Sign Out link

cases by class

• Side Panel - Use to contain selectors for interactivity - Title, description - Optional: retract in display

• Their layout locations do not change Dashboard A Map element

Map tools • Displays geographic and spatial data in web map • Properties - Title and description - Can enable pop-ups, map tools - Default spatial extent and bookmarks - Legend, layer visibility, basemap, search, and zoom in/out - Map and layer actions

• A dashboard can have multiple map elements Map Legend element

• Provides a legend for a map element • Contents determine by map layers - Ordered determined by web map • Respects layer visibility and scale ranges

• Properties - Title and description Charts in dashboards

• Visualize your data so that you can make better decisions faster • Likely one of the key data visualizations used in a dashboard of people are visual thinkers

• Serial Chart → Compare something between different groups or track change(s) over time • Pie Chart → Show part-to-whole relationships or for data composition

A Serial Chart element

• Visualizes one or more series of data points on a x/y graph • They can be used to show one or more datasets • Bar, line, and smooth line charts are supported Serial Chart types

• Bar charts → Display data with discrete categories (e.g., types of crime)

• Line and smooth line charts → Display data with continuous categories (e.g., dates) - Can also be rendered as area charts

A Serial Chart types

• Multi-series charts → Display multiple datasets, used to compare different datasets - Grouped

- Stacked

- 100% stacked

A Anatomy of a Serial Chart

• Common components - All are configurable properties

1. Scrollbar 2. Hover text 3. Grid lines 4. Guides 5. Legend Properties 6. Label 7. Axis title 8. Axis Pie Chart element

• Circular chart divided into sections; each section is proportional to the quantity it represents • Displays a single series of data points • Used to show part-to-whole relationships or data composition • Not meant to show comparisons between sections • Option: donut chart representation Pie Chart tips

• Use ‘donut’ style over ‘pie slices’ style - Comparing lengths of arcs vs. angles & areas more complex for the eye to judge • Or perhaps bar chart might be better

• Limit to 6 categories or less - Too many small categories not useful • Use labels or legend, not both Indicator element

• Card that can display - Feature count - Summary statistic → sum, avg, min, or max - Compare a computed value to a reference value - Based on a threshold • Can apply filters • Option to set conditional formatting - Appearance changes based on a condition • Option to only display icon Anatomy of an Indicator

• Each area is optional and can have text displayed • HTML code is supported • Middle section has icons (right or left) - Custom icons supported, use scalable vector graphics (SVGs)

Top

Middle

Bottom Some Indicator examples Gauge element

• Show the value of a single metric; defined by minimum and maximum values - Value can be fixed or dynamic • 2 styles: 1. Progress gauge - Convey a parameter is moving forward or backward - Can define thresholds to show progression - Rendered as circle, horseshoe, or half donut

2. Meter gauge - Display the amount, level, or contents of a parameter - Rendered as horseshoe or half donut List element

• Displays a collection of features or rows from a layer • Can limit the number of features displayed • Can apply filters and sorting

• Only display relevant information - Purpose of the list • Considerations: - Which attributes are needed? - In what order? - How many features? Details element

• Displays item specifics about features or rows from a layer • Information based on the layer’s pop-up information - Title, content, media, and attachments • Supports filtering and sorting • Can limit the number of features displayed

• Useful for interactive dashboards - Target element for actions - Set media refresh interval if images are updated Rich Text element

• Enables text content to display in the dashboard - Can help provide additional context • Supports rich text elements - Text, web links, images, and videos • HTML editor, WYSIWYG user experience Embedded Content element

• Include web pages, video, and apps (e.g., Survey123 forms) • Social media content • Can provide additional context to dashboard

A Dashboard layout options

• Elements can be positioned in any combination stack - Exceptions Header and Side Panel

• Elements can be stacked or grouped - Stack elements - Position elements in same location, tab to switch between them group

- Group elements - Aggregate into a single unit - Hold ‘shift key’ to enable grouping Dashboard theme

• Light vs dark display theme Resources

• ArcGIS Dashboards - ArcGIS Dashboards – Useful Links blog - Monitoring COVID-19: A Dashboard Lesson - Create your first dashboard using ArcGIS Dashboards blog - Operations Dashboard for ArcGIS: An Introduction UC Technical session video