-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtesting.html
207 lines (204 loc) · 10.1 KB
/
testing.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Data Navigator demo</title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="application-name" content="Data Navigator demo" />
<meta name="theme-color" content="#21224A" />
<meta
property="og:image"
content="https://repository-images.githubusercontent.com/479978023/fa696c16-4c68-418b-9f28-fa256fff7a47"
/>
<meta property="og:title" content="Data Navigator demo" />
<meta property="og:locale" content="en_US" />
<meta
name="description"
content="A JavaScript library that allows for accessible navigation of data structures."
/>
<meta
property="og:description"
content="A JavaScript library that allows for accessible navigation of data structures."
/>
<link rel="canonical" href="https://dig.cmu.edu/data-navigator/" />
<meta property="og:url" content="https://dig.cmu.edu/data-navigator/" />
<meta property="og:site_name" content="Data Navigator demo" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Data Navigator demo" />
<meta name="twitter:site" content="@frankElavsky" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"description": "A JavaScript library that allows for accessible navigation of data structures.",
"headline": "Data Navigator demo",
"name": "Data Navigator demo",
"url": "https://dig.cmu.edu/data-navigator/"
}
</script>
<link href="./examples/style.css" rel="stylesheet" />
<style>
/* .dn-node {
background: #000;
} */
.dn-test-path {
margin: -2px;
}
.dn-test-path:focus {
border: 2px solid transparent;
outline: transparent solid 2px;
/* outline-offset: 1px; */
}
img {
pointer-events: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="testing-environment">
<div class="wrapper">
<h2>Instructions</h2>
<p>
Technically this is just a test environment for different structures as I am creating the
<code>dimensions</code> API for Data Navigator. But that being said, if someone comes across this
page, here are the keyboard instructions:
</p>
<hr />
<table class="table" data-header="header">
<thead class="thead">
<tr class="t-row">
<th class="t-column" scope="col">Command</th>
<th class="t-column" scope="col">Expected input</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="t-row">
<th scope="row" class="cell"><b>Enter</b> the visualization</th>
<td class="cell">Activate the "Enter navigation area" button.</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell"><b>Exit</b> the visualization</th>
<td class="cell"><kbd>ESC</kbd> key.</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell"><b>Left</b>: Backward along category or dimension</th>
<td class="cell"><kbd>←</kbd> (left arrow key).</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell"><b>Right</b>: Forward along category or dimension</th>
<td class="cell"><kbd>→</kbd> (right arrow key).</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell"><b>Up</b>: Backward along sorted metric</th>
<td class="cell"><kbd>↑</kbd> (up arrow key).</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell"><b>Down</b>: Forward along sorted metric</th>
<td class="cell"><kbd>↓</kbd> (down arrow key).</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell">Drill down to <b>child</b></th>
<td class="cell"><kbd>ENTER</kbd> key.</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell">Drill up to <b>parent-cat</b>egory node</th>
<td class="cell"><kbd>W</kbd> key.</td>
</tr>
<tr class="t-row">
<th scope="row" class="cell">Drill up to <b>parent-num</b>eric node</th>
<td class="cell"><kbd>J</kbd> key.</td>
</tr>
</tbody>
</table>
<hr />
<p>
The dimensions API does a few things to the navigation experience by default, notably both are about
the creation of "divisions" of that dimension: if a metric/numeric value is used, then it simply
becomes a sorted list of all values in the dataset in ascending order. The api can be used to
<code>numericallySubdivide</code> metrics. For categorical dimensions, they will be nested by
default. However, if a category contains all unique values (see last 2 examples), then the dimension
can be compressed using <code>compressSparseDivisions</code>.
</p>
<h2>Description of visualizations</h2>
All of these visualizations are visual representations of the structure created from different datasets
that have been sent into Data Navigator's <code>dimensions</code> API. I'm playing with the declarative
props for the API with these different visualizations as well as testing to see if the structure looks
as expected (and the API performs as expected).
</div>
<div class="wrapper">
<h2>Simple test (colors = dimension level)</h2>
<div id="dn-root-simple" class="wrapper">
<div id="simple"></div>
</div>
<div id="simple-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
<div class="wrapper">
<h2>Testing added data and generic edges -> rules generation</h2>
<div id="dn-root-added" class="wrapper">
<div id="added"></div>
</div>
<div id="added-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
<div class="wrapper">
<h2>Testing larger data (a stacked bar chart)</h2>
<div id="dn-root-larger" class="wrapper">
<div id="larger"></div>
</div>
<div id="larger-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
<div class="wrapper">
<h2>Testing maintaining stacked bar chart child nav direction</h2>
<p>
In the previous example, navigation seems counter-intuitive at the childmost level: left-right
navigates between months at the division level, but drilling into a month (since these are children
of the date's division) also maintain left-right. But at the childmost level, left-right moves
across groups instead. This fixes the lack of intuitive navigation for something like a stacked bar
chart: left-right always moves across dates.
</p>
<div id="dn-root-stacked" class="wrapper">
<div id="stacked"></div>
</div>
<div id="stacked-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
<div class="wrapper">
<h2>Testing sparse categorical data (one child per parent)</h2>
<div id="dn-root-sparse" class="wrapper">
<div id="sparse"></div>
</div>
<div id="sparse-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
<div class="wrapper">
<h2>Testing compressing sparse example into a list</h2>
<div id="dn-root-list" class="wrapper">
<div id="list"></div>
</div>
<div id="list-tooltip" role="presentation" class="tooltip hidden" focusable="false"></div>
</div>
<hr />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<script src="app/testing-bundle.js"></script>
</html>