INFORMATION VISUALIZATION Alvitta Ottley Washington University in - - PowerPoint PPT Presentation

▶
information visualization
SMART_READER_LITE
LIVE PREVIEW

INFORMATION VISUALIZATION Alvitta Ottley Washington University in - - PowerPoint PPT Presentation

Jan 02, 2024 575 likes •1.66k views

CSE 557A | Oct 31, 2016 INFORMATION VISUALIZATION Alvitta Ottley Washington University in St. Louis LAST TIME NOTE ON BROWSER NOTE ON DEBUGGING NOTE ON LOADING EXTERNAL DATA FILES Need local web server Step 1: cd into code directory

slide-1
SLIDE 1

INFORMATION VISUALIZATION

Alvitta Ottley Washington University in St. Louis CSE 557A | Oct 31, 2016

slide-2
SLIDE 2

LAST TIME…

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

NOTE ON BROWSER

slide-6
SLIDE 6

NOTE ON DEBUGGING

slide-7
SLIDE 7

NOTE ON LOADING EXTERNAL DATA FILES Need local web server

  • Step 1: cd into code directory
  • Step 2 : python -m SimpleHTTPServer 8000
slide-8
SLIDE 8

MANIPULATING DOM ELEMENTS

slide-9
SLIDE 9

IN-CLASS EXERCISE: CREATE THE PAGE BELOW BY USING D3 CODE

h1 Manipulating DOM elements in D3 p Where is the visualization?

slide-10
SLIDE 10

SIMPLE SCATTER PLOT EXAMPLE

20 40 60 80 100

100 200 300 400 500 600

SCATTER PLOT

slide-11
SLIDE 11

QUESTIONS ABOUT D3 OR HOMEWORK?

slide-12
SLIDE 12

TODAY…

Graphs Visualizations

slide-13
SLIDE 13
slide-14
SLIDE 14

DEFINITION

  • Graphs represent connections or relationships
  • Social network
  • Software execution (call graph)
  • Gene expression
  • Financial transactions
  • WWW
  • US telephone system
  • One of the oldest and most studied areas of information visualization
slide-15
SLIDE 15

WHAT MAKES A GRAPH?

  • Vertices (nodes)
  • Edges (links)
  • Adjacency list:
  • 1: 2
  • 2: 1, 3
  • 3: 2
slide-16
SLIDE 16

COMPARING REPRESENTATIONS

slide-17
SLIDE 17

TERMINOLOGY

  • Directed vs. Undirected
  • Cyclic vs. Acyclic
  • Degree of a vertex
  • In-degree
  • Out-degree
  • Weights on edges
slide-18
SLIDE 18

TERMINOLOGY

  • Directed vs. Undirected
  • Cyclic vs. Acyclic
  • Degree of a vertex
  • In-degree
  • Out-degree
  • Weights on edges

1 3 2 1 3 2

slide-19
SLIDE 19

TERMINOLOGY

  • Directed vs. Undirected
  • Cyclic vs. Acyclic
  • Degree of a vertex
  • In-degree
  • Out-degree
  • Weights on edges

1 3 2 1 3 2

slide-20
SLIDE 20

TERMINOLOGY

  • Directed vs. Undirected
  • Cyclic vs. Acyclic
  • Degree of a vertex
  • In-degree
  • Out-degree
  • Weights on edges

1 3 2

slide-21
SLIDE 21

TERMINOLOGY

  • Directed vs. Undirected
  • Cyclic vs. Acyclic
  • Degree of a vertex
  • In-degree
  • Out-degree
  • Weights on edges

1 3 2

slide-22
SLIDE 22

MORE TERMINOLOGY

  • Centrality Measures:
  • Degree Centrality
  • How many neighbors does a vertex have?
  • Betweenness Centrality
  • How often does a vertex appear in paths between other nodes?
  • Closeness Centrality
  • How quickly can a node reach all other nodes in the graph?
  • Eigenvector Centrality
  • Google PageRank (assumes directed graph)
slide-23
SLIDE 23

GRAPHS VS. TREES

  • Tree is a special case of a general graph
  • There are no cycles in a tree
  • Edges are (usually) directed or are implicitly directed
  • Special designations for root, leaves, etc.
slide-24
SLIDE 24

CHALLENGES IN GRAPH VISUALIZATION

  • Graph layout and position
  • Related to your assignment!
  • Navigation / Interaction
  • How to support a user in understanding all the relationships in the graph
  • Scale
  • What happens if the graph has 10 nodes? 1,000 nodes? 1,000,000 nodes?
