Transcript Showing Complex Data - Montana State University

Trees, Tables, and other information graphics




Communicate visually rather than verbally
Show rather than tell
User’s can use their eyes and minds to draw
their own conclusions
When done well can be much more effective
than displaying verbal data, especially for
complex data sets
Maps
Flowcharts
Bar Plots
Graphs
Diagrams
Tables*
TreeViews*




We are dealing with computers not printed
information
Use pop-ups, animation, etc to hide and show
information to the user
Let the user modify, sort, etc – describe the
data as they see fit to increase their ability to
comprehend the data set.
Make the user a participant in the information
discover process






Clearly shows how the data is organized
Clearly shows what is related to what
Clearly shows how to explore the data
Clearly shows how the data can be rearranged
Shows only what is needed to be known
Allows the user to determine specific data
values
Linear
• List or single-variable plot
Tabular
• Spreedsheet, multi-column list, sortable table, multi-y plot, etc
Hierarchical
• Tree, cascaded lists, tree table, treemap, directed graph, etc
Network or Organic
• Directed graph or flow chart
Graphical or Spatial
• Map or schematic
Other
• Parallel coordinate plots, treemaps, etc


What’s Related to What
Preattentive Variables?
 Visual features that convey information before the
view pays conscious attention to them

Gestalt principles of similarity and continuity
are most often use to convey these
relationships
1.178739
0.699194
0.874042
0.291308
0.78357
0.745908
0.029079
0.521737
0.665048
0.776872
0.299437
0.585789
0.092586
1.055652
0.965067
0.021414
0.619581
0.393814
1.070211
0.306591
0.431111
0.176973
0.781644
1.042008
0.793146
1.077211
0.787416
0.384232
1.155947
1.104749
1.092146
0.81739
0.399637
0.798155 1.044651
0.457568
0.281085
0.307115
0.457619
1.01208
0.889061
0.509637
0.302029
0.872603
0.28545
0.59468
0.242094
0.362186
0.627088
0.903784
0.622542
0.644447
0.503984
1.150445
1.034182
0.062897
0.471185
0.544897
0.003143
1.011945
0.101365
0.759558
0.386118 1.015149
0.381423
0.864015
0.956702
0.265065
0.727255
0.31025
0.266997
0.741408
0.600416
1.040854
0.016105 0.432765 0.592027 0.053195 0.849949 0.331346
1.0688670.198444
0.2713520.589978
0.217901 1.081866
0.3287740.69475
0.334843
0.545305
0.552569
0.248
0.732601
0.516055
1.065995 0.769864
0.90944 0.668404 0.768833 0.268052
0.61739
0.8031790.291955
0.928343
1.136749
0.503075
0.379753
0.281974
0.547165
0.284908
0.004565
0.598675
0.339588
0.544283
0.457786
0.56645 1.032207 0.094762 1.082979
1.04981
0.203747
0.317019
0.222559
0.093807
0.913725
0.268272
0.899177
0.915559
0.580484
0.581041
0.600723
1.112418
0.470444
0.267117
0.738639
0.968428
0.588397
0.398713
0.781571
0.814591
0.319825
0.838117
0.657809
0.835953
0.068907
0.750538 0.000213 0.461111
0.21911 0.112873 0.672291 0.051096
0.040848
0.057594
0.152116
0.965071
0.148314
0.857975
0.075507
0.14064
0.905255
0.712832
0.049231
0.1045510.192987
1.0625680.235287
0.506072 0.443616
0.545243 0.440908
0.703485
0.054391
0.542175
0.173376
0.166171
0.035335
0.787857
0.216091
1.0291210.91475
0.7537350.817566
0.757384
1.019702
0.848172
0.264228
0.967038 0.197727
0.241039
0.052136
0.384356
0.341526
0.961132
1.021503
1.023409
0.624147
0.150229
0.106662
0.761185
1.050832
0.655706
1.071661
0.194237
1.083082
0.353512
1.028894
0.042028
0.260481
0.804218
0.794451
0.507621
0.591614
0.268941
0.408261
0.986109

Scroll and Pan
 Drag or Scroll the viewable area until a point of
interest is visible

Zoom
 Change the scale of the viewed section or point of
interest

Open and close points of interest
 Expand/Collapse to points of detail and interest

Drill down into points of interest
 Drilldown/drillup to points of detail and interest


Choosing a good sort value, or letting the user
define it, can by a good method of arranging
data in a useful manner
Common types of sort: Alpha, Numeric, Date,
Time, Location, Category/Tag, Popularity,
Custom, etc
SORTED BY LOCATION (ALPHA)
SORTED BY VALUE

