lesson 6 visualising and analysing time- oriented data · lesson 6: visualising and analysing...
TRANSCRIPT
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-1
Lesson 6Visualising and Analysing Time-
Oriented Data
Mentor: Dr. Kam Tin Seong
Associate Professor of Information Systems (Practice)
School of Information Systems, Singapore Management University
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
2
Content
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-2
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
3
Content
4
Time-series data
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-3
5
Time-series data
Source: International Monetary Fund (IMF)
• Not all time-series data are in running date series format.
6
Time-series data
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-4
• Not all time-series data are in readily to use format
7
Time-series data
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
8
Content
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-5
9
Playfair’s Commercial and Political Atlas (1786)
Source: http://en.wikipedia.org/wiki/William_Playfair
10
Playfair’s Shewing at One View Chart (1821)
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-6
• Bump Chart shows rank of the most populous cities at each census: 1790-1890
11
Bump Chart
Source: http://bocoup.com/weblog/vintage-visualization-restoration-bump-chart/
12
Scatter Plot of Time-Series
Source: http://www.nytimes.com/interactive/2012/09/17/science/driving-safety-in-fits-and-starts.html?_r=0
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-7
IS415 Geospatial Analytics for Business Intelligence 13
Multiple lines chart
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
14
Content
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-8
• Trend
• Variability
• Rate of change
• Co-variation
• Cycles
• Exceptions
15
Time-series data patterns
• The overall or general direction of change in a series of time-series values is called the trend, which is often displayed in a graph as a trend line.
16
Time-series Patterns: Trend
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-9
• Unclear trend
17
Time-series Patterns: Trend
• The downward trend reveals with the help of the reference line.
18
Time-series Patterns: Trend
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-10
• Visitors from China is in increasing trend and visitor from Japan is in decreasing trend.
19
Time-series Patterns: Trend
• The average degree of change from one point of time to the next throughout a particular span of time
20
Time-series Patterns: Variability
Low variability
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-11
• The average degree of change from one point of time to the next throughout a particular span of time
21
Time-series Patterns: Variability
High variability
• The percentage difference between one value to the next value.
22
Time-series Patterns: Rate of change
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-12
• When two time series relate to one another so that changes in one are reflected as changes in the other, either immediately or later.
23
Time-series Patters: Co-variation
• Cycles are patterns that repeat at regular intervals.
24
Time-series Patterns: Cycles
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-13
• Values that fall outside the norm.
25
Time-series Patterns: Exceptions
?
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
26
Content
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-14
27
Line chart without reference line
28
Line chart with reference line
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-15
29
Line chart with reference region
30
Control Chart
Source: Communicating Data with Tableau
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-16
Visit Trend(total visits of three devices)
32
Candlestick chart
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-17
33
Interpreting Candlestick Chart
34
Interpreting Candlestick Chart
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-18
35
Interpreting Candlestick Chart
36
Candlestick in D3.js
Source: http://bl.ocks.org/abeppu/1074045
http://phrogz.net/js/d3-playground/#StockPrice_HTML
https://github.com/andredumas/techan.js
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-19
• Classic bar chart method
37
Challenge I: Visualising Change between Two Points in Time
• Slope graph method (http://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0003nk)
38
Challenge I: Visualising Change between Two Points in Time
URL:
http://202.161.43.23/IVAG/food/Slope_grap
h/v4_yield_Arial.html
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-20
• Classic line graph method
39
Challenge II: Visualising cyclical patterns
• Cycle plot method
40
Challenge II: Visualising cyclical patterns
Source: http://www.perceptualedge.com/articles/guests/intro_to_cycle_plots.pdf
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-21
• Sunburst diagram method
41
Challenge II: Visualising cyclical patterns
• Classic line graph method
42
Challenge III: Massive Time-series Data
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-22
• Horizon graph method
43
Challenge III: Massive Time-series Data
• The Basic Construct of a Horizon Graph
44
Challenge III: Massive Time-series Data
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-23
45
Challenge IV: Distribution over time
• Boxplot method
46
Challenge IV: Distribution over time
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-24
• To show values that combine to form a whole compare to one another and the whole change through time
47
Challenge V: Part-Whole Relationships
• The ChartJunk method
48
Challenge V: Part-Whole Relationships
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-25
• Stacked bar chart method
49
Challenge V: Part-Whole Relationships
• Stacked area graph method
50
Challenge V: Part-Whole Relationships
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-26
• Multiple line graph method
51
Challenge V: Part-Whole Relationships
• Stream Graph (Stacked Graph)
52
Challenge V: Part-Whole Relationships
http://www.leebyron.com/else/streamgraph/
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-27
• Calendar View
53
Alternative Time-series Data Visualisation methods
Source: http://mbostock.github.io/d3/talk/20111018/calendar.html
http://runnable.com/U5fme1b6WhNHeUcX/calendar-view-using-d3-for-d3-js-and-javascript
• Heatmap-based method: Analysing high-volume cyclical patterns and exceptions
54
Alternative Time-series Data Visualisation methods
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-28
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
55
Content
Interactivity
• Select: mark something as interesting
• Explore: show me something else
• Reconfigure: show me a different arrangement
• Encode: show me a different representation
• Abstract/Elaborate: show me more or less detail
• Filter: show me something conditionally
• Connect: show me related items
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-29
• Highlighting
57
Interactive Line Graph
Link: https://dl.dropboxusercontent.com/u/1754725/IVAG/Rice/index.html
• Filtering
58
Interactive Line Graph
Link: http://tinyurl.com/ntfqocw
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-30
• Interactive time slider
59
Interactive Line Graph
Link: http://fundvis-ywng.rhcloud.com/JPMProvident.html
60
Interactive Technical Analysis Data Visualisation
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-31
• Parallel coordinates
61
Visualising changes over time
• Animated ternary chart
62
Visualising changes over time
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-32
• Animated bubble plot (or motion chart)
63
Visualising changes over time
Source: http://www.gapminder.org/
• Animated star plot
64
Visualising changes over time
Link: http://www.larsko.org/v/euc/
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-33
• Animation + Interativity: Horizon Graph using d3.js
65
Visualising changes over time
Tutorial:
https://github.com/square/cubism/wiki/Tutorialshttps://github.com/square/cubism/wiki/Tutorialshttps://gith
ub.com/square/cubism/wiki/Tutorials
http://bost.ocks.org/mike/cubism/intro/#0
https://square.github.io/cubism/
• Getting to know time and time-oriented data
• Classic ways of graphing time
• Time-series patterns
• Time-series data visualization
• Interactive techniques for time-series data visualisation
66
Content
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-34
• Aggregate to various time intervals
• Viewing time periods in context
• Grouping related time intervals
• Using related time intervals
• Using running averages to enhance perception of high-level patterns
• Omitting missing values from a display
• Optimising a graph’s aspect ratio
• Using logarithm scales to compare rates of change
• Overlapping time scales to compare cyclical patterns
67
Time-series Analysis Techniques and Best Practices
• Using cyclical plots to examine trends and cycles together
• Combining individual and cumulative values to compare actuals to a target
• Shifting time to compare leading and lagging indicators
• Stacking line graphs to compare multiple variables
• Expressing time as 0-100% to compare asynchronous processes
68
Time-series Analysis Techniques and Best Practices
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-35
69
D3.js Library for Time Series Visualisation
70
Looking for more examples!
Web link: http://survey.timeviz.net/
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-36
• Slopegraph– Slopegraphs for comparing gradients: Slopegraph theory and practice
(http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003nk)
– In praise of slopegraphs(http://visualisingdata.com/index.php/2013/12/in-praise-of-slopegraphs/)
– Displaying Change Between Two Points in Time (http://www.perceptualedge.com/articles/visual_business_intelligence/displaying_change_between_two_points_in_time.pdf)
– Edward Tufte’s “Slopegraphs” (http://charliepark.org/slopegraphs/)
– A Slopegraph Update (http://charliepark.org/a-slopegraph-update/)
– Slopegraphs are your Friend. Tables secretly hate you. (http://makeapowerfulpoint.com/2014/01/30/slopegraphs-are-your-friend-tables-secretly-hate-you/)
71
Reference
• Communicating changes in rank over time: bumps charts and slopegraphs(http://datatodisplay.com/blog/chart-design/communicating-changes-rank-time/http://datatodisplay.com/blog/chart-design/communicating-changes-rank-time/)
• Tableau Tip Tuesday: How to Create Slopegraphs(http://vizwiz.blogspot.sg/2015/01/slopegraphs.html)
• How to make a slope chart in Tableau (http://gravyanecdote.com/tableau/how-to-make-a-slope-chart-in-tableau/)
• Slopegraphs in Tableau (http://dataremixed.com/2013/12/slopegraphs-in-tableau/)
72
Reference
ISSS608 Visual Analytics and Applications
Lesson 6: Visualising and Analysing Time-Oriented Data
9/19/2016
6-37
• Horizon graph– The Development of the Horizon Graph
(http://www.stonesc.com/Vis08_Workshop/DVD/Reijner_submission.pdf)
– Time on the Horizon (http://www.perceptualedge.com/articles/visual_business_intelligence/time_on_the_horizon.pdf)
– Horizon Graphs Revisited (http://www.perceptualedge.com/blog/?p=390)
– Sizing the Horizon: The Effects of Chart Size and Layering on the Graphical Perception of Time Series Visualizations (http://vis.stanford.edu/files/2009-TimeSeries-CHI.pdf)
– Interactive Horizon Graphs (http://hal.archives-ouvertes.fr/docs/00/78/13/90/PDF/IHG.pdf)
– Horizon charts in Tableau (http://www.tableau.com/learn/tutorials/on-demand/horizon-charts)
73
Reference
• Animated Bubble Plot (Motion Chart)
– Wiki (http://en.wikipedia.org/wiki/Motion_chart)
– Visualizing Change: An Introduction in Time-Series Analysis (http://www.perceptualedge.com/articles/visual_business_intelligence/visualizing_change.pdf)
74
Reference