Upload
others
View
26
Download
0
Embed Size (px)
Citation preview
2 – Authoring ArcGIS DashboardsDerek 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
• Express information clearly and accurately
• Focus attention to where it is needed
vs
COVID-19 dashboard exampleshttps://www.esri.com/en-us/covid-19/overview
• Several ways to open the app1. App Launcher2. Map Viewer
- Share > Create a web app > Dashboards3. Content page
- Create > Create apps > Dashboards4. Web map item page
- Create web app > Dashboards
Getting Started with ArcGIS Dashboards
A
1
2
3
4
Launching ArcGIS Dashboards
• 2 workflows1. Map Viewer | Web map item page
• Web map automatically in dashboard
2. App Launcher | Content page- Start with an empty dashboard- Conceptually like a “blank canvas”
Dashboard
Dashboard
Side Note: Dashboard home page
• Create and manage dashboards- View, edit, update metadata
• Search and sort dashboards in your organization
Creating a new 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)
Dashboard
A
Dashboard Elements Many data visualization options
Dashboard elements
• Header• Side Panel• Map and Map Legend• Serial chart• Pie chart• Indicator
• Does a dashboard need to have ALL of these elements?
• Gauge• List• Details• Rich text• Embedded Content
Adding elements to a dashboard
1. Select element2. Configure properties
- Data source and formatting- Appearance- Will vary depending on the element type
3. Place in dashboard layout
A
Parameters
Header and Side Panel elements
• Header- Provides a title, subtitle, logo and background for branding- Options
- Selectors for interactivity- Hyperlinks- Sign Out link
• Side Panel- Use to contain selectors for interactivity- Title, description- Optional: retract in display
• Their layout locations do not change Dashboard
A
cases by class
Map element
• Displays geographic and spatial data inweb 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 tools
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
• Serial Chart → Compare something between different groups or track change(s) over time• Pie Chart → Show part-to-whole relationships or for data composition
of people are visual thinkers
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. Scrollbar2. Hover text3. Grid lines4. Guides5. Legend6. Label7. Axis title8. Axis
Properties
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- Exceptions Header and Side Panel
• Elements can be stacked or grouped- Stack elements
- Position elements in same location, tab to switchbetween them
- Group elements- Aggregate into a single unit- Hold ‘shift key’ to enable grouping
stack
group
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