TEMPORAL & SEQUENTIAL DATA VISUALIZATION · PDF fileINFOVIS 8803DV > SPRING 17 TEMPORAL & SEQUENTIAL DATA VISUALIZATION Prof. Rahul C. Basole CS/MGT 8803-DV > February 1, 2017

INFOVIS8803DV > SPRING 17

TEMPORAL & SEQUENTIAL

DATA VISUALIZATION

Prof. Rahul C. Basole

CS/MGT 8803-DV > February 1, 2017


What is Time Series Data?

• There is a chronological component to the data set.

• Examples?

75 % of 4,000 samples of

graphics from newspapers and

magazines were time-series data!

(1974-1980)

Sunspot activity

GT-UGA outcomes

Stock pricesEvents!


Timeviz.net Browser

http://timeviz.net/


Standard Presentation

Mom and Apple Pie!

time

mystery

variable


Lots of Examples


A Taxonomy of Time Data

• Continuous – a series of

values that change over time

Non-periodic

Periodic

Time Value

10:00 57

10:01 62

10:02 60

10:03 60

etc. etc.

• Discrete – an event that

occurs at a specific time

Non-periodic (non-recurring)

Periodic

Time Event

20 July 1995 John born

30 May 2013 John graduates HS


Continuous Time Data

Stock Price



Weather



Heart Rate





Discrete Time Data

• Birth/marriage/death

• Historical events– Natural disasters

– Flight departures

• Some discrete events have duration (start, stop)– Meeting or appointment

– Hospital stay

– Project phase

– Person’s lifespan

• Some discrete events are periodic– Presidential elections (every 4 years)

– Our class meetings (every Tue and Thu)

– Other examples?


Time Series Tasks:

What are some things we might want to

learn from time series?


Time Series Tasks

• Find highs and lows

• When did X happen?

• Did A happen before or after B? Or did they occur simultaneously?

• How long did it take?

• When will it happen again?

• How often did X occur?

• Determine periodicity

• Compare two time series


Time Series Examples

As we step through the examples, keep these questions in mind

• What are similarities?

• What are differences?

• When is each useful?

• Pros/cons of each?

– How much info is visually encoded?

– Scalable to more events & longer time scale / intervals?

– How good for comparing multiple time series?



Example: Calendar Events on Timeline

well-formed-data.net/experiments/folding_time/


Example: The Meeting InfoVis


Individual Agenda Item


The Meeting InfoVis


Example: Personal Histories

• Lives are typically chronological

• How can you compare, document, investigate events?


Lifelines

Plaisant et al CHI ‘96


Electronic Medical Records – non-graphical


Electronic Medical Records – Graphical with Lifelines


Lifelines Features

• Different colors for various event types

• Line thickness corresponds to another variable

• Interaction: clicking drills down


What are the Benefits?

• Provide information such that:

– Likely reduce missing information

– Make it easy to discover trends or anomalies

• Streamline access to details

• Remain simple and customizable for various applications

• Assumes critical information is in the EHR (Electronic Health

Record)!!!


Challenges for Lifelines

• Scalability to thousands of tests etc.

• Comparisons of test data and images across time

– Do the yearly MRI scans show improvement?

– What trends do we see in the last 12 EKGs?

• Comparisons across cases

– How compare the histories of those 12 people with the mysterious

illness?

– Maybe better to compare using computer rather than our eyes/brain?

Or maybe not …..


Example: Find Patterns in TimeLines

• Want to find patients who received contrast agent for medical

imaging and within two weeks had high levels of creatinine

(indicating renal problems).

• More info: http://www.cs.umd.edu/hcil/lifelines2/

http://www.cs.umd.edu/hcil/lifelines2/

http://www.cs.umd.edu/hcil/lifelines2/



Step 1: Unaligned Medical Records


Step 2: Align Event Times

Yellow

triangles

(when

contrast

agent

administered)

all aligned


Step 3: Rank by Creatinine Level