slide-25
SLIDE 25

TREES OR HIERARCHIES

slide-26
SLIDE 26

TYPES OF HIERARCHY VISUALIZATIONS

  • Space Filling
  • Node-Link
slide-27
SLIDE 27

SPACE FILLING -- TREEMAP

slide-28
SLIDE 28

BASIC ALGORITHM

slide-29
SLIDE 29

NESTED VS. NON-NESTED

slide-30
SLIDE 30

COMPARED TO NODE-LINK

  • Advantages
  • Known-size = control of clutter
  • Structure allows for easy comparison
  • Additional “visualizations” can be placed within the cells
  • Disadvantages:
  • Downside -> harder to see relationships (clusters)?
  • Can you see a perfect binary tree?
  • Borders may be necessary -> eats up more pixels than a line (in node-link)
slide-31
SLIDE 31

EXAMPLE: CARBON DIOXIDE EMISSIONS

slide-32
SLIDE 32

EXAMPLE: VOTES BY STATE AND COUNTY FOR 2012 ELECTIONS

slide-33
SLIDE 33

CLUSTER VS. SQUARIFIED

slide-34
SLIDE 34

PROBLEMS WITH SQUARIFIED

  • Small change to data / screen aspect ratio -> drastic layout changes
  • Order independent
slide-35
SLIDE 35

ORDERED TREEMAP

slide-36
SLIDE 36

STRIP TREEMAP

slide-37
SLIDE 37

COMPARE RESULTS

slide-38
SLIDE 38

OTHER EXAMPLES – SPIRAL TREEMAP

slide-39
SLIDE 39

SPATIALLY-ORDERED TREEMAP

slide-40
SLIDE 40

SPATIALLY-ORDERED TREEMAP

slide-41
SLIDE 41

SPATIALLY-ORDERED TREEMAP

slide-42
SLIDE 42

CUSHION MAPS

slide-43
SLIDE 43

SEQUOIAVIEW

slide-44
SLIDE 44

VORONOI TREEMAPS

slide-45
SLIDE 45

HOW ELSE CAN YOU CREATE A TREEMAP?

slide-46
SLIDE 46

NON-SQUARE LAYOUT?

slide-47
SLIDE 47

RADIAL VIEW

slide-48
SLIDE 48

RADIAL SPACE-FILLING

slide-49
SLIDE 49

SUNBURST

slide-50
SLIDE 50

PROBLEMS WITH RADIAL SPACE-FILLING

slide-51
SLIDE 51

THREE SOLUTIONS

  • Angular Detail
  • Detail Outside
  • Detail Inside
slide-52
SLIDE 52

ANGULAR DETAIL

slide-53
SLIDE 53

DETAIL OUTSIDE

slide-54
SLIDE 54

DETAIL INSIDE

slide-55
SLIDE 55

MORE HIERARCHICAL VISUALIZATIONS?!

slide-56
SLIDE 56

INTERRING

slide-57
SLIDE 57
slide-58
SLIDE 58

CIRCLE PACKING

slide-59
SLIDE 59

CIRCLE PACKING

slide-60
SLIDE 60

HYBRID (NODE-LINK + SPACE-FILLING)

  • CHEOPS
slide-61
SLIDE 61

HYBRID (NODE-LINK + SPACE-FILLING)

slide-62
SLIDE 62

MORE EXAMPLES

slide-63
SLIDE 63

OVERVIEW

  • Turns out that there are TONS more!
  • IEEE InfoVis 2010, Best Poster Award: “A Visual Survey of Tree

Visualization”

  • http://vcg.informatik.uni-rostock.de/~hs162/treeposter/poster.html
slide-64
SLIDE 64

ANY QUESTIONS?

slide-65
SLIDE 65

NODE-LINK

slide-66
SLIDE 66

NODE-LINK STRUCTURES

  • Usually represented as a graph (or a tree)
  • Directed
  • Acyclic
  • Ordering (top-bottom / left-right / inside-out) represent ancestral

relationships

slide-67
SLIDE 67

TOP-DOWN ORDERING

slide-68
SLIDE 68

LEFT-RIGHT ORDERING

slide-69
SLIDE 69
  • Indented – root node to the left,

leaf nodes to the right.

LEFT-RIGHT ORDERING

slide-70
SLIDE 70

INSIDE OUT ORDERING

slide-71
SLIDE 71

WHAT DO YOU THINK ARE SOME PROBLEMS WITH TREE VISUALIZATION?

