IT 7113 Data Visualization Dashboard Lecture Notes. http://idi.kennesaw.edu/it7113/
About Jack Zheng
Faculty of IT at Kennesaw.edu
http://idi.kennesaw.edu/it7113/
https://www.edocr.com/v/oekl31vr/jgzheng/Dashboard
Dashboard
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2024
This lecture notes is hosted at https://www.edocr.com/v/oekl31vr/jgzheng/Dashboard
Overview
• What is a dashboard?
• Elements of a dashboard
• Types of dashboards
– Comparing with report, visual analysis tool, and
scorecard
– Levels of dashboards
• General design considerations and principles
This lecture introduces dashboards and their use in various
business cases. A second module will continue on
dashboard design patterns and best practices.
http://visualnomics.com/ArabUprising/
https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6
https://www.fairfaxcounty.gov/demographics/fairfax-county-general-overview
https://www.google.com/search?q=dashboard&tbm=isch
What is a dashboard?
3
http://visualnomics.com/ArabUprising/
Real-world public
dashboard
https://www.arcgis.com/apps/opsdashboard/inde
x.html#/bda7594740fd40299423467b48e9ecf6
https://www.fairfaxcounty.go
v/demographics/fairfax-
county-general-overview
Dashboards from
former student projects.
Dashboard
https://www.google.com/search
?q=dashboard&tbm=isch
http://www.perceptualedge.com/articles/ie/dashboard_confusion.pdf
Dashboard
4
A dashboard is a visual-oriented display of
the most important data and information
needed to achieve defined goals and
objectives; consolidated and arranged on
a single screen so the information can be
viewed at a glance.
Adapted from
Dashboard Confusion by Stephen Few
http://www.perceptualedge.com/articles/ie/dashboard_confusion.pdf
The term “dashboard” originates from the automobile dashboard
where drivers monitor the major functions at a glance.
Features of Dashboards (Key Terms in the Definition)
5
Visual-oriented display
• Dashboard is a data visualization tool
• Dashboard is a type of graphic user interface
• Dashboards are visually intensive, with many graphics, charts, maps, colors; but
they could also have textual information.
Most important data and
information
• Usually these are the key data, metrics, and performance indicators (KPI) that a
user concerns most on a regular basis.
• Because of the space limit, only the most important and relevant data are
included in the dashboard
• Dashboards provides refined, distilled, and filtered views and insights
Goals and objectives
• A dashboard is part of a business intelligence and analytics tool used to
visualize data and analysis results.
• A dashboard serves a very clear goal; all data and information presented serve
that goal.
• There are different types of goals, for example, monitoring, analysis, reporting,
exploration, and communication.
Consolidated
• The data (metrics) presented may come from multiple sources, analysis, and
from different perspectives.
• They are arranged on the same screen to provide an integrated view.
Single screen (??)
• Most dashboards should fit to one screen without excessive panning, zooming,
and scrolling.
•
If there are more content needs to be placed beyond the screen, then they
should be prioritized, and less important content can be displayed on-demand
through various means such as using additional secondary dashboards.
https://www.qlik.com/us/dashboard-examples/digital-dashboard
https://searchbusinessanalytics.techtarget.com/definition/business-intelligence-dashboard
https://www.klipfolio.com/resources/articles/what-is-data-dashboard
https://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167
Some Other Terms
• Dashboard sometimes is also called
– Digital dashboard https://www.qlik.com/us/dashboard-examples/digital-dashboard
– BI dashboard:
https://searchbusinessanalytics.techtarget.com/definition/business-intelligence-dashboard
– Data dashboard https://www.klipfolio.com/resources/articles/what-is-data-dashboard
–
Information dashboard
https://www.amazon.com/Information-Dashboard-Design-Effective-
Communication/dp/0596100167
– Or can be associated with a particular sector or usage, such as business dashboard,
health dashboard, traffic dashboard, etc.
•
“Information Summary Dashboards” – a bit different
– Dashboard as a more general term is used in
• Many web portals or systems that offer an overview of the most important information that a user
concerns, and commonly used as the landing page/screen of a site or application.
• A collection of news and updates from a community or centered around a topic, used in many
social monitoring purposes.
– This kind of dashboards are less data centric but more informational.
– They may include more textual information like alerts, recent activities, messages, updates,
to-do list, user profiles, etc., and convenience functional blocks like quick search, inline
actions.
• The dashboards we concern in this lecture notes are more data driven,
visualization intensive, interactive, and directly support data exploration,
reporting, and decision making.
6
What Dashboard is NOT
• NOT a one-time creation to display data
–
It is supposed to be used regularly and optimized for automated data
feeding and update
– Users of the dashboard eventually learn the dashboard and are familiar with
the dashboard
• NOT just a simple stack of charts
–
It is an integral user interface to show data and information
–
It is a whole piece
• Serving a common goal
• Consistent style and interaction
• Organized and clean
–
It shows branding and organizational image
• NOT a lengthy and detailed report
– Keep it simple and focused with the most important data and information
• NOT a place to showcase uniqueness and complexity
– Simple and direct to help users navigate and analyze
– Use standard or commonly-understood visualizations rather than unique
ones
7
http://www.bidashboard.org/benefits.html
The Values of a Dashboard
• Provides a one-place presentation of critical information,
so users can quickly understand data and respond
quickly at one place.
– Saves time over running multiple reports.
• Allows decision makers to see a variety of data that
affects their divisions or departments
– This allows decision makers to focus only on the items over
which they have control
– The dashboard is generally customized for each user
• Allows all users to understand the analytics. For non-
technical users, dashboards allow them to participate and
understand the analytics process by compiling data and
visualizing trends and occurrences.
• More: http://www.bidashboard.org/benefits.html
8
8
https://systems.jhu.edu/research/public-health/ncov/
https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6
https://gosa.georgia.gov/report-card-dashboards-data/data-dashboards
https://www.itdashboard.gov/
https://data.boston.gov/
https://www.fairfaxcounty.gov/demographics/fairfax-county-general-overview
http://www.google.com/appsstatus
https://www.nytimes.com/elections/2016/results/president
https://www.atptour.com/en/stats
https://public.tableau.com/profile/dash7070#!/vizhome/SummerOlympicsDashboard/Dashboard2
http://www.idashboards.com/solutions/
https://www.klipfolio.com/resources/dashboard-examples
Dashboard Uses
• Dashboards are widely used in all businesses and organizations internally for various operation
monitoring, performance management, and business intelligence/analytics activities at various
levels:
– Operations dashboard
– Financial dashboard
– Performance dashboard
– Sales dashboard
– Strategy dashboard
–
IT dashboard
• Also commonly used for public information exploration and communication:
– Public health: https://systems.jhu.edu/research/public-health/ncov/
– https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6
– Education: https://gosa.georgia.gov/report-card-dashboards-data/data-dashboards
– Government publication of information
•
https://www.itdashboard.gov
•
https://data.boston.gov/
•
https://www.fairfaxcounty.gov/demographics/fairfax-county-general-overview
– System status: http://www.google.com/appsstatus
– Election: https://www.nytimes.com/elections/2016/results/president
– Sports: https://www.atptour.com/en/stats
– https://public.tableau.com/profile/dash7070#!/vizhome/SummerOlympicsDashboard/Dashboard2
• More examples
– http://www.idashboards.com/solutions/
– https://www.klipfolio.com/resources/dashboard-examples
ELEMENTS OF A DASHBOARD
10
Dashboard = Data/Information
+ Visualizations
+ UI
Elements of a Dashboard
• Data/Information
– It’s the contents and insights delivered
– It’s the backbone of the dashboard
• Visual
– Data visuals (charts, map, etc.) provide effective perception of data
• User interface
– User interface is the gateway to use a software application
– A dashboard is a type of software application, or a part of a software
application
– a clean UI that unifies all elements to work together as a whole
– supporting interactions as needed
11
Dashboard = Data/Information + Visual + UI
1. Major Types of Data on a Dashboard
• The data/information on a dashboard is what a user mostly concerns and would
like to get that information quickly on a regular basis.
• Metrics (or measures, indicators)
– numerical values that directly reflect the status of an activity, such as sales, enrollment,
etc., or calculated based on a formula
• Key Performance Indicators (KPI)
– A KPI is simply a metric that is tied to a target. Used intensively for performance related
goals.
• Supporting data
– Maybe descriptive attributes that provide more context to understand or explore data
• Textual information
–
(not typical but can be there) – see the example later
12
Metrics and KPIs may be a set of single values or grouped in a set to reveal more
details and context
• a single value that reflects a key metric, e.g. the profit and revenue of the
latest quarter.
or
• a set of values to reflect trends, distributions, forecasts, or other kind of
comparisons.
https://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/
2. Visualizations on a Dashboard
• Dashboards are visually intensive by definition
• A dashboard generally contains a variety of visual views of data,
including:
– Charts, diagrams, maps
– Dashboard-specific visuals such as KPI card, gauge, or standalone
numbers: visualized with special formatting or contain embedded
visuals.
– Simple data tables: incorporating conditional formatting or other
embedded visuals.
• Not typically on a dashboard
– Complex graphs and infographic techniques may be perfect for
powerful presentation, but not always for a dashboard (especially
business-oriented dashboard).
– Complex tables with nesting structure, detailed and crowded data
13
13
Images from
https://blog.itcentralstatio
n.com/how-to-
successfully-manage-bi-
dashboard-projects/
https://web.archive.org/web/20180825151532/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a-dashboard.aspx
A Dashboard Example
14
Originally from
https://web.archive.org/web/20180825151532/http://www.dashboardinsight.com/articles/digital-
dashboards/fundamentals/what-is-a-dashboard.aspx
Hero Chart
Dashboard Header: Logo, Title, etc. – an important UI element
Standalone
single-value
KPI
Embedded
visual
Textual info
Simple table with
embedded visuals
Chart
KPI
Card
https://www.datapine.com/blog/interactive-dashboard-features/
Another Example
15
https://www.datapine.com/blog/interactive-dashboard-features/
Chart
Dashboard Header
Single
performance
value
A not-too-
complicated table
with some details
Chart
A left-right even
layout
KPI
Card
Supporting
descriptive
attributes
https://datavizproject.com/data-type/number/
https://www.geckoboard.com/blog/designing-and-building-dashboards-the-ultimate-guide-to-data-visualizations-part-2/
https://datavizproject.com/data-type/angular-gauge-chart/
https://datavizproject.com/data-type/percentage-grid/
https://datavizproject.com/data-type/bullet-graph/
https://datavizproject.com/data-type/progress-bar/
https://investor.bankofamerica.com/fixed-income
https://material.io/components/cards/
https://public.tableau.com/app/profile/adam.e.mccann/viz/KPIOptions/AllDaKPIs
KPI Card
16
• KPI card features a standalone styled numeric value
– Commonly used for presenting important values like KPI (key performance
indicator)
• Styles and examples
– Single number without much visual (maybe with some icon or title)
https://datavizproject.com/data-type/number/
– Added context data https://www.geckoboard.com/blog/designing-and-building-
dashboards-the-ultimate-guide-to-data-visualizations-part-2/
• KPI can also be presented using KPI performance charts or chart good for
individual numbers like
– Gauge chart https://datavizproject.com/data-type/angular-gauge-chart/
– Waffle chart https://datavizproject.com/data-type/percentage-grid/
– Bullet graph https://datavizproject.com/data-type/bullet-graph/
– Pie/donut chart
– Progress bar https://datavizproject.com/data-type/progress-bar/
https://investor.bankofamerica.com/fixed-income
Fixed Income Investor Materials 2022Q3
Card is Google’s term to
describe a way to display
multiple piece of
data/information as a
visually cohesive unit
• A card is like a small
space with more complex
layout within.
• A popular concept to
design information
presentation for web and
mobile applications.
• Reference:
https://material.io/compo
nents/cards/
https://public.tableau.com/app/profile/adam.e.mccann/viz/KPIOptions/AllDaKPIs
http://visualnomics.com/ArabUprising/
https://www.arcgis.com/apps/dashboards/bda7594740fd40299423467b48e9ecf6
https://d5t6zpljmdkvz.cloudfront.net/
http://luminocity3d.org/
https://www.globalforestwatch.org/map
https://www.youtube.com/watch?v=Ri5HyHp5-_I
Maps on Dashboards
• Map is a very common visual component on location related
dashboards.
• Maps can be in three major styles on a dashboard
1. Small map: just like one of the charts on a dashboard
– Examples:
• http://visualnomics.com/ArabUprising/
2. Enlarged: an enlarged main visual component that drives major data
exploration and analysis.
– Examples:
• https://www.arcgis.com/apps/dashboards/bda7594740fd40299423467b48e9ecf6
• https://d5t6zpljmdkvz.cloudfront.net/
3. Complete screen: can occupy the complete screen
– Examples:
• http://luminocity3d.org
• https://www.globalforestwatch.org/map
• https://www.youtube.com/watch?v=Ri5HyHp5-_I
17
3. User Interface
• A dashboard is more than just charts!
Dashboard should be treated as a software
application with a user interface (UI); thus, it
follows general UI design principles and best
practices.
• Key elements in dashboard user interface
– Layout: the placement and arrangement of charts,
cards, tables and other UI elements on the screen;
header, footer, etc.
– Navigation (menu) system: this includes in-page
navigation and cross-page navigation
– Styles and themes: font, color, design style, image,
logo, icons, background, etc.
18
https://searchbusinessanalytics.techtarget.com/definition/business-intelligence-dashboard
UI Features Example
19
Dashboard Header: Title,
User, Action Buttons, etc.
A 3 by 3 grid layout
A set of
dashboard, each
with a focus
Main menu with links
to other contents.
Action buttons
for general app
functionalities
https://searchbusinessanalytics.techtarget.com/definition/business-intelligence-dashboard
App name: the
app embodies
the dashboard
How about Interactivity?
•
Interactivity is the capability to support user input actions that
may dynamically change the view of the dashboard.
– Interaction can be viewed as part of UI, generally; but some people
view UI is more static.
• A dashboard may not be interactive at all, although many modern
dashboards provide interaction features.
• Typical interactions
– Select options
– Set parameter values
– Filter and sort data
– Drill-up, drill-down, drill-across
– View switching
– Zoom-in and zoom-out
– Hover to get details in a pop-up
20
Interactivity will be covered with more
details in module 10.
DASHBOARD TYPES
21
http://prezi.com/qvhyfup5z7yz/dashboard-design-making-reports-pop/
https://www.datapine.com/blog/strategic-operational-analytical-tactical-dashboards/
http://www.bidashboard.org/types.html
http://www.klipfolio.com/resources/articles/operational-analytical-bi-dashboards
Levels/Types of Dashboards
Operational – monitoring:
Operational real time view of
important indicators.
Tactical – analysis or data
exploration: Provides optimized UI
and information seeking and
navigation feature among data and
metrics to support data exploration
or analysis.
Strategic – decision support:
As a high-level summary; may be at
the top executive level (strategic) or
departmental (tactical) levels.
22
Image from http://prezi.com/qvhyfup5z7yz/dashboard-design-making-reports-pop/
More about dashboard levels:
• https://www.datapine.com/blog/strategic-operational-analytical-tactical-dashboards/
• http://www.bidashboard.org/types.html
• http://www.klipfolio.com/resources/articles/operational-analytical-bi-dashboards
Each of them shares common attributes of dashboards (data + visualization + UI),
but each of them has some different purpose, data, and design best practices.
https://status.azure.com/en-us/status
http://status.aws.amazon.com/
https://status.cloud.google.com/
https://www.google.com/appsstatus/dashboard/
https://www.klipfolio.com/gallery/dashboards/google-analytics-daily-overview
https://finviz.com/map.ashx
https://www.usdebtclock.org/world-debt-clock.html
Operational Dashboard
• Operational dashboards display real time or near real time data that facilitate the operational
side of a business, monitoring operational activities and statuses as they are happening.
•
Features
–
Important operational indicators are often based on real-time or near real-time data.
– Features detailed leaf level data without much analysis
– Focus on leaf level unit summary
– Focus on current status or performance
– Action oriented: enable to alert or address issues in time
• Examples
– https://status.azure.com/en-us/status
– http://status.aws.amazon.com/
– https://status.cloud.google.com and https://www.google.com/appsstatus/dashboard/
– https://www.klipfolio.com/gallery/dashboards/google-analytics-daily-overview
– https://finviz.com/map.ashx
– https://www.usdebtclock.org/world-debt-clock.html
• Most of the operational software include their own dashboard modules. The use of this module
bypasses the problem of load time, but normally with a loss of functionality.
•
The design of this type of dashboards usually focuses on highly important metrics with simple
visuals. Common examples include services status monitoring (call center, reservation, etc.),
inventory monitoring, server up-time and utilization, etc.
23
https://www.perceptualedge.com/blog/?p=1466
https://www.perceptualedge.com/blog/?p=1374
Operational Dashboard Examples
24
https://www.perceptualedge.com/blog/?p=1466
https://www.perceptualedge.com/blog/?p=1374
Analytical Dashboard
• Analytical dashboard is a tactical level dashboard, focusing on presenting (visualizing)
analytical techniques and results.
– Tactical level: mainly support business process and analysis at or across a specific functional level over
a period. It is primarily used for intensive data exploration and analysis, used by data analysts and
researchers.
– Main purpose: the purpose is to analyze data and explore patterns through an interactive process. The
dashboard usually centers around a key topic or question, providing more details and context
(comparison, history, forecast, benchmarking, etc.)
–
It supports various analytical methods including high level analytics such as what if, trending, forecasting,
etc. This is a bit different from traditional dashboards, which are primarily used for quick scanning and
understating of key metrics.
– Some separately categorizes it as “visual analysis tools” rather than a type of dashboard. Nonetheless,
the design of analytical dashboards is similar to general dashboards to focus on data, visualization, and
UI design.
• UI and functional features
– Very often, there is a main visualization, which is usually a single (or a set of) component that occupies a
big portion of the screen as the main UI component, with a large number of data points visualized. Users’
major activity will be repeatedly setting parameters and examining the dynamically updated visuals.
– The visualization may be more complex with multiple visual layers
–
It provides abundant parameter settings, selections, user inputs, and other UI controls to manipulate the
data and visualizations. The number of parameter setting combinations can be quite big.
–
It is not just to visual key metrics, but to visualize patterns, trends, and other complex relationships
among data.
–
It uses large amount of detailed level data.
–
It is highly interactive: it fits on one screen, but there are methods to get to additional spaces like
zooming, scrolling, pop-up, or navigate to additional pages or screens.
– Some may provide ad-hoc querying and dynamic visualization generation
25
https://www.tradingview.com/chart/
https://stockcharts.com/h-sc/ui?s=XOM
https://www.gurufocus.com/stock/PARA/summary
http://almuthmerkel.com/SMEX/
https://www.visualcalc.com/retirement-planning
https://www.informationisbeautifulawards.com/showcase/4115-2018-fifa-world-cup-match-explorer
https://www.tradingview.com/chart/
Analytical Dashboard Examples
• More examples
– https://www.tradingview.com/chart/
– https://stockcharts.com/h-sc/ui?s=XOM
– https://www.gurufocus.com/stock/PARA/summary
– http://almuthmerkel.com/SMEX/
– https://www.visualcalc.com/retirement-planning
– https://www.informationisbeautifulawards.com/showcase/4115-2018-fifa-world-cup-match-explorer
26
https://www.tradingview.com/chart/
Big main visual area
Interactive
visual
analytical
tools
Large
number of
data points
Additional
descriptive
details
Detailed
data at hand
Lots of indicators
and metrics
https://theanalyst.com/na/2021/10/nba-stats-and-player-projections/
https://www.georgiainsights.com/esser-budget.html
https://georgiainsights.gadoe.org/Dashboards/Pages/Literacy.aspx
https://www.tableau.com/data-insights/dashboard-showcase/explore-nationwide-us-census-engagement
https://www.google.com/publicdata/directory
https://www.gapminder.org/tools/#$chart-type=bubbles
https://ourworldindata.org/explorers/global-food
https://ourworldindata.org/explorers/coronavirus-data-explorer
https://www.infragistics.com/blazor-apps/usa-elections
https://elections.huffingtonpost.com/2018/results/hq
https://d5t6zpljmdkvz.cloudfront.net/
https://www.productchart.com/smartphones/
https://finviz.com/map.ashx
https://www.google.com/publicdata/explore?ds=j0r9lucsi4q1d_
https://public.tableau.com/app/profile/levy2725/viz/2015-163-and-D-ness/Dashboard1
https://public.tableau.com/app/profile/harshit.shah/viz/AdventureWorks-SalesDashboard/Dashboard1
Data/Info Exploration Dashboard
•
Focusing on interactive exploration of large and complex data sets from multiple perspectives,
but less analytical capabilities
– Also provide abundant parameters and filters
– Usually with a visual/chart or map that can show a large number of items, commonly used chart type
include scatter plot/perceptual map, and map
– Accompanied or supplemented by a data table
– Data are more descriptive (displaying common KPIs, not calculation or analytical methods.)
– Many are considered dashboard style reports
–
It is highly interactive and usually provides abundant settings and configurations (for adjusting factors
and parameters) including filtering or sorting options.
27
Originally from https://www.georgiainsights.com/georgia-school-closures.html
•
Examples
–
https://theanalyst.com/na/2021/10/nba-stats-and-player-
projections/
–
https://www.georgiainsights.com/esser-budget.html
–
https://georgiainsights.gadoe.org/Dashboards/Pages/Litera
cy.aspx
–
https://www.tableau.com/data-insights/dashboard-
showcase/explore-nationwide-us-census-engagement
–
Google public data explorer
https://www.google.com/publicdata/directory
–
https://www.gapminder.org/tools/#$chart-type=bubbles
–
https://ourworldindata.org/explorers/global-food
–
https://ourworldindata.org/explorers/coronavirus-data-
explorer
–
https://www.infragistics.com/blazor-apps/usa-elections
–
https://elections.huffingtonpost.com/2018/results/hq
–
Map based:
•
https://d5t6zpljmdkvz.cloudfront.net/
•
http://luminocity3d.org/WorldCity
–
https://www.productchart.com/smartphones/
–
https://finviz.com/map.ashx
–
https://www.google.com/publicdata/explore?ds=j0r9lucsi4q
1d_
–
https://public.tableau.com/app/profile/levy2725/viz/2015-
163-and-D-ness/Dashboard1
–
https://public.tableau.com/app/profile/harshit.shah/viz/Adve
ntureWorks-SalesDashboard/Dashboard1
https://finviz.com/bubbles.ashx
Exploratory Style Dashboard Example
28
https://finviz.com/bubbles.ashx
Many settings
and choices.
Large quantity of data
points for exploration
More details on
hovering on any circle.
https://www.atptour.com/en/rankings/singles
https://www.klipfolio.com/resources/dashboard-examples/sales
Leader/Ranking Board
• Leader board is a type of exploration type tactical level
dashboard that focuses on ranking and comparison among units.
– It does not offer many details but focuses on key metrics that impact
the ranking and comparison.
• Examples
– https://www.atptour.com/en/rankings/singles
– https://www.klipfolio.com/resources/dashboard-examples/sales
29
https://www.gurufocus.com/stock/PARA/summary
Analytical + Exploratory Dashboard
• A dashboard can be both analytical and
exploratory
– Large number of metrics
– Rich exploration of metrics
– Part of the dashboard can be highly interactive
– Include abundant analysis method and results
– Because of its rich content, it may go beyond just
one screen, or may have a set of dashboards
• Example:
– https://www.gurufocus.com/stock/PARA/summary
30
Strategic (Executive) Dashboard
• Summary/overview dashboards provides high level summary of business performance
indicated by KPIs.
– Strategic dashboard is a typical example of summary/overview dashboard at the strategic or executive
level, which specifically concerns about high-level overview of the state of the business and strategy
goals; and used for strategy planning and development.
•
Features
– Monitor the execution of strategic goals and summary of high-level reports, commonly using balanced
scorecards or a strategy map
–
typically provide the KPI’s (Key Performance Indicators) that a companies executive team track on a
periodic (daily, weekly or monthly basis).
– a high-level overview of the state of the business together with the opportunities the business faces.
– This dashboard typically provides less detail or context than other dashboards.
– This dashboard type is not good for more complex why and how questions because it is not good for
exploratory analytics.
• Commonly used visual forms in performance dashboards
– Traffic lights coloring system
– KPI card
– Other performance charts like bullet chart or gauge
•
Two typical examples
– Executive KPI dashboard
– Strategy map dashboard
31
https://www.boston.gov/cityscore
https://public.tableau.com/app/profile/adam.e.mccann/viz/5TypesofDashboards/1KPIDashboard
https://public.tableau.com/profile/adam.e.mccann#!/vizhome/5TypesofDashboards/1KPIDashboard
KPI Dashboard
• KPI dashboard is a kind of strategic dashboard centered around KPIs.
–
It provides simple and direct views of KPIs without complex charts or much interactivity.
– May use KPI cards, KPI tables, scorecard tables, or set of bullet graphs or gauges.
• Examples:
– https://www.boston.gov/cityscore
– https://public.tableau.com/app/profile/adam.e.mccann/viz/5TypesofDashboards/1KPIDashb
oard
32
https://public.tableau.com/profile/adam.e.
mccann#!/vizhome/5TypesofDashboards/
1KPIDashboard
https://balancedscorecards.com/strategy-map/
https://www.kpisuite.com/en/kpisuite-platform/sbalansirovannaya-sistema-pokazatele/
Strategy Map Dashboard
• A strategy map is a diagram that shows
your organization's strategy on a single
page. It’s great for quickly
communicating big-picture objectives to
everyone in the company.
– https://balancedscorecards.com/strateg
y-map/
• A strategy map dashboard can
visualize balanced scorecard systems
33
https://www.kpisuite.com/en/kpisuite-platform/sbalansirovannaya-
sistema-pokazatele/
https://www.usdebtclock.org/world-debt-clock.html
http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html
Other Types of Dashboard
• Real time dashboard
– https://www.usdebtclock.o
rg/world-debt-clock.html
• Refer to
http://duelingdata.blogspot.
com/2019/01/5-types-of-
dashboards.html
34
https://www.klipfolio.com/blog/starter-guide-to-dashboards
Choosing Dashboards based on
Business Reporting Requirements
Business Questions
Implications
Operational Dashboards Strategic Dashboards
Tactical Dashboards
What business problem(s)
we are trying to solve?
Identify what is driving the
need for a dashboard
solution and to define the
scope of the project.
Data awareness and time
sensitive data
Top-line organizational
KPIs
Trends or deeper insights
Who will be using the
dashboards?
Design, features and
required training will
change based on the role
of the dashboard user.
Line of business
managers; business users
Executives; Directors
Business analysts; data
analysts; tech-savvy
managers and executives
What gaps exist in our
performance?
The identification of gaps
can be used to develop a
set of metrics that will be
used as the basis for the
development of the
dashboard.
Intra-daily performance.
Monthly, quarterly
performance
Performance issues,
weekly performance
What are our goals?
Before developing
metrics, it becomes
important to identify what
you hope to achieve by
using dashboards as well
as align those goals to the
department’s or
company’s overall
strategy.
Employee awareness and
tracking against goals
Strategic goals, such as
achieving KPI targets
Analytics goals, such as
visibility into key process
35
https://www.klipfolio.com/blog/starter-guide-to-dashboards
https://web.archive.org/web/20180825151532/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a-dashboard.aspx
Dashboard Alternatives
• There are three tools that are similar to dashboards
and also use visualizations heavily
1. Report
2. Scorecard
3. Visual analysis/exploration tool
4. Story
• Many of the above can be considered some style of
dashboard with a different focus.
• Some differences are summarized in the article
“What is a dashboard”
– https://web.archive.org/web/20180825151532/http://www
.dashboardinsight.com/articles/digital-
dashboards/fundamentals/what-is-a-dashboard.aspx
36
https://www.goodcarbadcar.net/usa-auto-industry-total-sales-figures/
https://www.boston.gov/sites/default/files/file/2023/02/Boston_COVID-19_Vaccination_Report_03Feb23.pdf
https://investor.vanguard.com/investment-products/etfs/profile/voo
https://www.goodcarbadcar.net/2023-us-midsize-suv-sales-figures/
https://www.usaspending.gov/state/alabama/latest
https://schoolgrades.georgia.gov/kittredge-magnet-school
http://www.crazybikes.com/mrc/CRAZYBIKES.R00090s
https://www.trueup.io/layoffs
https://theanalyst.com/na/2021/10/nba-stats-and-player-projections/
Report
•
Traditional reports contain detailed data in a tabular format and typically display numbers and text only.
–
It is geared towards people who need data rather than a direct understanding or interpretation of data.
–
Its purpose is mainly for printing (with style and themes for presentation or communication) or exporting (raw data).
•
Typical report examples:
–
https://www.goodcarbadcar.net/usa-auto-industry-total-sales-figures/
–
https://www.boston.gov/sites/default/files/file/2023/02/Boston_COVID-19_Vaccination_Report_03Feb23.pdf
–
https://investor.vanguard.com/investment-products/etfs/profile/voo
–
https://www.goodcarbadcar.net/2023-us-midsize-suv-sales-figures/
–
https://www.usaspending.gov/state/alabama/latest
–
https://schoolgrades.georgia.gov/kittredge-magnet-school
–
http://www.crazybikes.com/mrc/CRAZYBIKES.R00090s
–
https://www.trueup.io/layoffs
–
https://theanalyst.com/na/2021/10/nba-stats-and-player-projections/
37
https://dph.georgia.gov/covid-19-status-report
https://simplywall.st/stocks/us/media/nasdaq-googl/alphabet
https://www.boston.gov/government/cabinets/boston-public-health-commission/covid-19-boston#wastewater-reports
https://www.georgiainsights.com/esser-budget.html
https://public.tableau.com/app/profile/dash7070/viz/SummerOlympicsDashboard/Dashboard2
https://www.cityhealthdashboard.com/ga/atlanta/city-overview
https://www.itdashboard.gov/itportfoliodashboard
https://analytics.boston.gov/app/imagine-boston
https://www.georgiainsights.com/technology-inventory.html
Report or Dashboard?
• Modern reports can be interactive/dynamic (with filters and drill-downs) and visual rich, but the
focus is still on metrics and detailed data.
– Reports also do not emphasize one-screen requirement.
– Sometimes the distinction is a bit blurred in some practical cases.
• Visual rich report
– https://dph.georgia.gov/covid-19-status-report
– https://simplywall.st/stocks/us/media/nasdaq-googl/alphabet
– https://www.boston.gov/government/cabinets/boston-public-health-commission/covid-19-
boston#wastewater-reports
• A dashboard-style “report”, or a report-style “dashboard”, tries to present data in one screen just
like a dashboard (a data exploration dashboard) but with a focuses on data exploration and
communication rather than monitoring and decision support
–
It mimics the dashboard one-screen style, but it mainly presents detailed data.
– Examples
– https://www.georgiainsights.com/esser-budget.html
– https://public.tableau.com/app/profile/dash7070/viz/SummerOlympicsDashboard/Dashboard2
• Dashboard or report?
– https://www.cityhealthdashboard.com/ga/atlanta/city-overview
– https://www.itdashboard.gov/itportfoliodashboard
– https://analytics.boston.gov/app/imagine-boston
– https://www.georgiainsights.com/technology-inventory.html
38
https://web.archive.org/web/20180517172348/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/a-closer-look-at-scorecards-and-dashboards.aspx
Scorecards
• A scorecard is special type of dashboard typically with a tabular display of measures/KPIs and
their respective targets with visual indicators to see how each measure is performing against
their targets at a glance.
– Scorecards are mainly used for performance monitoring with data directly related to measure, target,
status etc.
– Because of its uniqueness, it is viewed by some as special type of dashboard when used independently.
• Key characteristics
– Scorecards are mainly used for performance monitoring with data directly related to measure, target,
status etc.
–
It mainly uses a tabular layout with embedded visuals like conditional formatting, sparklines (line, bar, or
bullet graphs).
– Limited interactivity (mainly on filtering and sorting to find score items)
–
It is commonly used in another tool like dashboards and visual analysis tools.
• More information
– https://web.archive.org/web/20180517172348/http://www.dashboardinsight.com/articles/digital-
dashboards/fundamentals/a-closer-look-at-scorecards-and-dashboards.aspx
39
Example of Scorecard Style Dashboard
40
Scorecard section
(with KPIs listed)
Additional data
on the right
Typical
comparisons
to targets
Extreme Scorecard
• An actual example of a giant score card
(blurred to hide details)
41
https://www.tradingview.com/chart/
https://ibondcalc.info/
https://dqydj.com/net-worth-by-age-calculator-united-states/
https://www.visualcalc.com/retirement-planning
Visual Analysis Tool
• A visual analysis tool is functionally similar to a highly interactive
analytical dashboard
– Also provides user selections, parameters, analytical tools, etc.
– Also uses charts and other visuals to present results
– Some use visualizations intensively to drive data analysis (termed as visual
analytics).
–
It is typically used by technically savvy users like data analysts and
researchers.
• But it may not look like a dashboard or not arranged as a dashboard
– Generally, do not have to be one screen
– May embedded with other content or applications
• Example
– https://www.tradingview.com/chart/
– https://ibondcalc.info
– https://dqydj.com/net-worth-by-age-calculator-united-states/
– https://www.visualcalc.com/retirement-planning
42
https://egerber.mech.northwestern.edu/wp-content/uploads/2015/02/Narrative_Visualization.pdf
https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study
https://ourworldindata.org/energy-offshoring
https://projects.fivethirtyeight.com/2020-swing-states/
https://www.pewresearch.org/politics/2021/06/30/behind-bidens-2020-victory/
https://storymaps.arcgis.com/stories/f74a8fbad837435b8e901cc9c04aa345
https://public.tableau.com/profile/natcen.social.research#!/vizhome/WhatwillBrexitmeantotheUK/Home
Story
•
Stories are predefined and scripted interaction and interpretation of data visualizations
– Or, the data and visualizations drive the story
–
By allowing users to interact with data presented in a clearly-visual manner, a data-intensive ‘story’ becomes visible.
– Many visualizations in stories are more leaning toward information graphics, i.e., they are more vivid and varied in style.
– Narrative Visualization: Telling Stories with Data: https://egerber.mech.northwestern.edu/wp-
content/uploads/2015/02/Narrative_Visualization.pdf
•
Usage
–
The use of story driven by data visualization is commonly seen in journalism or journalism style report; and some have risen
in business’s research report that is published to the public for public communication. In this type of report, narration is the
main thread and visualizations are playing the supporting role.
•
Two major story styles
– Narration driven: interactive visualizations are embedded within paragraphs of texts, article style
– Dashboard driven: dashboard style, the story flows based on sequencing of visuals and dashboards.
•
Some examples:
–
Journalism report:
• Bussed Out by the Guardian https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-
homeless-people-country-study
•
https://ourworldindata.org/energy-offshoring
•
https://projects.fivethirtyeight.com/2020-swing-states/
•
https://www.pewresearch.org/politics/2021/06/30/behind-bidens-2020-victory/
–
Public research report
•
https://storymaps.arcgis.com/stories/f74a8fbad837435b8e901cc9c04aa345
–
Analytical
•
https://public.tableau.com/profile/natcen.social.research#!/vizhome/WhatwillBrexitmeantotheUK/Home
We do not cover story in depth in IT 7113, but it can be a very good research topic area for class project.
https://www.edocr.com/v/9oqqrzoo/jgzheng/designing-dashboards
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Designing and Building Dashboards
• Elements of Dashboard Design: the design of the
dashboard involves these six elements:
– Goals and objectives definition
– Data/information design
– Visualization design
– UI design
– Interaction design
– Supporting features (non-functional)
design
– +1 Technology and tool selection
• The design of dashboard applications share many
principles in general UI design
– clarity, efficiency, simplicity, consistency
44
The next learning module will cover
more about dashboard design
principles, patterns, and
development best practices.
• https://www.edocr.com/v/9oqqr
zoo/jgzheng/designing-
dashboards
• https://www.edocr.com/v/pb9del
zd/jgzheng/dashboard-layout
http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/
https://www.edocr.com/v/9oqqrzoo/jgzheng/designing-dashboards
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Attributes of a Good Dashboard
• Content
– Data and metrics are the focus, not visuals
– Provide relevant context and different perspectives
• Layout and position
– One page/screen fit
– Clean and organized layout with clear logical groupings
– Guide user focus and attention using pre-attentive and Gestalt principles
– Apply layout and positing conventions
• Simplicity
– “The world of data visualization is changing rapidly, with the trend to use complex graphs
and infographic techniques to visualize information in an impactful way. Also the concept of
big data is changing our relationship with the world of information. That’s perfect for
powerful presentation, but not always for a dashboard.” originally from
http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/
– Same as charts: don’t cram and jam, dense but not cluttered
• Style
– Beautiful (but not necessarily colorful); with a theme or style
– The dashboard needs to be integrated into the organization, so it is important to consider
corporative aspects: logos, colors, fonts, menu, etc. Are there similar systems? If so, use a
similar look and feel.
45
The next dashboard module will cover
more about dashboard design principles
and layout patterns and best practices.
•
https://www.edocr.com/v/9oqqrzoo/jg
zheng/designing-dashboards
•
https://www.edocr.com/v/pb9delzd/jg
zheng/dashboard-layout
https://www.tableau.com/data-insights/dashboard-showcase
https://community.fabric.microsoft.com/t5/Data-Stories-Gallery/bd-p/DataStoriesGallery
https://plot.ly/dash/
https://www.youtube.com/watch?v=eWyGM2KejT4
https://www.youtube.com/watch?v=wrho2x6rSNA
https://www.datapine.com/articles/best-dashboard-software-features
Dashboard Tools
• Many visualization tools and BI tools supports the creation of dashboards.
• Enterprise BI platforms usually provide dashboard service as part of the
platform as well
– SQL Server Reporting Service, Cognos, Microstrategy, ArcGIS, etc.
• Visual analysis tools featuring a dashboard component
– Tableau, Power BI, Qlik View, Spotfire, Klipfolio, etc.
– Tableau Dashboard Showcase
– Data Stories Gallery - Microsoft Fabric Community
• Programming libraries and frameworks
– https://plot.ly/dash/
• Cloud services focusing on reporting and dashboards
–
iDashboard, Dundas, DataPine, Zoho
• Excel is just versatile and flexible to do many things
– https://www.youtube.com/watch?v=eWyGM2KejT4
– https://www.youtube.com/watch?v=wrho2x6rSNA
46
Extended reading:
https://www.datapine.com/articles/best-dashboard-software-features
https://resources.useready.com/blog/mad-framework-for-actionable-dashboards/
http://www.b-eye-network.com/blogs/eckerson/archives/2011/07/differentiating.php
Differentiating Dashboard Products
• The MAD (Monitor-Analyze-Detail) framework generally corresponds to the 3
levels of dashboard
– https://resources.useready.com/blog/mad-framework-for-actionable-dashboards/
•
It can be used to differentiate and select dashboard products
47
Image originally from http://www.b-eye-
network.com/blogs/eckerson/archives/2011/07/differentiating.php
IT’s Role in Dashboard Development
• Modern advanced and interactive reports and dashboards are driven by
the need for technology and tool support (design,
development/programming, automation, delivery, and administration).
• Many self-service BI and dashboard tools provide easy to use tools for
power users to create their own dashboards quickly
• Traditional centralized IT is alleviated but still needed.
• Major roles of IT
– Manage data sources and data sets
– Data engineering: build data flow and pipelines; provide support in data
preparation and other data engineering tasks
– Design and develop common and critical dashboards for general use;
develop more advanced dashboard based on need
– Develop dashboard/report templates
– Develop and maintain the general BI report/dashboard delivery architecture.
– Manage and admin dashboard systems, or BI systems that contain a
dashboard or reporting sub-systems
– Train users how to use reports and dashboards; provide necessary
technical support for power users to create ad hoc dashboards and reports
48
https://databox.com/data-dashboard
http://www.perceptualedge.com/articles/ie/dashboard_confusion.pdf
https://www.luzmo.com/blog/dashboard-types-strategic-operational-tactical
Key Readings and Resources
• What is a Data Dashboard? Definition,
Benefits, and Examples
https://databox.com/data-dashboard
• Stephen Few Dashboard Confusion:
http://www.perceptualedge.com/articles/ie/da
shboard_confusion.pdf
• Dashboard Types Guide: Strategic,
Operational, Tactical + More
https://www.luzmo.com/blog/dashboard-
types-strategic-operational-tactical
https://adniasolutions.com/dashboard-design-principles/introduction-to-dashboards/
https://www.tableau.com/learn/articles/dashboards/what-is
https://www.klipfolio.com/blog/what-is-a-data-dashboard
https://www.datapine.com/blog/digital-dashboard-definition-and-examples/
https://www.datapine.com/blog/interactive-dashboard-features/
https://dataschool.com/how-to-design-a-dashboard/what-is-a-dashboard/
https://web.archive.org/web/20180825151532/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a-dashboard.aspx
http://www.amazon.com/gp/product/1938377001/
https://dataschool.com/how-to-design-a-dashboard/
https://www.tableau.com/data-insights/dashboard-showcase
https://www.idashboards.com/solutions/
https://www.klipfolio.com/resources/dashboard-examples
https://www.geckoboard.com/learn/dashboard-examples/
https://www.datapine.com/dashboard-examples-and-templates/
https://www.tableau.com/solutions/business-dashboards
https://www.klipfolio.com/resources
http://www.perceptualedge.com/library.php
http://www.bidashboard.org/
https://www.interaction-design.org/courses/information-visualization-getting-dashboards-right
https://www.geckoboard.com/best-practice/dashboard-design/
https://www.edocr.com/v/9oqqrzoo/jgzheng/designing-dashboards
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
https://www.justinmind.com/ui-design/dashboard-design-best-practices-ux
Additional Good Resources
•
Introduction articles
–
https://adniasolutions.com/dashboard-design-principles/introduction-to-dashboards/
–
https://www.tableau.com/learn/articles/dashboards/what-is
–
https://www.klipfolio.com/blog/what-is-a-data-dashboard
–
https://www.datapine.com/blog/digital-dashboard-definition-and-examples/
–
https://www.datapine.com/blog/interactive-dashboard-features/
–
https://dataschool.com/how-to-design-a-dashboard/what-is-a-dashboard/
– What is a dashboard? https://web.archive.org/web/20180825151532/http://www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-
a-dashboard.aspx
•
Books
–
“Information Dashboard Design” 2nd, by Stephen Few, 2013, http://www.amazon.com/gp/product/1938377001/
–
“Business Dashboards: A Visual Catalog for Design and Deployment”, by Nils Rasmussen, et al. ,Wiley, 2009, ISBN 0470413476
–
How to Design a Dashboard https://dataschool.com/how-to-design-a-dashboard/
•
More examples
–
https://www.tableau.com/data-insights/dashboard-showcase
–
https://www.idashboards.com/solutions/
–
https://www.klipfolio.com/resources/dashboard-examples
–
https://www.geckoboard.com/learn/dashboard-examples/
–
https://www.datapine.com/dashboard-examples-and-templates/
•
Learning resources
–
https://www.tableau.com/solutions/business-dashboards
–
https://www.klipfolio.com/resources
–
http://www.perceptualedge.com/library.php
–
http://www.bidashboard.org
–
https://www.interaction-design.org/courses/information-visualization-getting-dashboards-right
•
Dashboard design
–
Dashboard design: https://www.geckoboard.com/best-practice/dashboard-design/
–
IT 7113 Lecture notes
•
https://www.edocr.com/v/9oqqrzoo/jgzheng/designing-dashboards
•
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
–
https://www.justinmind.com/ui-design/dashboard-design-best-practices-ux
50