Sort by

Creatinine

Level

Highest at

top (red

triangles)


Step 4: Summarize Across Cases

Histogram

across cases


Step 5: Expand Time Line

Expand

time line to

see more

detail

Video: http://www.cs.umd.edu/hcil/lifelines2/videos/Lifelines2-%28Contrast-

Creatinine%29-11-10-08_flash/full%281024x768%29/index.htm

http://www.cs.umd.edu/hcil/lifelines2/videos/Lifelines2-(Contrast-Creatinine)-11-10-08_flash/full(1024x768)/index.htm


EventFlow

http://www.cs.umd.edu/hcil/eventflow/

http://hcil.umd.edu/eventflow/#video

http://medianetwork.oracle.com/video/player/2079912021001


Example: Finding Daily Patterns

• Suppose you have a daily log, for a year, of energy consumption in a

building, or number of people in building

– Want to find common characteristics

– Idea applies beyond this example

Wijk and Selow, Cluster and Calendar based Visualization of Time Series Data, InfoVis ‘99


Raw Data



Cluster Display – People at Work


Cluster Display – People at Work

Weekends

Summer Fridays

Take Day off after Holiday

Leave Early Dec. 5


What Cluster Display Shows Us

• Traditional office hours followed

• Most are present late mornings

• Fewer are present on summer Fridays

• Very few people work holidays

• School vacations

• Day after holidays

• Many people leave at 4PM on 12/5

– Very special in The Netherlands – St. Nicholas’ Eve


Connected ScatterPlot

http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html?_r=0


Calendar-Based Heatmap

https://bl.ocks.org/mbostock/4063318


Calendar-Based Heatmap

https://www.trulia.com/vis/tru247/


Example: Spiral Display - Periodic Data

• Useful if data follows a

repetitive pattern

• Can reveal periodicity

One loop is one period

• Time line becomes the spiral

Avoid problem of long time

line


Spiral Display

• Example

12 months (spokes)

Value (consumption) coded

by size

Dots scaled so as not to

overlap

Extra spiral on outside

provides some closure

All spiral display figures from Konstan and

Carlis, Interactive Visualization of Serial

Periodic Data, UIST ’98; data set is

chimpanzee food consumption.


Add Third Dimension for More Data

Mini bar-chart at each point

Black line – start of rainy

season

112 food types

Useful?

Two linked

spirals:

2 chimpanzees

group avg size &

max size


Example: Text Themes over Time

• Consider a set of speeches or documents over time

– How represent the flow of ideas and concepts over time?*

• How would you do this?

*This was an InfoVis student contest


Theme RiverHavre et. al. InfoVis ’00

Each ‘theme’ from news stories is a ‘river’


Theme River

• River height (thickness) encodes relative frequency of themes

• Key events overlaid


Theme River = Stacked Graph?

• Yes, with a differential vertical offset

– Makes a world of difference!


Example: Any Variations over Time

• The ThemeRiver motif can be used to depict many different

variations over time.

Box Office Receiptswww.nytimes.com/interactive/2008/02/23/mov

ies/20080223_REVENUE_GRAPHIC.html

Baby Name Wizardwww.babynamewizard.com


Recall Horizon Graphs from Zoo Reading:

Cubism.js Example

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


Example: History of Text Revisions

• IBM’s “history flow” shows changes to documents edited by multiple

authors

http://researchweb.watson.ibm.com/history/


Decoding History Flow

Connect author’s

contributions

from revision to

revision

Time or revision number

Po

sitio

n o

f te

xt

in

do

cu

ment

Length of each

segment =>

amount of text

Show each

author’s

contribution to

each revision


History Flow Pictures

Spacing by time

Spacing by revision #

• Brightness indicates text age

• Registered authors color-

coded

• Anonymous authors in white


Example: Querying

• Most systems focus on visualizing and navigating time-series data.

• What about querying?


TimeFinder

Hochheiser & Shneiderman

