data visualization (dsc 530/cis 602-01)dkoop/dsc530-2016sp/lectures/lecture04.pdfdata visualization...
TRANSCRIPT
Data Visualization (DSC 530CIS 602-01)
Data
Dr David Koop
D Koop DSC 530 Spring 2016
HTML and CSSbull HTML Tags define the boundaries of the structures of the content
ltemgtThis is ltstronggtcoolltstronggt What about ltugtltstronggtthisltstronggtltugtltemgt
bull HTML id and class attributes identify specific elements bull CSS Specifies the style of the content according to selectors
em color green main-header color red important color blue
2D Koop DSC 530 Spring 2016
Scalable Vector Graphics (SVG)bull Vector graphics vs Raster graphics
bull Drawing primitives - Lines Circles Rects Ellipses Text Polylines Paths - Work by specifying information about how to draw the shape - Lots more see MDN Documentation
bull OrderingStacking - SVG Elements are drawn in the order they are specified
3D Koop DSC 530 Spring 2016
Raster Vector
SVG Examplebull httpcodepeniodakooppenyexVXb bull ltsvg id=mysvg width=300 height=600gt ltcircle cx=50 cy=50 r=50gt ltrect class=lego x=150 y=150 width=50 height=20gt ltpath id=triangle d=M 20 200 L 120 200 L 120 250 Zgt ltsvggt
bull circle fill green stroke black stroke-width 4px lego fill red stroke blue stroke-width 2px triangle fill none stroke orange stroke-width3px
4D Koop DSC 530 Spring 2016
JavaScript in one slidebull Interpreted and Dynamically-typed Programming Language bull Statements end with semi-colons normal blocking with brackets bull Variables var a = 0 bull Operators + - [ ] bull Control Statements if (ltexprgt)hellip else hellip switch bull Loops for while do-while bull Arrays var a = [123] a[99] = 100 consolelog(alength)
bull Functions function myFunction(ab) return a + b bull Objects var obj objx = 3 objy = 5
- Prototypes for instance functions bull Comments are Comment or Single-line Comment
5D Koop DSC 530 Spring 2016
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
HTML and CSSbull HTML Tags define the boundaries of the structures of the content
ltemgtThis is ltstronggtcoolltstronggt What about ltugtltstronggtthisltstronggtltugtltemgt
bull HTML id and class attributes identify specific elements bull CSS Specifies the style of the content according to selectors
em color green main-header color red important color blue
2D Koop DSC 530 Spring 2016
Scalable Vector Graphics (SVG)bull Vector graphics vs Raster graphics
bull Drawing primitives - Lines Circles Rects Ellipses Text Polylines Paths - Work by specifying information about how to draw the shape - Lots more see MDN Documentation
bull OrderingStacking - SVG Elements are drawn in the order they are specified
3D Koop DSC 530 Spring 2016
Raster Vector
SVG Examplebull httpcodepeniodakooppenyexVXb bull ltsvg id=mysvg width=300 height=600gt ltcircle cx=50 cy=50 r=50gt ltrect class=lego x=150 y=150 width=50 height=20gt ltpath id=triangle d=M 20 200 L 120 200 L 120 250 Zgt ltsvggt
bull circle fill green stroke black stroke-width 4px lego fill red stroke blue stroke-width 2px triangle fill none stroke orange stroke-width3px
4D Koop DSC 530 Spring 2016
JavaScript in one slidebull Interpreted and Dynamically-typed Programming Language bull Statements end with semi-colons normal blocking with brackets bull Variables var a = 0 bull Operators + - [ ] bull Control Statements if (ltexprgt)hellip else hellip switch bull Loops for while do-while bull Arrays var a = [123] a[99] = 100 consolelog(alength)
bull Functions function myFunction(ab) return a + b bull Objects var obj objx = 3 objy = 5
- Prototypes for instance functions bull Comments are Comment or Single-line Comment
5D Koop DSC 530 Spring 2016
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Scalable Vector Graphics (SVG)bull Vector graphics vs Raster graphics
bull Drawing primitives - Lines Circles Rects Ellipses Text Polylines Paths - Work by specifying information about how to draw the shape - Lots more see MDN Documentation
bull OrderingStacking - SVG Elements are drawn in the order they are specified
3D Koop DSC 530 Spring 2016
Raster Vector
SVG Examplebull httpcodepeniodakooppenyexVXb bull ltsvg id=mysvg width=300 height=600gt ltcircle cx=50 cy=50 r=50gt ltrect class=lego x=150 y=150 width=50 height=20gt ltpath id=triangle d=M 20 200 L 120 200 L 120 250 Zgt ltsvggt
bull circle fill green stroke black stroke-width 4px lego fill red stroke blue stroke-width 2px triangle fill none stroke orange stroke-width3px
4D Koop DSC 530 Spring 2016
JavaScript in one slidebull Interpreted and Dynamically-typed Programming Language bull Statements end with semi-colons normal blocking with brackets bull Variables var a = 0 bull Operators + - [ ] bull Control Statements if (ltexprgt)hellip else hellip switch bull Loops for while do-while bull Arrays var a = [123] a[99] = 100 consolelog(alength)
bull Functions function myFunction(ab) return a + b bull Objects var obj objx = 3 objy = 5
- Prototypes for instance functions bull Comments are Comment or Single-line Comment
5D Koop DSC 530 Spring 2016
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
SVG Examplebull httpcodepeniodakooppenyexVXb bull ltsvg id=mysvg width=300 height=600gt ltcircle cx=50 cy=50 r=50gt ltrect class=lego x=150 y=150 width=50 height=20gt ltpath id=triangle d=M 20 200 L 120 200 L 120 250 Zgt ltsvggt
bull circle fill green stroke black stroke-width 4px lego fill red stroke blue stroke-width 2px triangle fill none stroke orange stroke-width3px
4D Koop DSC 530 Spring 2016
JavaScript in one slidebull Interpreted and Dynamically-typed Programming Language bull Statements end with semi-colons normal blocking with brackets bull Variables var a = 0 bull Operators + - [ ] bull Control Statements if (ltexprgt)hellip else hellip switch bull Loops for while do-while bull Arrays var a = [123] a[99] = 100 consolelog(alength)
bull Functions function myFunction(ab) return a + b bull Objects var obj objx = 3 objy = 5
- Prototypes for instance functions bull Comments are Comment or Single-line Comment
5D Koop DSC 530 Spring 2016
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
JavaScript in one slidebull Interpreted and Dynamically-typed Programming Language bull Statements end with semi-colons normal blocking with brackets bull Variables var a = 0 bull Operators + - [ ] bull Control Statements if (ltexprgt)hellip else hellip switch bull Loops for while do-while bull Arrays var a = [123] a[99] = 100 consolelog(alength)
bull Functions function myFunction(ab) return a + b bull Objects var obj objx = 3 objy = 5
- Prototypes for instance functions bull Comments are Comment or Single-line Comment
5D Koop DSC 530 Spring 2016
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Important JavaScript Conceptsbull Functional Programming you can pass functions to functions
- Array mapfilterreduceforEach - cTemps=fTempsmap(function(d)return (d-32)5090)
bull Closures functions keep track of their environments - function makeAdder(x) return function(y) return x + y
bull Objects and Properties - var student = name John Smith id 000012345 class Senior hometown Fall River MA USA
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
bull Function chaining succinct avoids intermediate variables in code
6D Koop DSC 530 Spring 2016
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Manipulating the DOM with JavaScriptbull Key global variables
bull window Global namespace bull document Current document bull documentgetElementById(hellip) Get an element via its id
bull HTML is parsed into an in-memory document (DOM) bull Can access and modify information stored in the DOM bull Can add information to the DOM with JavaScript
- documentbodyappendChild(documentcreateTextNode(I added text to your webpage))
7D Koop DSC 530 Spring 2016
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
IntroductionOnce upon a time
Patriots
Example JavaScript and the DOMbull httpcodepeniodakooppen
MKqbjm bull Start with no real content just divs ltdiv id=firstSectiongtltdivgt ltdiv id=secondSectiongtltdivgt ltdiv id=finalSectiongtltdivgt
bull Programmatically add content - documentcreateElement - documentgetElementById - documentcreateTextNode - ElementappendChild
8D Koop DSC 530 Spring 2016
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Creating SVG figures via JavaScriptbull SVG elements can be accessed and modified just like HTML
elements bull Create a new SVG programmatically and add it into a page
- var divElt = documentgetElementById(chart)var svg = documentcreateElementNS( httpwwww3org2000svg svg) divEltappendChild(svg)
bull You can assign attributes - svgsetAttribute(height 400) svgsetAttribute(width 600) svgCirclesetAttribute(r 50)
9D Koop DSC 530 Spring 2016
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Example UK Driving Fatalitiesbull Start httpcodepeniodakooppenwMEoxW bull makeElt function creates an SVG element and can additionally add
it to the the DOM
bull Possible Solution httpcodepeniodakooppenRrYoYw bull Improvements
10D Koop DSC 530 Spring 2016
0
30k
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Interactive Data Visualization by S Murraybull Free version available on the Web bull httpchimeralabsoreillycom
books1230000000345 bull Representing and drawing with data bull Chapter 3 has a nice overview of
Web technologies with examples bull Great resource for D3 as well
11D Koop DSC 530 Spring 2016
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and a1css a1js)
via myCourses bull Due Friday February 12 1159pm bull Late Policy
12D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
mdash T Munzner
13D Koop DSC 530 Spring 2016
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Databull What is this data
bull Semantics real-world meaning of the data bull Type structural or mathematical interpretation bull Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isnrsquot always clear
14D Koop DSC 530 Spring 2016
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data
15D Koop DSC 530 Spring 2016
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Typesbull Items
- An item is an individual discrete entity - eg row in a table node in a network
bull Attributes - An attribute is some specific property that can be measured
observed or logged - aka variable (data) dimension
16D Koop DSC 530 Spring 2016
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
22
Fieldattribute
item
Items amp Attributes
17D Koop DSC 530 Spring 2016
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Typesbull Nodes
- Synonym for item but in the context of networks (graphs) bull Links
- A link is a relation between two items - eg social network friends computer network links
18D Koop DSC 530 Spring 2016
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Items amp Links
19D Koop DSC 530 Spring 2016
[Bostock 2011]
Item
Links
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Typesbull Positions
- A position is a location in space (usually 2D or 3D) - May be subject to projections - eg cities on a map a sampled region in an CT scan
bull Grids - A grid specifies how data is sampled both geometrically and
topologically - eg how CT scan data is stored
20D Koop DSC 530 Spring 2016
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Positions and Grids
21D Koop DSC 530 Spring 2016
Position Grid
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Dataset Types
22D Koop DSC 530 Spring 2016
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Fieldattribute
itemcell
Tables
23D Koop DSC 530 Spring 2016
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
0
0
0
0
0
0
00
5
5
5
5
5
5
55
10
10
10
10
10
10
1010
15
15
15
15
15
15
1515
20
20
20
20
20
20
2020
25
25
25
25
25
25
2525
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)
economy (mpg)economy (mpg)
30
30
30
30
30
30
3030
35
35
35
35
35
35
3535
40
40
40
40
40
40
4040
45
45
45
45
45
45
4545
50
50
50
50
50
50
5050
55
55
55
55
55
55
5555
60
60
60
60
60
60
6060
65
65
65
65
65
65
6565
70
70
70
70
70
70
7070
75
75
75
75
75
75
7575
80
80
80
80
80
80
8080cylinders
cylinders
cylinders
cylinders
cylinders
cylinders
cylinderscylinders
100
100
100
100
100
100
100100
150
150
150
150
150
150
150150
200
200
200
200
200
200
200200
250
250
250
250
250
250
250250
300
300
300
300
300
300
300300
350
350
350
350
350
350
350350
400
400
400
400
400
400
400400
450
450
450
450
450
450
450450
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)
displacement (cc)displacement (cc)
0
0
0
0
0
0
00
20
20
20
20
20
20
2020
40
40
40
40
40
40
4040
60
60
60
60
60
60
6060
80
80
80
80
80
80
8080
100
100
100
100
100
100
100100
120
120
120
120
120
120
120120
140
140
140
140
140
140
140140
160
160
160
160
160
160
160160
180
180
180
180
180
180
180180
200
200
200
200
200
200
200200
220
220
220
220
220
220
220220
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)
power (hp)power (hp)
2000
2000
2000
2000
2000
2000
20002000
2500
2500
2500
2500
2500
2500
25002500
3000
3000
3000
3000
3000
3000
30003000
3500
3500
3500
3500
3500
3500
35003500
4000
4000
4000
4000
4000
4000
40004000
4500
4500
4500
4500
4500
4500
45004500
5000
5000
5000
5000
5000
5000
50005000
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)
weight (lb)weight (lb)
8
8
8
8
8
8
88
10
10
10
10
10
10
1010
12
12
12
12
12
12
1212
14
14
14
14
14
14
1414
16
16
16
16
16
16
1616
18
18
18
18
18
18
1818
20
20
20
20
20
20
2020
22
22
22
22
22
22
2222
24
24
24
24
24
24
2424
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)
0-60 mph (s)0-60 mph (s)
70
70
70
70
70
70
7070
71
71
71
71
71
71
7171
72
72
72
72
72
72
7272
73
73
73
73
73
73
7373
74
74
74
74
74
74
7474
75
75
75
75
75
75
7575
76
76
76
76
76
76
7676
77
77
77
77
77
77
7777
78
78
78
78
78
78
7878
79
79
79
79
79
79
7979
80
80
80
80
80
80
8080
81
81
81
81
81
81
8181
82
82
82
82
82
82
8282year
year
year
year
year
year
yearyear
Table Visualizations
24D Koop DSC 530 Spring 2016
[M Bostock 2011]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
25D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
Networks
26D Koop DSC 530 Spring 2016
[Holten amp van Wijk 2009]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Networks
27D Koop DSC 530 Spring 2016
Danny Holten amp Jarke J van Wijk Force-Directed Edge Bundling for Graph Visualization
Figure 7 US airlines graph (235 nodes 2101 edges) (a) not bundled and bundled using (b) FDEB with inverse-linear model(c) GBEB and (d) FDEB with inverse-quadratic model
Figure 8 US migration graph (1715 nodes 9780 edges) (a) not bundled and bundled using (b) FDEB with inverse-linearmodel (c) GBEB and (d) FDEB with inverse-quadratic model The same migration flow is highlighted in each graph
Figure 9 A low amount of straightening provides an indication of the number of edges comprising a bundle by widening thebundle (a) s = 0 (b) s = 10 and (c) s = 40 If s is 0 color more clearly indicates the number of edges comprising a bundle
we generated use the rendering technique described in Sec-tion 41 To facilitate the comparison of migration flow inFigure 8 we use a similar rendering technique as the onethat Cui et al [CZQ08] used to generate Figure 8c
The airlines graph is comprised of 235 nodes and 2101edges It took 19 seconds to calculate the bundled airlinesgraphs (Figures 7b and 7d) using the calculation scheme pre-
sented in Section 33 The migration graph is comprised of1715 nodes and 9780 edges It took 80 seconds to calculatethe bundled migration graphs (Figures 8b and 8d) using thesame calculation scheme All measurements were performedon an Intel Core 2 Duo 266GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics cardOur prototype was implemented in Borland Delphi 7
c 2009 The Author(s)Journal compilation c 2009 The Eurographics Association and Blackwell Publishing Ltd
[Holten amp van Wijk 2009]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated
Vector Fields
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
28D Koop DSC 530 Spring 2016
Scalar Fields Vector Fields Tensor Fields(Order-1 Tensor Fields)(Order-0 Tensor Fields) (Order-2+)
Each point in space has an associated
Scalar
Vector Fields
Vector Tensor
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Fieldsbull Difference between continuous and discrete values bull Examples temperature pressure density bull Grids necessary to sample continuous data
bull Interpolation ldquohow to show values between the sampled points in ways that do not misleadrdquo
29D Koop DSC 530 Spring 2016
Grids (Meshes)bull Meshes combine positional information (geometry) with
topological information (connectivity)
bull Mesh type can differ substantial depending in the way mesh cells are formed
From Weiskopf Machiraju Moumlllercopy WeiskopfMachirajuMoumlller
Data Structures
bull Grid typesndash Grids differ substantially in the cells (basic
building blocks) they are constructed from and in the way the topological information is given
scattered uniform rectilinear structured unstructured[Weiskopf Machiraju Moumlller]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Spatial Data Example MRI
30D Koop DSC 530 Spring 2016
[slide via Levine 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Scivis and Infovisbull Two subfields of visualization bull Scivis deals with data where the spatial position is given with data
- Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing volume rendering vector field vis
bull In Infovis the data has no set spatial representation designer chooses how to visually represent data
31D Koop DSC 530 Spring 2016
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Sets amp Lists
32D Koop DSC 530 Spring 2016
[Daniels httpexperimentsundercurrentcom]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Attribute Types
33D Koop DSC 530 Spring 2016
Attribute Types
Ordering Direction
Categorical Ordered
Ordinal Quantitative
Sequential Diverging Cyclic
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
34D Koop DSC 530 Spring 2016
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
35D Koop DSC 530 Spring 2016
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Sequential and Diverging Databull Sequential homogenous range
from a minimum to a maximum - Examples Land elevations ocean
depths bull Diverging can be deconstructed
into two sequences pointing in opposite directions - Has a zero point (not necessary 0) - Example Map of both land
elevation and ocean depth
36D Koop DSC 530 Spring 2016
[Rogowitz amp Treinish 1998]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
lar structure of spirals allows for an easy detection of cyclesand for the comparison of periodic data sets Furthermorethe continuity of the data is expressed by using a spiral in-stead of a circle
31 Mathematical description and types of spirals
A spiral is easy to describe and understand in polar coor-dinates ie in the form The distinctive feature ofa spiral is that f is a monotone function In this work we as-sume a spiral is described by
Several simple functions f lead to well-known types ofspirals bull Archimedeslsquo spiral has the form It has the spe-
cial property that a ray emanating from the origincrosses two consecutive arcs of the spiral in a constantdistance
bull The Hyperbolic spiral has the form It is theinverse of Archimedeslsquo spiral with respect to the origin
bull More generally spirals of the form are calledArchimedean spirals
bull The logarithmic spiral has the form It has thespecial property that all arcs cut a ray emanating fromthe origin under the same angleFor the visualization of time-dependent data Archimedeslsquo
spiral seems to be the most appropriate In most applicationsdata from different periods are equally important Thisshould be reflected visually in that the distance to other peri-ods is always the same
32 Mapping data to the spiral
In general markers bars and line elements can be usedto visualize time-series data similar to standard point barand line graphs on Spiral Graphs For instance quantitativediscrete data can be presented as bars on the spiral or bymarks with a corresponding distance to the spiral Howeversince the x and y coordinate are needed to achieve the generalform of the spiral their use is limited for the display of datavalues One might consider to map data values to small ab-solute changes in the radius ie
Yet we have found this way of visualizing to be ineffec-tive We conclude that the general shape of the spiral shouldbe untouched and other attributes should be used such asbull colourbull texture including line styles and patterns
Figure 1Two visualizations of sunshine intensity using about the same screen real estate and thesame color coding scheme In the spiral visualization it is much easier to compare days to spotcloudy time periods or to see events like sunrise and sunset
r f ϕ( )=
r f ϕ( ) dfdϕ------ 0 ϕ R+isingt=
r aϕ=
2πar a ϕfrasl=
r aϕk=
r aekϕ=
r aϕ bv ϕ( ) b πamax v ϕ( )( )---------------------------lt+=
Cyclic Data
37D Koop DSC 530 Spring 2016
[Sunlight intensity Weber et al 2001]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Semanticsbull The type of data does not tell us what the data means or how it
should be interpreted bull Tables have keysvalues fields have independentdependent vars
38D Koop DSC 530 Spring 2016
Attribute SemanticsKeys vs Values (Tables) or Independent vs Dependent (Fields)
Flat
Multidimensional
Tabl
es
Fiel
ds
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Data Model vs Conceptual Modelbull Data Model raw data that has a specific data type (eg floats)
- Temperature Example [325 540 -173] (floats)bull Conceptual Model how we think about the data
- Includes semantics reasoning- Temperature Example
bull Quantitative [3250 5400 -1730]bull Ordered [warm hot cold]bull Categorical [not burned burned not burned]
39D Koop DSC 530 Spring 2016
[via A Lex 2015]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Assignment 1bull httpwwwcisumassdedu
~dkoopdsc530assignment1html bull HTML CSS SVG and JavaScript bull Part 3 will likely take significantly
more time than the other parts bull Start now bull Turn in a1html (and possibly a1css a1js) via myCourses
bull Due Friday February 12 1159pm bull Late Policy
40D Koop DSC 530 Spring 2016
Part 3 New Bedford Average Temperature by Month (2015)
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Tasks
41D Koop DSC 530 Spring 2016
Trends
Actions
Analyze
Search
Query
Why
All Data
Outliers Features
Attributes
One ManyDistribution Dependency Correlation Similarity
Network Data
Spatial DataShape
Topology
Paths
Extremes
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
Identify Compare Summarize
tag
Target known Target unknown
Location knownLocation unknown
Lookup
Locate
Browse
Explore
Targets
Why
How
What
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Actions Analyzebull Consume
ndashExploration ndashExplanation ndashEnjoyment
bull Produce ndashAnnotation ndashRecord ndashDerivation
bullLeads to new directionsideas
42D Koop DSC 530 Spring 2016
Analyze
ConsumePresent EnjoyDiscover
ProduceAnnotate Record Derive
tag
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Actions Search and Querybull Search based on what
a user knows - Target - Location
bull Query depends onwhat data matters - One - Some (Often Two) - All
43D Koop DSC 530 Spring 2016
Search
Query
Identify Compare Summarize
Target known Target unknown
Location known
Location unknown
Lookup
Locate
Browse
Explore
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Targets
44D Koop DSC 530 Spring 2016
Trends
ALL DATA
Outliers Features
ATTRIBUTES
One ManyDistribution Dependency Correlation Similarity
Extremes
NETWORK DATA
SPATIAL DATA
Shape
Topology
Paths
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
How do we do visualization
45D Koop DSC 530 Spring 2016
Encode
ArrangeExpress Separate
Order Align
Use
Manipulate Facet Reduce
Change
Select
Navigate
Juxtapose
Partition
Superimpose
Filter
Aggregate
Embed
How
Encode Manipulate Facet
Map
Color
Motion
Size Angle Curvature
Hue Saturation Luminance
Shape
Direction Rate Frequency
from categorical and ordered attributes
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Analysis Example
46D Koop DSC 530 Spring 2016
[SpaceTree Supporting Exploration in Large Node Link Tree Design Evolution and Empirical Evaluation Grosjean Plaisant and Bederson Proc InfoVis 2002 p 57ndash64]
SpaceTree
[TreeJuxtaposer Scalable Tree Comparison Using Focus+Context With Guaranteed Visibility ACM Trans on Graphics (Proc SIGGRAPH) 22453ndash 462 2003]
TreeJuxtaposer
Present Locate Identify
Path between two nodes
Actions
Targets
SpaceTree
TreeJuxtaposer
Encode Navigate Select Filter AggregateTree
Arrange
Why What How
Encode Navigate Select
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]
Analysis Example Derivationbull Strahler number
ndash centrality metric for treesnetworks ndash derived quantitative attribute ndash draw top 5K of 500K for good skeleton
47D Koop DSC 530 Spring 2016
[Using Strahler numbers for real time visual exploration of huge graphs Auber Proc Intl Conf Computer Vision and Graphics pp 56ndash69 2002]
Task 1
58
54
64
84
24
74
6484
84
94
74
OutQuantitative attribute on nodes
58
54
64
84
24
74
6484
84
94
74
InQuantitative attribute on nodes
Task 2
Derive
WhyWhat
In Tree ReduceSummarize
HowWhyWhat
In Quantitative attribute on nodes TopologyIn Tree
Filter
InTree
OutFiltered TreeRemoved unimportant parts
InTree +
Out Quantitative attribute on nodes Out Filtered Tree
[Munzner (ill Maguire) 2014]