-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtesting.html
178 lines (175 loc) · 8.86 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
<!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 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/d3@7.9.0/dist/d3.min.js"></script>
<script src="app/testing-bundle.js"></script>
</html>