slide-72
SLIDE 72

PROBLEMS WITH TREES…

  • In top-down designs, the horizontal screen real estate becomes scarce

quickly.

  • Assume a balanced binary tree, at level n, there are 2n nodes.
  • Trees are not guaranteed to be balanced. One branch can be much deeper

than others, causing vertical real estate usages to become disproportional.

slide-73
SLIDE 73

HOW TO DRAW THIS TREE?

  • How wide does this graph have to be?
slide-74
SLIDE 74

ICICLE PLOT

slide-75
SLIDE 75

VISUALIZATION TECHNIQUES

  • Techniques developed in Information Visualization largely try to assist the

problems identified in the last slide

  • In addition, Information Visualization techniques attempt to show more

information about the tree (or each node), and leverages domain-specific knowledge to draw the trees.

slide-76
SLIDE 76

SPACETREE

Grosjean, Plaisant, BedersonInfoVis „02

slide-77
SLIDE 77

CHARACTERISTICS

  • Subtrees are triangles
  • Size indicates depth
  • Shading indicates size of sub-tree
  • Allows for interactive navigation
  • http://www.cs.umd.edu/hcil/spacetree/applet/applet.shtml
slide-78
SLIDE 78

CONE TREES

  • Top-Down Ordering
slide-79
SLIDE 79

CONE TREES

  • Left-Right Ordering
slide-80
SLIDE 80

PROS AND CONS?

  • Pros:
  • Animation
  • More space for layout
  • Cons
  • All in 3D, occlusion is a problem
slide-81
SLIDE 81

HYPERBOLIC TREES

  • Focus + Context Technique
  • Detailed view blended with global view
  • Lays out the hierarchy on a hyperbolic plane, and then mapped to a disk
  • Inside-outside ordering
slide-82
SLIDE 82

2D HYPERBOLIC BROWSER

  • http://flare.prefuse.org/demo
slide-83
SLIDE 83

ANIMATION IN HYPERBOLIC TREE

slide-84
SLIDE 84

KEY ATTRIBUTES

  • Fisheye Lens in the center
  • Displays approximately 3 levels from current node
  • Smooth animation
  • Simplifies rendering for far-away nodes
slide-85
SLIDE 85

PROS AND CONS

  • Pros
  • Natural magnification
  • Can display large number of nodes
  • Cons
  • Disorienting…
  • Can’t see the whole picture
slide-86
SLIDE 86

H3VIEWER

slide-87
SLIDE 87

H3VIEWER

  • Drawing:
  • Maintains a target frame by showing less of the context
  • Fills in details when the user is idle
slide-88
SLIDE 88
  • Questions?
slide-89
SLIDE 89

DEGREE-OF-INTEREST TREES

  • Problem:
  • T
  • o many leaf nodes – turns into a line
  • Solution
  • Use focus+context (distortion) to control how a tree is drawn
slide-90
SLIDE 90

APPROACH

  • Degree-of-Interest computation
  • Geometric scaling
  • Semantic scaling
  • Clustered representation
  • Logical filtering
slide-91
SLIDE 91

DEGREE-OF-INTEREST TREES

slide-92
SLIDE 92

COMPRESSION

  • Layout Compression
  • Node Compression
slide-93
SLIDE 93

ORGANIZATION CHART

slide-94
SLIDE 94

FLEXTREE

  • Left-Right ordering with vertical compression
  • Idea: push the nodes as far down as possible
slide-95
SLIDE 95

DOUBLES AS A BAR CHART

slide-96
SLIDE 96

NODE DETAILS

slide-97
SLIDE 97

SPACE-OPTIMIZED TREE

  • Approach: utilize Voronoi diagram
slide-98
SLIDE 98

VIEWING AND NAVIGATION

slide-99
SLIDE 99

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • RINGS (2002)
slide-100
SLIDE 100

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • H-Tree
slide-101
SLIDE 101

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • Hilbert Curves
slide-102
SLIDE 102

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • Point-Based Tree Representation
slide-103
SLIDE 103

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • Polygon-Bounded Trees
slide-104
SLIDE 104

OTHER SPACE-FILLING + NODE-LINK GRAPHS

  • PhylloTrees
  • http://innovis.cpsc.ucalgary.ca/Research/PhylloTrees
slide-105
SLIDE 105
  • Questions?
slide-106
SLIDE 106

EXERCISE

  • Considering that all the visualizations depict the same data and relationships,

how can one go from one visualization to another?

?