View
232
Download
0
Category
Preview:
Citation preview
Data Visualization (DSC 530/CIS 602-02)
JavaScript and Data
Dr. David Koop
D. Koop, DSC 530, Spring 2017
Scalable Vector Graphics (SVG)• Vector graphics vs. Raster graphics • Drawing commands versus a grid of pixels • Why vector graphics?
2D. Koop, DSC 530, Spring 2017
Raster Vector
SVG Example• http://codepen.io/dakoop/pen/
yexVXb • <svg id="mysvg" width="300" height="600"> <circle cx="50" cy="50" r="50"/> <rect class="lego" x="150" y="150" width="50" height="20"/> <path id="triangle" d="M 20 200 L 120 200 L 120 250 Z"/> </svg>
• circle { fill: green; stroke: black; stroke-width: 4px; } .lego { fill: red; stroke:
3D. Koop, DSC 530, Spring 2017
JavaScript in one slide• Interpreted and Dynamically-typed Programming Language • Statements end with semi-colons, normal blocking with brackets • Variables: var a = 0; • Operators: +, -, *, /, [ ] • Control Statements: if (<expr>){…} else {…}, switch • Loops: for, while, do-while • Arrays: var a = [1,2,3]; a[99] = 100; console.log(a.length);
• Functions: function myFunction(a,b) { return a + b; } • Objects: var obj; obj.x = 3; obj.y = 5;
- Prototypes for instance functions • Comments are /* Comment */ or // Single-line Comment
4D. Koop, DSC 530, Spring 2017
Important JavaScript Concepts• Functional Programming: you can pass functions to functions
- Array map/filter/reduce/forEach - cTemps=fTemps.map(function(d){return (d-32)*5.0/9.0;});
• Closures: functions keep track of their environments - function makeAdder(x) { return function(y) { return x + y; }; }
• Objects and Properties: - var student = {name: "John Smith", id: "000012345", class: "Senior", hometown: "Fall River, MA, USA"};
- Properties can be accessed via dot or bracket notation - Objects can also function as associative arrays
• Function chaining: succinct, avoids intermediate variables in code
5D. Koop, DSC 530, Spring 2017
Quiz• Given this data:
- var a = [6, 2, 6, 10, 7, 18, 0, 17, 20, 6]; • Questions:
- How would I subtract one from each item? - How would I find only the values >= 10? - How would I sum the array? - How would I create a reversed version of the array?
6D. Koop, DSC 530, Spring 2017
Quiz Answers• Data: var a = [6, 2, 6, 10, 7, 18, 0, 17, 20, 6]; • How would I subtract one from each item?
- a.map(function(d) { return d-1; }) • How would I find only the values >= 10?
- a.filter(function(d) { return d >= 10; }) • How would I sum the array?
- a.reduce(function(s,d) { return s + d; }) • How would I create a reversed version of the array?
- b = []; a.forEach(function(d) { b.unshift(d); });
- …or a.reverse() // modifies in place
7D. Koop, DSC 530, Spring 2017
Assignment 1• http://www.cis.umassd.edu/
~dkoop/dsc530/assignment1.html • Use HTML, CSS, SVG, and
JavaScript • Part 3 will take longer • Due next Friday (Feb. 10) • Start soon
8D. Koop, DSC 530, Spring 2017
Manipulating the DOM with JavaScript• Key global variables:
• window: Global namespace • document: Current document
• Methods to get specific elements: • document.querySelector(…): Get an element via a selector • document.getElementById(…): Get an element via its id • document.querySelectorAll(…): Get a list of all matching elts
• HTML is parsed into an in-memory document (DOM) • Can access and modify information stored in the DOM • Can add information to the DOM
9D. Koop, DSC 530, Spring 2017
Example: JavaScript and the DOM• Start with no real content, just divs: <div id="firstSection"></div> <div id="secondSection"></div> <div id="finalSection"></div>
• Get existing elements: - document.querySelector - document.getElementById
• Programmatically add elements: - document.createElement - document.createTextNode - Element.appendChild - Element.setAttribute
10D. Koop, DSC 530, Spring 2017
Creating SVG figures via JavaScript• SVG elements can be accessed and modified just like HTML
elements • Create a new SVG programmatically and add it into a page:
- var divElt = document.getElementById("chart");var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg"); divElt.appendChild(svg);
• You can assign attributes: - svg.setAttribute("height", 400); svg.setAttribute("width", 600); svgCircle.setAttribute("r", 50);
11D. Koop, DSC 530, Spring 2017
SVG Manipulation Example• Draw a horizontal bar chart
- var a = [6, 2, 6, 10, 7, 18, 0, 17, 20, 6]; • Steps?
12D. Koop, DSC 530, Spring 2017
SVG Manipulation Example• Draw a horizontal bar chart
- var a = [6, 2, 6, 10, 7, 18, 0, 17, 20, 6]; • Steps:
- Programmatically create SVG - Create individual rectangle for each item
13D. Koop, DSC 530, Spring 2017
Manipulating SVG via JavaScript• SVG can be navigated just like the DOM • Example:
function addEltToSVG(svg, name, attrs) { var element = document.createElementNS( "http://www.w3.org/2000/svg", name); if (attrs === undefined) attrs = {}; for (var key in attrs) { element.setAttribute(key, attrs[key]); } svg.appendChild(element); } mysvg = document.getElementById("mysvg"); addEltToSVG(mysvg, "rect", {"x": 50, "y": 50, "width": 40,"height": 40, "fill": "blue"});
14D. Koop, DSC 530, Spring 2017
“Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively.”
15D. Koop, DSC 530, Spring 2017
Data• What is this data?
• Semantics: real-world meaning of the data • Type: structural or mathematical interpretation • Both often require metadata
- Sometimes we can infer some of this information - Line between data and metadata isn’t always clear
16D. Koop, DSC 530, Spring 2017
Data
17D. Koop, DSC 530, Spring 2017
Data Types• Items
- An item is an individual discrete entity - e.g. row in a table, node in a network
• Attributes - An attribute is some specific property that can be measured,
observed, or logged - a.k.a. variable, (data) dimension
18D. Koop, DSC 530, Spring 2017
22
Fieldattribute
item
Items & Attributes
19D. Koop, DSC 530, Spring 2017
Data Types• Nodes
- Synonym for item but in the context of networks (graphs) • Links
- A link is a relation between two items - e.g. social network friends, computer network links
20D. Koop, DSC 530, Spring 2017
Items & Links
21D. Koop, DSC 530, Spring 2017
[Bostock, 2011]
Item
Links
Data Types• Positions:
- A position is a location in space (usually 2D or 3D) - May be subject to projections - e.g. cities on a map, a sampled region in an CT scan
• Grids: - A grid specifies how data is sampled both geometrically and
topologically - e.g. how CT scan data is stored
22D. Koop, DSC 530, Spring 2017
Positions and Grids
23D. Koop, DSC 530, Spring 2017
Position Grid
Dataset Types
24D. Koop, DSC 530, 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
25D. Koop, DSC 530, 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)
3.0
3.0
3.0
3.0
3.0
3.0
3.03.0
3.5
3.5
3.5
3.5
3.5
3.5
3.53.5
4.0
4.0
4.0
4.0
4.0
4.0
4.04.0
4.5
4.5
4.5
4.5
4.5
4.5
4.54.5
5.0
5.0
5.0
5.0
5.0
5.0
5.05.0
5.5
5.5
5.5
5.5
5.5
5.5
5.55.5
6.0
6.0
6.0
6.0
6.0
6.0
6.06.0
6.5
6.5
6.5
6.5
6.5
6.5
6.56.5
7.0
7.0
7.0
7.0
7.0
7.0
7.07.0
7.5
7.5
7.5
7.5
7.5
7.5
7.57.5
8.0
8.0
8.0
8.0
8.0
8.0
8.08.0cylinders
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)
2,000
2,000
2,000
2,000
2,000
2,000
2,0002,000
2,500
2,500
2,500
2,500
2,500
2,500
2,5002,500
3,000
3,000
3,000
3,000
3,000
3,000
3,0003,000
3,500
3,500
3,500
3,500
3,500
3,500
3,5003,500
4,000
4,000
4,000
4,000
4,000
4,000
4,0004,000
4,500
4,500
4,500
4,500
4,500
4,500
4,5004,500
5,000
5,000
5,000
5,000
5,000
5,000
5,0005,000
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
26D. Koop, DSC 530, Spring 2017
[M. Bostock, 2011]
Networks• Why networks instead of graphs? • Tables can represent networks
- Many-many relationships - Also can be stored as specific
graph databases or files
27D. Koop, DSC 530, Spring 2017
Danny Holten & 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 4.1. To facilitate the comparison of migration flow inFigure 8, we use a similar rendering technique as the onethat Cui et al. [CZQ⇤08] 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 3.3. 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 2.66GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics card.Our prototype was implemented in Borland Delphi 7.
c� 2009 The Author(s)Journal compilation c� 2009 The Eurographics Association and Blackwell Publishing Ltd.
Networks
28D. Koop, DSC 530, Spring 2017
[Holten & van Wijk, 2009]
Networks
29D. Koop, DSC 530, Spring 2017
Danny Holten & 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 4.1. To facilitate the comparison of migration flow inFigure 8, we use a similar rendering technique as the onethat Cui et al. [CZQ⇤08] 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 3.3. 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 2.66GHz PC running Windows XPwith 2GB of RAM and a GeForce 8800GT graphics card.Our prototype was implemented in Borland Delphi 7.
c� 2009 The Author(s)Journal compilation c� 2009 The Eurographics Association and Blackwell Publishing Ltd.
[Holten & van Wijk, 2009]
Fields
30D. Koop, DSC 530, Spring 2017
Scalar Fields Vector Fields Tensor Fields
Each point in space has an associated...
Vector Fields
s0
2
4�00 �01 �02
�10 �11 �12
�20 �21 �22
3
5
2
4v0
v1
v2
3
5
Fields
30D. Koop, DSC 530, 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
Fields• Difference between continuous and discrete values • Examples: temperature, pressure, density • Grids necessary to sample continuous data:
• Interpolation: “how to show values between the sampled points in ways that do not mislead”
31D. Koop, DSC 530, Spring 2017
Grids (Meshes)• Meshes combine positional information (geometry) with
topological information (connectivity).
• Mesh type can differ substantial depending in the way mesh cells are formed.
From Weiskopf, Machiraju, Möller© Weiskopf/Machiraju/Möller
Data Structures
• Grid types– 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, Möller]
Spatial Data Example: MRI
32D. Koop, DSC 530, Spring 2017
[via Levine, 2014]
Scivis and Infovis• Two subfields of visualization • 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
• In Infovis, the data has no set spatial representation, designer chooses how to visually represent data
33D. Koop, DSC 530, Spring 2017
Recommended