Proc. Discovery Science ’01

Info Vis ‘04

Can create rectangles

that function as matching

regions

Light gray is all data’s extent

Darker grayed region is data

envelope that shows extreme

values of queries matching

criteria


TimeFinder – Other Capabilities

• Search for matches based on angle (slope) ± tolerance

• “Leaders and laggards”

– Find same patterns but shifted in time

Slope

Tolerance


TimeFinder Limitations

• Hodgkins patients exhibit double spike in temperature…

– But with differing times between spikes


Example:TimeSearcher

• Overcomes TimeFinder limitation

• Allow time boxes with deltas on each side (TimeSearcher) Video:

2005_timesearcher.mpg

Buono, Plaisant, Simeone, Aris, Shneiderman, et.al, Similarity-Based Forecasting with Simultaneous Previews: A

River Plot Interface for Time Series Forecasting, 11th International Conference on Information Visualization, 2007


TimeSearcher


Example: Query by (Graphical) Example

• Sketch the Query

• Will be discussed in Interaction Lecture

– Specify a timeline query by drawing a rough pattern for it and the

system returns similar matches. (Wattenberg, CHI ‘01)

User-drawn

query


Example: Project Management

• Project (write software, design/build plane, hire new person)

involves

– Multiple steps

– Spread over time

– Some steps depend on other steps

• How can we plan/manage project?

• With PERT/GANTT/CPM charts, of course.


PERT Chart - Time Dependencies

• PERT = Project Evaluation and Review Technique


PERT leads to GANTT

• Dependencies on timeline


Revised GANTT

Shows

- Resources (colors)

- Critical path activities


Revised GANTT Chart Tells Us That

• Ten week completion IF all goes well

• Completion in ten weeks requires:

– 1 analyst for the first 5 weeks

– 1 programmer for 5 weeks starting week 4

– 1 programmer/QA expert for 3 weeks starting week 6

• Analysis, development and

testing of supporting

modules must be on time.

• Hardware not time-critical

but must complete before

Core Module Training start

From

http://www.mindtools.com/pages/article/newPPM_03.htm


Many Project Management Products!

Microsoft Project


Storylines

Sister & Alice together from t = 0

for 4 time units

Design

Considerations for

Optimizing Storyline

Visualizations,

Yuzuru Tanahashi

and Kwan-Liu Ma,

IEEE Transactions

on Visualization and

Computer Graphics,

Dec. 2012


• Lines representing interacting characters must be adjacent.

• Otherwise, lines must not be adjacent.

• A line must not bend except to converge or diverge with another line.

https://xkcd.com/657/


Timeline Curator

http://www.cs.ubc.ca/group/infovis/software/TimeLineCurator/http://www.cs.ubc.ca/group/infovis/software/TimeLineCurator/#video

http://www.cs.ubc.ca/group/infovis/software/TimeLineCurator/

http://www.cs.ubc.ca/group/infovis/software/TimeLineCurator/#video


Timeviz.net Browser

http://timeviz.net/


HW4: Timeline

• Convert your professional CV/Resume into a Visualization

– Consider Events of Interest (Education, Certification/Courses, Employment, etc.). Make sure to include at least 4 categories and multiple events for each.

– Include both Discrete and Continuous Events

– Please be as detailed as you can be (you may exclude events that are personal and that you don’t want to share with others)

– Create a visual timeline dashboard of your CV.

Option 1: You may sketch your timeline (which may allow you to be really creative)

Option 2: Implement the visual timeline in Tableau (I realize there are limitations, but be as creative as you can be).

• Bring two (2) copies of timeline to class and submit HW4 on T-Square.

Documents

TEMPORAL & SEQUENTIAL DATA VISUALIZATION · PDF fileINFOVIS 8803DV > SPRING 17 TEMPORAL & SEQUENTIAL DATA VISUALIZATION Prof. Rahul C. Basole CS/MGT 8803-DV > February 1, 2017