lesson 6 visualising and analysing time- oriented data · lesson 6: visualising and analysing...

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



9/19/2016

6-2






3

Content

4

Time-series 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



9/19/2016

6-4

• Not all time-series data are in readily to use format

7

Time-series data






8

Content



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)

http://en.wikipedia.org/wiki/William_Playfair



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

http://bocoup.com/weblog/vintage-visualization-restoration-bump-chart/

http://www.nytimes.com/interactive/2012/09/17/science/driving-safety-in-fits-and-starts.html?_r=0



9/19/2016

6-7

IS415 Geospatial Analytics for Business Intelligence 13

Multiple lines chart






14

Content



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



9/19/2016

6-9

• Unclear trend

17


• The downward trend reveals with the help of the reference line.

18




9/19/2016

6-10

• Visitors from China is in increasing trend and visitor from Japan is in decreasing trend.

19


• 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



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



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



9/19/2016

6-13

• Values that fall outside the norm.

25

Time-series Patterns: Exceptions

?






26

Content



9/19/2016

6-14

27

Line chart without reference line

28

Line chart with reference line



9/19/2016

6-15

29

Line chart with reference region

30

Control Chart

Source: Communicating Data with Tableau



9/19/2016

6-16

Visit Trend(total visits of three devices)

32

Candlestick chart



9/19/2016

6-17

33

Interpreting Candlestick Chart

34




9/19/2016

6-18

35


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

http://bl.ocks.org/abeppu/1074045

http://phrogz.net/js/d3-playground/#StockPrice_HTML

https://github.com/andredumas/techan.js



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

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003nk

http://202.161.43.23/IVAG/food/Slope_graph/v4_yield_Arial.html



9/19/2016

6-20

• Classic line graph method

39

Challenge II: Visualising cyclical patterns

• Cycle plot method

40


Source: http://www.perceptualedge.com/articles/guests/intro_to_cycle_plots.pdf

http://www.perceptualedge.com/articles/guests/intro_to_cycle_plots.pdf



9/19/2016

6-21

• Sunburst diagram method

41


• Classic line graph method

42

Challenge III: Massive Time-series Data



9/19/2016

6-22

• Horizon graph method

43


• The Basic Construct of a Horizon Graph

44


http://www.panopticon.com/Horizon-Graphs

http://www.panopticon.com/Horizon-Graphs



9/19/2016

6-23

45

Challenge IV: Distribution over time

• Boxplot method

46

Challenge IV: Distribution over time



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




9/19/2016

6-25

• Stacked bar chart method

49


• Stacked area graph method

50




9/19/2016

6-26

• Multiple line graph method

51


• Stream Graph (Stacked Graph)

52


http://www.leebyron.com/else/streamgraph/

http://www.leebyron.com/else/streamgraph/



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

http://mbostock.github.io/d3/talk/20111018/calendar.html

http://runnable.com/U5fme1b6WhNHeUcX/calendar-view-using-d3-for-d3-js-and-javascript

http://www.trixietracker.com/tour/sleep

http://www.trixietracker.com/tour/sleep



9/19/2016

6-28






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



9/19/2016

6-29

• Highlighting

57

Interactive Line Graph

Link: https://dl.dropboxusercontent.com/u/1754725/IVAG/Rice/index.html

• Filtering

58


Link: http://tinyurl.com/ntfqocw

https://dl.dropboxusercontent.com/u/1754725/IVAG/Rice/index.html

http://tinyurl.com/ntfqocw



9/19/2016

6-30

• Interactive time slider

59


Link: http://fundvis-ywng.rhcloud.com/JPMProvident.html

60

Interactive Technical Analysis Data Visualisation

http://fundvis-ywng.rhcloud.com/JPMProvident.html



9/19/2016

6-31

• Parallel coordinates

61

Visualising changes over time

• Animated ternary chart

62




9/19/2016

6-32

• Animated bubble plot (or motion chart)

63


Source: http://www.gapminder.org/

• Animated star plot

64


Link: http://www.larsko.org/v/euc/

http://www.gapminder.org/world/

http://www.gapminder.org/world/

http://www.gapminder.org/

http://www.larsko.org/v/euc/



9/19/2016

6-33

• Animation + Interativity: Horizon Graph using d3.js

65


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/






66

Content

https://github.com/square/cubism/wiki/Tutorialshttps:/github.com/square/cubism/wiki/Tutorialshttps:/github.com/square/cubism/wiki/Tutorials

http://bost.ocks.org/mike/cubism/intro/#0

https://square.github.io/cubism/



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



9/19/2016

6-35

69

D3.js Library for Time Series Visualisation

70

Looking for more examples!

Web link: http://survey.timeviz.net/

http://code.shutterstock.com/rickshaw/

http://code.shutterstock.com/rickshaw/

http://metricsgraphicsjs.org/examples.htm

http://metricsgraphicsjs.org/examples.htm

http://square.github.io/cubism/

http://square.github.io/cubism/

http://techanjs.org/

http://techanjs.org/

http://survey.timeviz.net/



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

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003nk

http://visualisingdata.com/index.php/2013/12/in-praise-of-slopegraphs/

http://www.perceptualedge.com/articles/visual_business_intelligence/displaying_change_between_two_points_in_time.pdf

http://charliepark.org/slopegraphs/

http://charliepark.org/a-slopegraph-update/

http://makeapowerfulpoint.com/2014/01/30/slopegraphs-are-your-friend-tables-secretly-hate-you/

http://datatodisplay.com/blog/chart-design/communicating-changes-rank-time/http:/datatodisplay.com/blog/chart-design/communicating-changes-rank-time/

http://vizwiz.blogspot.sg/2015/01/slopegraphs.html

http://gravyanecdote.com/tableau/how-to-make-a-slope-chart-in-tableau/

http://dataremixed.com/2013/12/slopegraphs-in-tableau/



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

http://www.stonesc.com/Vis08_Workshop/DVD/Reijner_submission.pdf

http://www.perceptualedge.com/articles/visual_business_intelligence/time_on_the_horizon.pdf

http://www.perceptualedge.com/blog/?p=390

http://vis.stanford.edu/files/2009-TimeSeries-CHI.pdf

http://hal.archives-ouvertes.fr/docs/00/78/13/90/PDF/IHG.pdf

http://www.tableau.com/learn/tutorials/on-demand/horizon-charts

http://en.wikipedia.org/wiki/Motion_chart

http://www.perceptualedge.com/articles/visual_business_intelligence/visualizing_change.pdf

lesson 6 visualising and analysing time- oriented data · lesson 6: visualising and analysing...

Documents