Showing Complex DataTrees, Tables, and other information graphics

Art of 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

Types of Information Graphics

Maps Flowcharts Bar Plots Graphs Diagrams Tables* TreeViews*

Power of Interactivity

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

Good Interactive Information Graphics 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

Data Organizational Models

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

Data Relationships

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

Data RelationshipsPreattentive Variables

Data RelationshipsPreattentive Variables

Data RelationshipsPreattentive Variables

Data RelationshipsPreattentive Variables - Example

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.915559 1.01208 0.889061 0.509637 0.302029 0.872603 0.28545 0.59468

0.580484 1.150445 1.034182 0.062897 0.471185 0.544897 0.003143 1.011945

0.581041 0.265065 0.727255 0.31025 0.266997 0.741408 0.600416 1.040854

0.600723 0.552569 0.589978 0.198444 0.248 0.732601 0.69475 0.516055

1.112418 0.61739 0.291955 1.136749 0.379753 0.547165 0.004565 0.339588

0.399637 0.798155 1.044651 0.457568 0.281085 0.307115 0.457619 0.470444

0.242094 0.362186 0.627088 0.903784 0.622542 0.644447 0.503984 0.267117

0.101365 0.759558 0.386118 1.015149 0.381423 0.864015 0.956702 0.738639

0.271352 1.068867 0.217901 1.081866 0.328774 0.334843 0.545305 0.588397

0.803179 0.928343 0.503075 0.281974 0.284908 0.598675 0.544283 0.781571

0.203747 0.317019 0.222559 0.093807 0.913725 0.268272 0.899177 0.319825

0.068907 0.040848 0.057594 0.152116 0.965071 0.148314 0.857975 0.075507

0.905255 0.054391 0.542175 0.173376 0.192987 0.235287 0.443616 0.440908

0.035335 1.019702 0.848172 0.264228 0.91475 0.817566 0.052136 0.197727

0.016105 0.432765 0.592027 0.053195 0.849949 0.331346 0.968428 0.838117

1.065995 0.769864 0.90944 0.668404 0.768833 0.268052 0.398713 0.657809

0.457786 0.56645 1.032207 0.094762 1.082979 1.04981 0.814591 0.835953

0.750538 0.000213 0.461111 0.21911 0.112873 0.672291 0.051096 0.14064

0.712832 0.049231 0.104551 1.062568 0.506072 0.545243 0.703485 0.166171

0.787857 0.216091 1.029121 0.753735 0.757384 0.967038 0.241039 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

Data RelationshipsPreattentive Color

Data RelationshipsAbility of preattentive color to scale

Data RelationshipsUse of multiple preattentive variables

Navigating and Exploring the Data 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

Sorting and Arrangement of Data 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

Sorting and Arrangement of Data

SORTED BY LOCATION (ALPHA) SORTED BY VALUE

Searching and Filtering the Data 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

Showing Specific Data Values

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

Common Patterns 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

Overview Plus Detail• 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

Data Tips 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

Data Tips

Data Tips

Dynamic Queries 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

Dynamic Queries

Dynamic Queries

Data Brushing 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

Data Brushing

Data Brushing

Data Brushinghttp://vitagate.itn.liu.se/projects/GAV/demovideos/VDE/VDE.html

Data Brushinghttp://vitagate.itn.liu.se/projects/GAV/demovideos/CoRelation/CoRelation.html

Local Zooming 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

Local Zooming

Distorted Layout

Local Zooming

Fish Eye Zooming

Local Zooming

Row Striping 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

Row Striping

Row Striping

Clearly Better?

Sortable Table 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.

Jump to Item 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

Jump to Item

Cascading Lists 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

Tree Table 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

Tree Table

Tree Table+

Multi-Y Graph 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

Multi-Y Graph

Small Multiples 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

Small Multiples

Small Multiples

Small Multiples

Treemap 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.

Treemap

Tree Map

Treemap

Treemap

Deductive User Interface

Inductive User Interface

Good Inductive Interface answers What am I supposed to do now? Where do I go from here?

Inductive User Interface 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

Case Study

Case Study – Focus?

Starting with a screen of tasks

2nd Tier Tasks

Accounts home page – Focus?

Design of secondary tasks

Screen Titles

Screen titles – State the task

Primary and secondary assistance