Trees tables and other information graphics
This presentation is the property of its rightful owner.
Sponsored Links
1 / 69

Showing Complex Data PowerPoint PPT Presentation


  • 46 Views
  • Uploaded on
  • Presentation posted in: General

Trees, Tables, and other information graphics. Showing Complex Data. 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

Download Presentation

Showing Complex Data

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Trees tables and other information graphics

Trees, Tables, and other information graphics

Showing Complex Data


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

Types of Information Graphics


Power of interactivity

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

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

Data Organizational Models


Data relationships

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 relationships preattentive variables

Data RelationshipsPreattentive Variables


Data relationships preattentive variables1

Data RelationshipsPreattentive Variables


Data relationships preattentive variables2

Data RelationshipsPreattentive Variables


Data relationships preattentive variables example

Data RelationshipsPreattentive Variables - Example


Data relationships preattentive color

Data RelationshipsPreattentive Color


Data relationships ability of preattentive color to scale

Data RelationshipsAbility of preattentive color to scale


Data relationships use of multiple preattentive variables

Data RelationshipsUse of multiple preattentive variables


Navigating and exploring the data

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

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 data1

Sorting and Arrangement of Data

Sorted by Location (Alpha)

Sorted by Value


Searching and filtering the data

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

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

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

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

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 tips1

Data Tips


Data tips2

Data Tips


Dynamic queries

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 queries1

Dynamic Queries


Dynamic queries2

Dynamic Queries


Data brushing

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 brushing1

Data Brushing


Data brushing2

Data Brushing


Data brushing3

Data Brushing

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


Data brushing4

Data Brushing

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


Local zooming

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 zooming1

Local Zooming

Distorted Layout


Local zooming2

Local Zooming

Fish Eye Zooming


Local zooming3

Local Zooming


Row striping

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 striping1

Row Striping


Row striping2

Row Striping

Clearly Better?


Sortable table

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

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 item1

Jump to Item


Cascading lists

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

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 table1

Tree Table


Tree table2

Tree Table+


Multi y graph

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 graph1

Multi-Y Graph


Small multiples

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 multiples1

Small Multiples


Small multiples2

Small Multiples


Small multiples3

Small Multiples


Treemap

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.


Treemap1

Treemap


Tree map

Tree Map


Treemap2

Treemap


Treemap3

Treemap


Deductive user interface

Deductive User Interface


Inductive user interface

Inductive User Interface

  • Good Inductive Interface answers

    • What am I supposed to do now?

    • Where do I go from here?


Inductive user interface1

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


Case study focus

Case Study – Focus?


Starting with a screen of tasks

Starting with a screen of tasks


2 nd tier tasks

2nd Tier Tasks


Accounts home page focus

Accounts home page – Focus?


Design of secondary tasks

Design of secondary tasks


Screen titles

Screen Titles


Screen titles state the task

Screen titles – State the task


Primary and secondary assistance

Primary and secondary assistance


  • Login