Highly Interactive
 Respond quickly to user’s searching and filtering

Iterative
 User refines search, query, filter until the result set
is ideal

Contextual
 Shows results in context with surrounding data to
make it easier for a user to understand

Labels
 Values shown directly in graphic
 Names on a Map, Values on a chart, etc

Legends
 Legends are used when color, texture, linestyle, symbol,
etc, represent the data values in the graphic

Axes, Rulers, Scales, Timelines
 Used when position represent values

Datatips
 Labels on mouse hover, tab, or other focus

Data Brushing
 Allows selecting a subset of data in the graphic to see how
it fits or relates to data in other contexts

Power Tools






Overview Plus Detail
Datatips
Dynamic Queries
Data Brushing
Local Zooming
Tables and Lists




Row Striping
Sortable Table
Jump to Item
New-Item Row

Hierarchical Data
 Trees
 Cascading Lists
 Tree Table

Multidimensional Data
 Multi-Y Graph
 Small Multiples
 Treemap
• Place an overview
graphic new to a
zoomed “detail view”
• Best used when you
want to user to see
both the big picture
and details of a
portion of interest
• User here don’t need
to see all details at
once
• Zoomed region is
typically movable in
overview section



As the mouse rolls over
points of interest, put
the data values or
additional information
into a tooltip or floating
window
Best used when you are
showing an overview of
the total data, but the
graphic represents or
has data behind what is
shown
Data tips can be a quick
and rewarding form of
interactivity



Provide ways to
filter the data set
immediately and
interactively
Best used when
data set is large
and contains
many variables
and/or categories
Sliders and
checkboxes often
work well as
controls to filter
Let the user select
data items in one
view and show the
same data selected
in another view
 Best used when
you have two or
more information
graphics at a time.
 Provides the ability
to see a select
group of points or
items mapped
against another
metric or region

http://vitagate.itn.liu.se/projects/GAV/demovideos/VDE/VDE.html
http://vitagate.itn.liu.se/projects/GAV/demovideos/CoRelation/CoRelation.html



Show data in a single
page. Allow the mouse to
select and area which in
turn distorts the page
and makes those data
items large and readable
Best used when data set
is some type of
organizational form –
plots, maps, networks,
tables
Can include rearranging
the data to show detail
or fisheye zooming which
enlarges a section
without altering
surrounding content
Distorted Layout
Fish Eye Zooming




Use two similar
shades to
alternately color
the backgrounds
of table rows
Best used when a
table’s row are
difficult to
separate visually
Often occurs when
there are two
many columns
with various types
or data or images
Colors should be
low saturation and
similar in hue
Clearly Better?


Show data in a
table and let the
user sort the table
rows according to
column values
Best used when
the interface
contains many
variable types the
user may want to
explore, group by,
reorder, etc.
When user begins to
type, jump to that item
in the list or table
 Best used when the
interface uses a scrolling
list, table, drop down,
combo box or tree to
present a long set of
items that are usually
sorted by alpha
 Keystrokes within a
certain time interval
(~200ms) are often
honored to drive deeper
into the name path

Express a hierarchy by
showing selectable lists
of items at each level
 Selection of an item
shows that item’s
children in subsequent
list
 Best used when your
data is tree shaped but
the hierarchy is deep
and/or broad. A
treeview would not
work as well here due
to the vast amount of
scrolling that may be
induced

Put hierarchical data in columns, as you would a table; but use an
indented outline and controlling structure as would be seen in a tree
 Best used when you want to show hierarchical data represented by
a tree, but need to show more information than the item name
itself.
 Can be used for sub-sorting in some cases




Stack multiple
graphs vertically
and let them
share the same
X-axis
Y-axis for each
graph represents
a different metric
Best used when
you want to show
two or more
graphs or data
sets that share a
common trait
such as timeline



Create many small pictures of the data using two or three
dimensions
Tile them on a page according to one or two additional data
dimensions
Best used when you need to display a large data set with
more than two dimensions or over multiple variables over
regular intervals
Express multidimensional
and/or hierarchical data as
rectangles of various sizes
 The rectangles are nested to
show hierarchy, color
and/or labels show
additional variables
 Best used when data is tree
shaped but each item has
several attributes such as
size and category that
permit items to be grouped
accordingly.
 Users also want to see an
overview of many data
points.


Good Inductive Interface answers
 What am I supposed to do now?
 Where do I go from here?
Focus each screen on a single task
State the task
Make the screen’s contents suit the task
Offer links to secondary tasks
Use consistent screen templates
Provide screens for starting tasks
Make it obvious how to carry out the task with
controls on the screen
 Provide an easy way to complete a task and start
a new one
 Make the next navigational step obvious






