27
Data Visualization (CIS/DSC 468) Data & Tasks Dr. David Koop D. Koop, CIS 468, Spring 2017
Data Visualization (CISDSC 468)
Data amp Tasks
Dr David Koop
D Koop CIS 468 Spring 2017
Programmatic SVG Examplebull Draw a horizontal bar chart
- var a = [6 2 6 10 7 18 0 17 20 6]
bull Steps - Programmatically create SVG - Create individual rectangle for
each item bull Possible solution
- httpcodepeniodakooppenGrdBjE
2D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
3D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
bull Potential solution - arrmap(function(a) return afilter(function(d) return d lt 15 ) reduce(function(sd) return s+d ) )
4D Koop CIS 468 Spring 2017
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
5D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Programmatic SVG Examplebull Draw a horizontal bar chart
- var a = [6 2 6 10 7 18 0 17 20 6]
bull Steps - Programmatically create SVG - Create individual rectangle for
each item bull Possible solution
- httpcodepeniodakooppenGrdBjE
2D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
3D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
bull Potential solution - arrmap(function(a) return afilter(function(d) return d lt 15 ) reduce(function(sd) return s+d ) )
4D Koop CIS 468 Spring 2017
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
5D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
3D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
bull Potential solution - arrmap(function(a) return afilter(function(d) return d lt 15 ) reduce(function(sd) return s+d ) )
4D Koop CIS 468 Spring 2017
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
5D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Nesting Examplebull Sum all numbers less than 15 in each row (subarray)
- var arr = [[9 18 11] [15 17 14] [11 16 1]]
bull Potential solution - arrmap(function(a) return afilter(function(d) return d lt 15 ) reduce(function(sd) return s+d ) )
4D Koop CIS 468 Spring 2017
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
5D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
ldquoComputer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectivelyrdquo
5D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
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
6D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
22
Fieldattribute
item
Items amp Attributes
7D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Items (Nodes) amp Links
8D Koop CIS 468 Spring 2017
[Bostock 2011]
Item
Links
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Positions and Grids
9D Koop CIS 468 Spring 2017
Position Grid
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Assignment 1bull httpwwwcisumassdedu
~dkoopcis468assignment1html bull Use HTML CSS SVG and
JavaScript bull Part 3 will take longer bull Due next Friday (Feb 10) bull Questions
10D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Dataset Types
11D Koop CIS 468 Spring 2017
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
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Fieldattribute
itemcell
Tables
12D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
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
13D Koop CIS 468 Spring 2017
[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
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Networksbull Why networks instead of graphs bull Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
14D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
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
15D Koop CIS 468 Spring 2017
[Holten amp van Wijk 2009]
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Networks
16D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Fields
17D Koop CIS 468 Spring 2017
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
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
s0
2
400 01 02
10 11 12
20 21 22
3
5
2
4v0
v1
v2
3
5
Fields
17D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
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
18D Koop CIS 468 Spring 2017
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
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Spatial Data Example MRI
19D Koop CIS 468 Spring 2017
[via Levine 2014]
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
SciVis
20D Koop CIS 468 Spring 2017
[Google Image Search for scientific visualization 2017]
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
InfoVis
21D Koop CIS 468 Spring 2017
[Google Image Search for information visualization 2017]
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
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
bull Also black background vs white background (via A Lex)
22D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Sets amp Lists
23D Koop CIS 468 Spring 2017
[Daniels httpexperimentsundercurrentcom]
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
Attribute Types
24D Koop CIS 468 Spring 2017
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
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
231 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
25D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
241 = Quantitative2 = Nominal3 = Ordinal
quantitative ordinal categorical
Categorial Ordinal and Quantitative
26D Koop CIS 468 Spring 2017
