-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (127 loc) · 5.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSE512: Data Visualization</title>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css"
href="http://courses.cs.washington.edu/courses/cse512/15sp/style.css"/>
</head>
<body>
<div class='content wider'>
<div class='title'>
<a href="http://courses.cs.washington.edu/courses/cse512/15sp/">
<strong>CSE512</strong></a>
Projects
<small>(Spring 2015)</small>
</div>
<br/>
<div class='pub' data-spy="scroll" data-target=".navbar">
<h1 class="title">Visualizing Vega's Scenegraph and User Interaction</h1>
<div class="authors">
Jane Hoffswell
</div>
<div class="figure">
<img src="summary.png" width="100%">
<div class="caption">Dynamic update of the scenegraph of an
index chart based on end-user interaction.
</div>
</div>
<p>
Vega is a declarative visualization language that enables
rapid iteration while allowing designers to focus on visual
encoding instead of low-level implementation details. However,
the separation of specification from execution inhibits debugging
effectiveness due to obfuscation of the underlying code. Visualizing
Vega's scenegraph enables rapid exploration of the visualization
structure and underlying data. As end-users interact with the
visualization, the scenegraph updates dynamically to show changes
in the underlying data. Inspection of the visualization enables
users to identify related elements in the scenegraph. Visually
surfacing system internals enhances user understanding and
facilitates the identification of errors that would otherwise
require complex debugging cycles.
</p>
<h2>Software</h2>
<p>
You can try Vega and the scenegraph visualization online
<a href="main.html">here</a>.
</p>
<p>
The scenegraph is a tree representation of the final
visualization where nodes in the tree represent different
components of the output visualization. The tree is dynamically
updated as users interact with the visualization. The following
is a list of features in the scenegraph representation.
</p>
<h3>General Features</h3>
<strong>Data on Demand</strong>
<p>
The user can right-click nodes in the scenegraph to print the
corresponding data to the console.
</p>
<strong>Collapse/Expand</strong>
<p>
Selecting nodes in the scenegraph collapses or expands them.
Collapsed nodes are represented with a black border. The size
of collapsed nodes is indicative of the number of hidden
descendants of that node.
</p>
<p>
The control buttons in the "Scenegraph" bar allow the user to
rapidly expand or collapse nodes. "Show All" expands all nodes
to show all nodes in the tree. "Auto Collapse" collapses nodes
for which the number of children exceeds some threashold.
</p>
<strong>Modify Scenegraph</strong>
<p>
"Remove Axis" and "Remove Legend" removes nodes corresponding
to these components from the scenegraph visualization. These
nodes are <emph>not</emph> removed from the visualization, but
are simply hidden from the user's view of the scenegraph. The
user can select these buttons again to restore the nodes.
</p>
<h3>Interaction Mode</h3>
<p>
While in the "Interaction" mode, the user can complete end-
user interactions for the Vega visualization. As the user
interacts with the visualization, the scenegraph is grayed out.
Once the user stops interacting, the scenegraph is updated to
show how the final state has changed from the initial state of
the visualization.
</p>
<p>
The color of the node (as shown in the legend) is representative
of the percentage of hidden descendant nodes that have changed
in some way. The stroke color of the node denotes the update
status of that node (either
<span style="color:orange;">modified</span>,
<span style="color:limegreen;">added</span>,
or <span style="color:red;">removed</span>.
</p>
<h3>Inspection Mode</h3>
<p>
The user can select the "Inspect" button to change from the
interact mode to instead inspect elements of the visualization.
In this mode, end-user interaction is disabled. Instead, when
the user clicks the visualization, all nodes containing the
point are highlighted in the scenegraph in
<span style="color:pink;">pink</span>.
</p>
<h2>Materials</h2>
<div class="links">
<a href="final/paper-jhoffs.pdf">PDF</a>
|
<a href="final/poster-jhoffs.pdf">Poster</a>
|
<a href="https://github.com/CSE512-15S/fp-jhoffs">Code</a>
</div>
<div class='footer'>
<a href='http://cs.washington.edu'>Computer Science & Engineering</a> -
<a href='http://www.washington.edu'>University of Washington</a>
</div>
</div>
<br/>
<br/>
</div>
</body>
</html>