11 |
12 |
19 |
20 | Data Navigator IEEE VIS "Lemonstration" 🍋
133 |134 |
137 |
184 |
138 |
145 |
146 |
182 |
183 | 139 | Data Navigator is a project that allows all kinds of assistive technologies and input modalities 140 | to navigate data structures, even novel, fabricated fruit-based interfaces! 141 |
142 |Instructions
143 |Touch the foil and tap the fruits to move around!
144 || Fruit | 148 |Expected output | 149 |
|---|---|
| L lemon | 154 |Move left | 155 |
| R lemon | 158 |Move right | 159 |
| U lemon | 162 |Move up | 163 |
| D lemon | 166 |Move down | 167 |
| Lime | 170 |Drill down (to children) | 171 |
| Mandarin | 174 |Drill up (towards x-axis) | 175 |
| Apple | 178 |Drill up (towards legend) | 179 |
185 |
196 |
186 |
195 |
187 | 
192 |
193 |
194 |
192 |
79 |
156 |
164 |
172 |
187 |
195 |
203 |
211 |
212 |
213 |
214 |
215 |
216 |
--------------------------------------------------------------------------------
/src/rendering.ts:
--------------------------------------------------------------------------------
1 | import { NodeElementDefaults } from './consts';
2 | import type { RenderingOptions, NodeObject } from './data-navigator';
3 |
4 | export default (options: RenderingOptions) => {
5 | const setActiveDescendant = e => {
6 | renderer.wrapper.setAttribute('aria-activedescendant', e.srcElement.id);
7 | };
8 | const removeActiveDescendant = () => {
9 | renderer.wrapper.setAttribute('aria-activedescendant', '');
10 | };
11 | let renderer = {} as any;
12 | let initialized = false;
13 | let defaults = {
14 | cssClass: NodeElementDefaults.cssClass,
15 | spatialProperties: { ...NodeElementDefaults.spatialProperties },
16 | semantics: { ...NodeElementDefaults.semantics },
17 | parentSemantics: { ...NodeElementDefaults.parentSemantics },
18 | existingElement: { ...NodeElementDefaults.existingElement }
19 | };
20 | if (options.defaults) {
21 | defaults.cssClass = options.defaults.cssClass || defaults.cssClass;
22 | defaults.spatialProperties = options.defaults.spatialProperties
23 | ? { ...defaults.spatialProperties, ...options.defaults.spatialProperties }
24 | : defaults.spatialProperties;
25 | defaults.semantics = options.defaults.semantics
26 | ? { ...defaults.semantics, ...options.defaults.semantics }
27 | : defaults.semantics;
28 | defaults.parentSemantics = options.defaults.parentSemantics
29 | ? { ...defaults.parentSemantics, ...options.defaults.parentSemantics }
30 | : defaults.parentSemantics;
31 | defaults.existingElement = options.defaults.existingElement
32 | ? { ...defaults.existingElement, ...options.defaults.existingElement }
33 | : defaults.existingElement;
34 | }
35 | renderer.initialize = () => {
36 | if (initialized) {
37 | console.error(
38 | `The renderer wrapper has already been initialized successfully, RenderingOptions.suffixId is: ${options.suffixId}. No further action was taken.`
39 | );
40 | return;
41 | }
42 | if (options.root && document.getElementById(options.root.id)) {
43 | renderer.root = document.getElementById(options.root.id);
44 | } else {
45 | console.error(
46 | 'No root element found, cannot build: RenderingOptions.root.id must reference an existing DOM element in order to render children.'
47 | );
48 | return;
49 | }
50 | renderer.root.style.position = 'relative';
51 | renderer.root.classList.add('dn-root');
52 | if (!options.suffixId) {
53 | console.error('No suffix id found: options.suffixId must be specified.');
54 | return;
55 | }
56 | // build renderer.wrapper
57 | renderer.wrapper = document.createElement('div');
58 | renderer.wrapper.id = 'dn-wrapper-' + options.suffixId;
59 | renderer.wrapper.setAttribute('role', 'application');
60 | renderer.wrapper.setAttribute('aria-label', options.root.description || 'Data navigation structure');
61 | renderer.wrapper.setAttribute('aria-activedescendant', '');
62 | renderer.wrapper.classList.add('dn-wrapper');
63 | renderer.wrapper.style.width = options.root && options.root.width ? options.root.width : '100%';
64 | if (options.root && options.root.height) {
65 | renderer.wrapper.style.height = options.root.height;
66 | }
67 |
68 | // TO-DO: build interaction instructions/menu
69 |
70 | // build entry button
71 | if (options.entryButton && options.entryButton.include) {
72 | renderer.entryButton = document.createElement('button');
73 | renderer.entryButton.id = 'dn-entry-button-' + options.suffixId;
74 | renderer.entryButton.classList.add('dn-entry-button');
75 | renderer.entryButton.innerText = `Enter navigation area`;
76 | if (options.entryButton.callbacks && options.entryButton.callbacks.click) {
77 | renderer.entryButton.addEventListener('click', options.entryButton.callbacks.click);
78 | }
79 | if (options.entryButton.callbacks && options.entryButton.callbacks.focus) {
80 | renderer.entryButton.addEventListener('focus', options.entryButton.callbacks.focus);
81 | }
82 | renderer.wrapper.appendChild(renderer.entryButton);
83 | }
84 |
85 | renderer.root.appendChild(renderer.wrapper);
86 |
87 | if (options.exitElement?.include) {
88 | renderer.exitElement = document.createElement('div');
89 | renderer.exitElement.id = 'dn-exit-' + options.suffixId;
90 | renderer.exitElement.classList.add('dn-exit-position');
91 | renderer.exitElement.innerText = `End of data structure.`;
92 | renderer.exitElement.setAttribute('aria-label', `End of data structure.`);
93 | renderer.exitElement.setAttribute('role', 'note');
94 | renderer.exitElement.setAttribute('tabindex', '-1');
95 | renderer.exitElement.style.display = 'none';
96 | renderer.exitElement.addEventListener('focus', e => {
97 | renderer.exitElement.style.display = 'block';
98 | renderer.clearStructure();
99 | if (options.exitElement?.callbacks?.focus) {
100 | options.exitElement.callbacks.focus(e);
101 | }
102 | });
103 | renderer.exitElement.addEventListener('blur', e => {
104 | renderer.exitElement.style.display = 'none';
105 | if (options.exitElement?.callbacks?.blur) {
106 | options.exitElement.callbacks.blur(e);
107 | }
108 | });
109 |
110 | renderer.root.appendChild(renderer.exitElement);
111 | }
112 | initialized = true;
113 | return renderer.root;
114 | };
115 | renderer.render = (nodeData: NodeObject) => {
116 | const id = nodeData.renderId + '';
117 | let d = options.elementData[id];
118 | if (!d) {
119 | console.warn(`Render data not found with renderId: ${id}. Failed to render.`);
120 | return;
121 | }
122 |
123 | if (!initialized) {
124 | console.error('render() was called before initialize(), renderer must be initialized first.');
125 | return;
126 | }
127 | let useExisting = false;
128 | let existingSpatialProperties = {};
129 | const resolveProp = (prop, subprop?, checkExisting?) => {
130 | const p1 = d[prop] || defaults[prop];
131 | const s1 = !(checkExisting && useExisting) ? p1[subprop] : existingSpatialProperties[subprop];
132 | const s2 = defaults[prop][subprop];
133 | return typeof p1 === 'function'
134 | ? p1(d, nodeData.datum)
135 | : typeof s1 === 'function'
136 | ? s1(d, nodeData.datum)
137 | : s1 || s2 || (!subprop ? p1 : undefined);
138 | };
139 | useExisting = resolveProp('existingElement', 'useForSpatialProperties');
140 | existingSpatialProperties = resolveProp('existingElement', 'spatialProperties');
141 | const width = parseFloat(resolveProp('spatialProperties', 'width', true) || 0);
142 | const height = parseFloat(resolveProp('spatialProperties', 'height', true) || 0);
143 | const x = parseFloat(resolveProp('spatialProperties', 'x', true) || 0);
144 | const y = parseFloat(resolveProp('spatialProperties', 'y', true) || 0);
145 | const node = document.createElement(resolveProp('parentSemantics', 'elementType'));
146 | const wrapperAttrs = resolveProp('parentSemantics', 'attributes');
147 | if (typeof wrapperAttrs === 'object') {
148 | Object.keys(wrapperAttrs).forEach(wrapperAttr => {
149 | node.setAttribute(wrapperAttr, wrapperAttrs[wrapperAttr]);
150 | });
151 | }
152 | node.setAttribute('role', resolveProp('parentSemantics', 'role'));
153 | node.id = id;
154 | node.classList.add('dn-node');
155 | node.classList.add(resolveProp('cssClass'));
156 | node.style.width = width + 'px';
157 | node.style.height = height + 'px';
158 | node.style.left = x + 'px';
159 | node.style.top = y + 'px';
160 | node.setAttribute('tabindex', '0');
161 | node.addEventListener('focus', setActiveDescendant);
162 | node.addEventListener('blur', removeActiveDescendant);
163 |
164 | const nodeText = document.createElement(resolveProp('semantics', 'elementType'));
165 | const attributes = resolveProp('semantics', 'attributes');
166 | if (typeof attributes === 'object') {
167 | Object.keys(attributes).forEach(attribute => {
168 | node.setAttribute(attribute, attributes[attribute]);
169 | });
170 | }
171 | nodeText.setAttribute('role', resolveProp('semantics', 'role'));
172 | nodeText.classList.add('dn-node-text');
173 | if (d.showText) {
174 | nodeText.innerText = d.semantics.label;
175 | }
176 | const label = resolveProp('semantics', 'label');
177 | if (!label) {
178 | console.error(
179 | 'Accessibility error: a label must be supplied to every rendered element using semantics.label.'
180 | );
181 | }
182 | nodeText.setAttribute('aria-label', label);
183 |
184 | node.appendChild(nodeText);
185 | const hasPath = resolveProp('spatialProperties', 'path');
186 | if (hasPath) {
187 | const totalWidth = width + x + 10;
188 | const totalHeight = height + y + 10;
189 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
190 | svg.setAttribute('width', totalWidth + '');
191 | svg.setAttribute('height', totalHeight + '');
192 | svg.setAttribute('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
193 | svg.style.left = -x + 'px';
194 | svg.style.top = -y + 'px';
195 | svg.classList.add('dn-node-svg');
196 | svg.setAttribute('role', 'presentation');
197 | svg.setAttribute('focusable', 'false');
198 |
199 | const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
200 | path.setAttribute('d', hasPath);
201 | path.classList.add('dn-node-path');
202 | svg.appendChild(path);
203 | node.appendChild(svg);
204 | }
205 | renderer.wrapper.appendChild(node);
206 | return node;
207 | };
208 | renderer.remove = renderId => {
209 | const node = document.getElementById(renderId);
210 | if (renderer.wrapper.getAttribute('aria-activedescendant') === renderId) {
211 | renderer.wrapper.setAttribute('aria-activedescendant', '');
212 | }
213 | if (node) {
214 | node.removeEventListener('focus', setActiveDescendant);
215 | node.removeEventListener('blur', removeActiveDescendant);
216 | node.remove();
217 | }
218 | };
219 | renderer.clearStructure = () => {
220 | [...renderer.wrapper.children].forEach(child => {
221 | if (!(renderer.entryButton && renderer.entryButton === child)) {
222 | renderer.remove(child.id);
223 | }
224 | });
225 | };
226 | return renderer;
227 | };
228 |
--------------------------------------------------------------------------------
/examples/docs.js:
--------------------------------------------------------------------------------
1 | import { default as dataNavigator } from '../src/index.ts';
2 | import { ForceGraph } from './force-graph.js';
3 | import { describeNode } from '../src/utilities.ts';
4 | import { plot } from './bokeh.js';
5 |
6 | let exit = {};
7 |
8 | const interactiveData = {
9 | data: [
10 | [
11 | [3, 2.75],
12 | [0, 0]
13 | ],
14 | [
15 | [3.75, 4],
16 | [3, 2.75]
17 | ]
18 | ],
19 | indices: {
20 | fruit: {
21 | apple: 0,
22 | banana: 1
23 | },
24 | store: {
25 | a: 0,
26 | b: 1
27 | }
28 | }
29 | };
30 |
31 | const convertToArray = (o, include, exclude) => {
32 | let x = [];
33 | if (include) {
34 | include.forEach(i => {
35 | let n = { id: i };
36 | x.push(n);
37 | });
38 | }
39 | Object.keys(o).forEach(k => {
40 | if (exclude) {
41 | let excluding = false;
42 | exclude.forEach(e => {
43 | if (k === e) {
44 | excluding = true;
45 | }
46 | });
47 | if (excluding) {
48 | return;
49 | }
50 | }
51 | x.push(o[k]);
52 | });
53 | return x;
54 | };
55 |
56 | const addRenderingProperties = (nodes, root, size, showWrapper, useFull) => {
57 | if (showWrapper) {
58 | Object.keys(nodes).forEach(k => {
59 | let node = nodes[k];
60 | // our rendering engine looks for a "renderId", we will just use our id
61 | // however, if you have an element that is already rendered (like SVG),
62 | // then you can use that id, and then use "node.existingElement" api
63 | if (!node.renderId) {
64 | node.renderId = node.id;
65 | }
66 | // our main job to make this navigation experience accessible, so
67 | // we need to have semantics, which means we need a descriptive label
68 |
69 | node.semantics = {
70 | label: describeNode(node.data, {})
71 | };
72 |
73 | node.spatialProperties = {
74 | x: -2,
75 | y: -2,
76 | width: size,
77 | height: size
78 | };
79 | });
80 | } else if (useFull) {
81 | Object.keys(nodes).forEach(k => {
82 | let node = nodes[k];
83 | if (!node.renderId) {
84 | node.renderId = node.id;
85 | }
86 | let label = '';
87 | node.existingElement = {
88 | useForSpatialProperties: true,
89 | spatialProperties: () => {
90 | let box = document
91 | .getElementById(root)
92 | .querySelector('#svg' + node.renderId)
93 | .getBBox();
94 | return {
95 | x: box.x + size / 2 - 0.91,
96 | y: box.y + size / 2 - 0.91,
97 | width: box.width,
98 | height: box.height
99 | };
100 | }
101 | };
102 | if (!node.derivedNode) {
103 | label = describeNode(node.data, {});
104 | } else {
105 | if (node.data.dimensionKey) {
106 | // dimension
107 | let count = 0;
108 | let divisions = Object.keys(node.data.divisions);
109 | if (divisions.length) {
110 | divisions.forEach(div => {
111 | count += Object.keys(node.data.divisions[div].values).length;
112 | });
113 | }
114 | label = `${node.derivedNode}.`;
115 | label +=
116 | divisions.length && count
117 | ? ` Contains ${divisions.length} division${
118 | divisions.length > 1 ? 's' : ''
119 | } which contain ${count} datapoint${count > 1 ? 's' : ''} total.`
120 | : ' Contains no child data points.';
121 | label += ` ${node.data.type} dimension.`;
122 | } else {
123 | // division
124 | label = `${node.derivedNode}: ${node.data[node.derivedNode]}. Contains ${
125 | Object.keys(node.data.values).length
126 | } child data point${Object.keys(node.data.values).length > 1 ? 's' : ''}. Division of ${
127 | node.derivedNode
128 | } dimension.`;
129 | }
130 | }
131 | node.semantics = {
132 | label
133 | };
134 | });
135 | } else {
136 | Object.keys(nodes).forEach(k => {
137 | let node = nodes[k];
138 | // our rendering engine looks for a "renderId", we will just use our id
139 | // however, if you have an element that is already rendered (like SVG),
140 | // then you can use that id, and then use "node.existingElement" api
141 | if (!node.renderId) {
142 | node.renderId = node.id;
143 | }
144 |
145 | // our main job to make this navigation experience accessible, so
146 | // we need to have semantics, which means we need a descriptive label
147 |
148 | node.semantics = {
149 | label: describeNode(node.data, {})
150 | };
151 | });
152 | }
153 | };
154 |
155 | const createRenderer = (structure, id, enter, interactivePlot) => {
156 | return dataNavigator.rendering({
157 | elementData: structure.nodes,
158 | defaults: {
159 | cssClass: !interactivePlot ? 'dn-test-class' : 'dn-manual-focus-node'
160 | },
161 | suffixId: 'data-navigator-schema-' + id,
162 | root: {
163 | id: id + '-wrapper',
164 | cssClass: '',
165 | width: '100%',
166 | height: 0
167 | },
168 | entryButton: {
169 | include: true,
170 | callbacks: {
171 | click: () => {
172 | enter();
173 | }
174 | }
175 | },
176 | exitElement: {
177 | include: true
178 | }
179 | });
180 | };
181 |
182 | const hideTooltip = (id, hideIndicator) => {
183 | document.getElementById(id + '-tooltip').classList.add('hidden');
184 | if (hideIndicator) {
185 | document.getElementById(id + '-focus-indicator').classList.add('hidden');
186 | }
187 | };
188 |
189 | const showTooltip = (d, id, size, coloredBy, showIndicator) => {
190 | const tooltip = document.getElementById(id + '-tooltip');
191 | tooltip.classList.remove('hidden');
192 | tooltip.innerText =
193 | d.semantics?.label ||
194 | `${d.id}${d.data?.[coloredBy] ? ', ' + d.data[coloredBy] : ''} (generic node, edges hidden).`;
195 | const bbox = tooltip.getBoundingClientRect();
196 | // const offset = bbox.width / 2;
197 | const yOffset = bbox.height / 2;
198 | tooltip.style.textAlign = 'left';
199 | tooltip.style.transform = `translate(${size + 1}px,${size / 2 - yOffset}px)`;
200 | if (showIndicator) {
201 | const svg = document.getElementById(id + '-wrapper').parentNode.parentNode.querySelector('svg');
202 | let indicator = document.getElementById(id + '-focus-indicator');
203 | if (!indicator) {
204 | indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
205 | indicator.id = id + '-focus-indicator';
206 | indicator.setAttribute('class', 'dn-focus-indicator hidden');
207 | indicator.setAttribute('cx', 0);
208 | indicator.setAttribute('cy', 0);
209 | indicator.setAttribute('r', 6.5);
210 | indicator.setAttribute('fill', 'none');
211 | indicator.setAttribute('stroke', '#000');
212 | indicator.setAttribute('stroke-width', '2');
213 | svg.appendChild(indicator);
214 | }
215 | let target = svg.querySelector('#svg' + d.renderId);
216 | indicator.setAttribute('cx', target.getAttribute('cx'));
217 | indicator.setAttribute('cy', target.getAttribute('cy'));
218 | indicator.classList.remove('hidden');
219 | }
220 | };
221 |
222 | const initializeDataNavigator = (structure, rootId, entryPoint, size, colorBy, interactivePlot) => {
223 | let previous;
224 | let current;
225 |
226 | const enter = () => {
227 | const nextNode = input.enter();
228 | if (nextNode) {
229 | initiateLifecycle(nextNode);
230 | }
231 | };
232 |
233 | const move = direction => {
234 | const nextNode = input.move(current, direction);
235 | if (nextNode) {
236 | initiateLifecycle(nextNode);
237 | }
238 | };
239 |
240 | exit[rootId] = () => {
241 | rendering.exitElement.style.display = 'block';
242 | input.focus(rendering.exitElement.id);
243 | previous = current;
244 | current = null;
245 | rendering.remove(previous);
246 | };
247 |
248 | const rendering = createRenderer(structure, rootId, enter, interactivePlot);
249 | rendering.initialize();
250 | const input = dataNavigator.input({
251 | structure,
252 | navigationRules: structure.navigationRules,
253 | entryPoint,
254 | exitPoint: rendering.exitElement.id
255 | });
256 |
257 | const initiateLifecycle = nextNode => {
258 | // should we remove existing nodes?
259 |
260 | const renderedNode = rendering.render({
261 | renderId: nextNode.renderId,
262 | datum: nextNode
263 | });
264 | renderedNode.addEventListener('keydown', e => {
265 | const direction = input.keydownValidator(e);
266 | if (direction) {
267 | e.preventDefault();
268 | move(direction);
269 | }
270 | });
271 | renderedNode.addEventListener('blur', _e => {
272 | hideTooltip(rootId, true);
273 | });
274 | renderedNode.addEventListener('focus', _e => {
275 | showTooltip(nextNode, rootId, size, colorBy, true);
276 | if (interactivePlot) {
277 | const i = interactiveData.indices.fruit[nextNode.data.fruit];
278 | const d = interactiveData.data[i];
279 | const target = interactiveData.indices.store[nextNode.data.store];
280 | const line_color = target ? ['none', '#000000'] : ['#000000', 'none'];
281 | document.getElementById('wrappedIndicatorChart').innerHTML = '';
282 | plot('wrappedIndicatorChart', {
283 | top: d[0],
284 | bottom: d[1],
285 | line_color
286 | });
287 | }
288 | });
289 | input.focus(nextNode.renderId);
290 | previous = current;
291 | current = nextNode.id;
292 | rendering.remove(previous);
293 | };
294 | };
295 |
296 | const buildGraph = (
297 | structure,
298 | rootId,
299 | size,
300 | colorBy,
301 | entryPoint,
302 | inclusions,
303 | exclusions,
304 | disableRenderer,
305 | hideEdges,
306 | showWrapper,
307 | useFull
308 | ) => {
309 | addRenderingProperties(structure.nodes, rootId, size, showWrapper, useFull);
310 |
311 | let graph = ForceGraph(
312 | {
313 | nodes: convertToArray(structure.nodes, inclusions),
314 | links: convertToArray(structure.edges, [], exclusions)
315 | },
316 | {
317 | nodeId: d => d.id,
318 | nodeGroup: d => (colorBy === 'dimensionLevel' ? d.dimensionLevel : d.data?.[colorBy]),
319 | width: size,
320 | linkStrokeOpacity: !hideEdges ? 0.75 : 0,
321 | height: size
322 | }
323 | );
324 | document.getElementById(rootId).appendChild(graph);
325 | document
326 | .getElementById(rootId)
327 | .querySelectorAll('circle')
328 | .forEach(c => {
329 | c.id = 'svg' + c.__data__?.id;
330 | c.addEventListener('mousemove', e => {
331 | if (e.target?.__data__?.id) {
332 | let d = e.target.__data__;
333 | showTooltip(structure.nodes[d.id] || d, rootId, size, colorBy);
334 | }
335 | });
336 | c.addEventListener('mouseleave', () => {
337 | hideTooltip(rootId);
338 | });
339 | });
340 |
341 | if (!disableRenderer) {
342 | initializeDataNavigator(structure, rootId, entryPoint, size, colorBy);
343 | }
344 | };
345 |
346 | const data = [
347 | {
348 | fruit: 'apple',
349 | store: 'a',
350 | cost: 3
351 | },
352 | {
353 | fruit: 'banana',
354 | store: 'a',
355 | cost: 0.75
356 | },
357 | {
358 | fruit: 'apple',
359 | store: 'b',
360 | cost: 2.75
361 | },
362 | {
363 | fruit: 'banana',
364 | store: 'b',
365 | cost: 1.25
366 | }
367 | ];
368 | plot('slot1');
369 |
370 | let nodesOnlyStructure = {
371 | nodes: {
372 | _0: {
373 | id: '_0',
374 | data: {
375 | fruit: 'apple',
376 | store: 'a',
377 | cost: 3
378 | },
379 | edges: ['_0-_1']
380 | },
381 | _1: {
382 | id: '_1',
383 | data: {
384 | fruit: 'banana',
385 | store: 'a',
386 | cost: 0.75
387 | },
388 | edges: ['_0-_1', '_1-_2']
389 | },
390 | _2: {
391 | id: '_2',
392 | data: {
393 | fruit: 'apple',
394 | store: 'b',
395 | cost: 2.75
396 | },
397 | edges: ['_1-_2', '_2-_3']
398 | },
399 | _3: {
400 | id: '_3',
401 | data: {
402 | fruit: 'banana',
403 | store: 'b',
404 | cost: 1.25
405 | },
406 | edges: ['_2-_3']
407 | }
408 | },
409 | edges: {
410 | '_0-_1': {
411 | source: '_0',
412 | target: '_1'
413 | },
414 | '_1-_2': {
415 | source: '_1',
416 | target: '_2'
417 | },
418 | '_2-_3': {
419 | source: '_2',
420 | target: '_3'
421 | }
422 | },
423 | navigationRules: {
424 | left: { key: 'ArrowLeft', direction: 'source' },
425 | right: { key: 'ArrowRight', direction: 'target' },
426 | exit: { key: 'Escape', direction: 'target' }
427 | }
428 | };
429 | buildGraph(
430 | nodesOnlyStructure,
431 | 'nodesOnly',
432 | 300,
433 | 'dimensionLevel', // 'cat',
434 | nodesOnlyStructure.nodes[Object.keys(nodesOnlyStructure.nodes)[0]].id,
435 | [],
436 | [],
437 | true,
438 | true
439 | );
440 |
441 | buildGraph(
442 | nodesOnlyStructure,
443 | 'basicList',
444 | 300,
445 | 'dimensionLevel', // 'cat',
446 | nodesOnlyStructure.nodes[Object.keys(nodesOnlyStructure.nodes)[0]].id,
447 | [],
448 | [],
449 | true
450 | );
451 |
452 | Object.keys(nodesOnlyStructure.nodes).forEach(nodeId => {
453 | nodesOnlyStructure.nodes[nodeId].edges.push('any-exit');
454 | });
455 |
456 | nodesOnlyStructure.edges['any-exit'] = {
457 | source: (_d, c) => c,
458 | target: () => {
459 | exit['chart']();
460 | return '';
461 | },
462 | navigationRules: ['exit']
463 | };
464 |
465 | buildGraph(
466 | nodesOnlyStructure,
467 | 'listWithExit',
468 | 300,
469 | 'dimensionLevel', // 'cat',
470 | nodesOnlyStructure.nodes[Object.keys(nodesOnlyStructure.nodes)[0]].id,
471 | ['exit'],
472 | ['any-exit'],
473 | true
474 | );
475 |
476 | plot('chart');
477 |
478 | Object.keys(nodesOnlyStructure.edges).forEach(edgeId => {
479 | if (edgeId !== 'any-exit') {
480 | nodesOnlyStructure.edges[edgeId].navigationRules = ['left', 'right'];
481 | }
482 | });
483 | initializeDataNavigator(
484 | nodesOnlyStructure,
485 | 'chart',
486 | nodesOnlyStructure.nodes[Object.keys(nodesOnlyStructure.nodes)[0]].id,
487 | 300,
488 | 'dimensionLevel'
489 | );
490 |
491 | buildGraph(
492 | nodesOnlyStructure,
493 | 'enterExitOnly',
494 | 300,
495 | 'dimensionLevel', // 'cat',
496 | nodesOnlyStructure.nodes[Object.keys(nodesOnlyStructure.nodes)[0]].id,
497 | ['exit'],
498 | ['any-exit'],
499 | true
500 | );
501 |
502 | plot('focusIndicatorChart');
503 |
504 | const oneSpatialNode = {
505 | nodes: {
506 | _0: {
507 | id: '_0',
508 | data: {
509 | fruit: 'apple',
510 | store: 'a',
511 | cost: 3
512 | },
513 | edges: ['_0-_1', 'any-exit'],
514 | renderId: '_0',
515 | semantics: {
516 | label: 'fruit: apple. store: a. cost: 3. Data point.'
517 | }
518 | },
519 | _1: {
520 | id: '_1',
521 | data: {
522 | fruit: 'banana',
523 | store: 'a',
524 | cost: 0.75
525 | },
526 | edges: ['_0-_1', '_1-_2', 'any-exit'],
527 | renderId: '_1',
528 | semantics: {
529 | label: 'fruit: banana. store: a. cost: 0.75. Data point.'
530 | },
531 | spatialProperties: {
532 | height: 33.545448303222656,
533 | width: 110.3,
534 | x: 32,
535 | y: 103.7727279663086
536 | }
537 | },
538 | _2: {
539 | id: '_2',
540 | data: {
541 | fruit: 'apple',
542 | store: 'b',
543 | cost: 2.75
544 | },
545 | edges: ['_1-_2', '_2-_3', 'any-exit'],
546 | renderId: '_2',
547 | semantics: {
548 | label: 'fruit: apple. store: b. cost: 2.75. Data point.'
549 | }
550 | },
551 | _3: {
552 | id: '_3',
553 | data: {
554 | fruit: 'banana',
555 | store: 'b',
556 | cost: 1.25
557 | },
558 | edges: ['_2-_3', 'any-exit'],
559 | renderId: '_3',
560 | semantics: {
561 | label: 'fruit: banana. store: b. cost: 1.25. Data point.'
562 | }
563 | }
564 | },
565 | edges: {
566 | '_0-_1': {
567 | source: '_0',
568 | target: '_1',
569 | navigationRules: ['left', 'right']
570 | },
571 | '_1-_2': {
572 | source: '_1',
573 | target: '_2',
574 | navigationRules: ['left', 'right']
575 | },
576 | '_2-_3': {
577 | source: '_2',
578 | target: '_3',
579 | navigationRules: ['left', 'right']
580 | },
581 | 'any-exit': {
582 | source: (_d, c) => c,
583 | target: () => {
584 | exit['focusIndicatorChart']();
585 | return '';
586 | },
587 | navigationRules: ['exit']
588 | }
589 | },
590 | navigationRules: {
591 | left: {
592 | key: 'ArrowLeft',
593 | direction: 'source'
594 | },
595 | right: {
596 | key: 'ArrowRight',
597 | direction: 'target'
598 | },
599 | exit: {
600 | key: 'Escape',
601 | direction: 'target'
602 | }
603 | }
604 | };
605 |
606 | initializeDataNavigator(
607 | oneSpatialNode,
608 | 'focusIndicatorChart',
609 | oneSpatialNode.nodes[Object.keys(oneSpatialNode.nodes)[0]].id,
610 | 300,
611 | 'dimensionLevel'
612 | );
613 |
614 | buildGraph(
615 | oneSpatialNode,
616 | 'focusIndicator',
617 | 300,
618 | 'dimensionLevel', // 'cat',
619 | oneSpatialNode.nodes[Object.keys(oneSpatialNode.nodes)[0]].id,
620 | ['exit'],
621 | ['any-exit'],
622 | true
623 | );
624 |
625 | plot('wrappedIndicatorChart');
626 |
627 | const wrappedSpatialStrategy = {
628 | nodes: {
629 | _0: {
630 | id: '_0',
631 | data: {
632 | fruit: 'apple',
633 | store: 'a',
634 | cost: 3
635 | },
636 | edges: ['_0-_1', 'any-exit'],
637 | renderId: '_0',
638 | semantics: {
639 | label: 'fruit: apple. store: a. cost: 3. Data point.'
640 | }
641 | },
642 | _1: {
643 | id: '_1',
644 | data: {
645 | fruit: 'banana',
646 | store: 'a',
647 | cost: 0.75
648 | },
649 | edges: ['_0-_1', '_1-_2', 'any-exit'],
650 | renderId: '_1',
651 | semantics: {
652 | label: 'fruit: banana. store: a. cost: 0.75. Data point.'
653 | },
654 | spatialProperties: {
655 | height: 33.545448303222656,
656 | width: 110.3,
657 | x: 32,
658 | y: 103.7727279663086
659 | }
660 | },
661 | _2: {
662 | id: '_2',
663 | data: {
664 | fruit: 'apple',
665 | store: 'b',
666 | cost: 2.75
667 | },
668 | edges: ['_1-_2', '_2-_3', 'any-exit'],
669 | renderId: '_2',
670 | semantics: {
671 | label: 'fruit: apple. store: b. cost: 2.75. Data point.'
672 | }
673 | },
674 | _3: {
675 | id: '_3',
676 | data: {
677 | fruit: 'banana',
678 | store: 'b',
679 | cost: 1.25
680 | },
681 | edges: ['_2-_3', 'any-exit'],
682 | renderId: '_3',
683 | semantics: {
684 | label: 'fruit: banana. store: b. cost: 1.25. Data point.'
685 | }
686 | }
687 | },
688 | edges: {
689 | '_0-_1': {
690 | source: '_0',
691 | target: '_1',
692 | navigationRules: ['left', 'right']
693 | },
694 | '_1-_2': {
695 | source: '_1',
696 | target: '_2',
697 | navigationRules: ['left', 'right']
698 | },
699 | '_2-_3': {
700 | source: '_2',
701 | target: '_3',
702 | navigationRules: ['left', 'right']
703 | },
704 | 'any-exit': {
705 | source: (_d, c) => c,
706 | target: () => {
707 | exit['wrappedIndicatorChart']();
708 | return '';
709 | },
710 | navigationRules: ['exit']
711 | }
712 | },
713 | navigationRules: {
714 | left: {
715 | key: 'ArrowLeft',
716 | direction: 'source'
717 | },
718 | right: {
719 | key: 'ArrowRight',
720 | direction: 'target'
721 | },
722 | exit: {
723 | key: 'Escape',
724 | direction: 'target'
725 | }
726 | }
727 | };
728 |
729 | initializeDataNavigator(
730 | wrappedSpatialStrategy,
731 | 'wrappedIndicatorChart',
732 | wrappedSpatialStrategy.nodes[Object.keys(wrappedSpatialStrategy.nodes)[0]].id,
733 | 300,
734 | 'dimensionLevel',
735 | true
736 | );
737 |
738 | buildGraph(
739 | wrappedSpatialStrategy,
740 | 'wrappedIndicator',
741 | 300,
742 | 'dimensionLevel', // 'cat',
743 | wrappedSpatialStrategy.nodes[Object.keys(wrappedSpatialStrategy.nodes)[0]].id,
744 | ['exit'],
745 | ['any-exit'],
746 | true,
747 | false,
748 | true
749 | );
750 |
--------------------------------------------------------------------------------
/app/v-bundle.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";var e={312:(e,i)=>{Object.defineProperty(i,"__esModule",{value:!0}),i.NodeElementDefaults=i.GenericLimitedNavigationRules=i.GenericFullNavigationPairs=i.GenericFullNavigationDimensions=i.GenericFullNavigationRules=i.TypicallyUnreservedKeyPairs=i.TypicallyUnreservedSoloKeys=i.TypicallyUnreservedKeys=i.defaultKeyBindings=i.SemanticKeys=void 0,i.SemanticKeys={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},i.defaultKeyBindings={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},i.TypicallyUnreservedKeys=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],i.TypicallyUnreservedSoloKeys=["KeyW","KeyJ"],i.TypicallyUnreservedKeyPairs=[["LeftBracket","RightBracket"],["Slash","Backslash"]],i.GenericFullNavigationRules={left:{key:"ArrowLeft",direction:"source"},right:{key:"ArrowRight",direction:"target"},up:{key:"ArrowUp",direction:"source"},down:{key:"ArrowDown",direction:"target"},child:{key:"Enter",direction:"target"},parent:{key:"Backspace",direction:"source"},backward:{key:"Comma",direction:"source"},forward:{key:"Period",direction:"target"},previous:{key:"Semicolon",direction:"source"},next:{key:"Quote",direction:"target"},exit:{key:"Escape",direction:"target"},help:{key:"KeyY",direction:"target"},undo:{key:"KeyZ",direction:"target"}},i.GenericFullNavigationDimensions=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],i.GenericFullNavigationPairs={left:["left","right"],right:["left","right"],up:["up","down"],down:["up","down"],backward:["backward","forward"],forward:["backward","forward"],previous:["previous","next"],next:["previous","next"],parent:["parent","child"],child:["parent","child"],exit:["exit","undo"],undo:["undo","undo"]},i.GenericLimitedNavigationRules={right:{key:"ArrowRight",direction:"target"},left:{key:"ArrowLeft",direction:"source"},down:{key:"ArrowDown",direction:"target"},up:{key:"ArrowUp",direction:"source"},child:{key:"Enter",direction:"target"},parent:{key:"Backspace",direction:"source"},exit:{key:"Escape",direction:"target"},undo:{key:"Period",direction:"target"},legend:{key:"KeyL",direction:"target"}},i.NodeElementDefaults={cssClass:"",spatialProperties:{x:0,y:0,width:0,height:0,path:""},semantics:{label:"",elementType:"div",role:"image",attributes:void 0},parentSemantics:{label:"",elementType:"figure",role:"figure",attributes:void 0},existingElement:{useForSpatialProperties:!1,spatialProperties:void 0}}},607:(e,i,t)=>{var n=t(4),o=t(489),r=t(992);i.Z={structure:n.default,input:o.default,rendering:r.default}},489:(e,i,t)=>{Object.defineProperty(i,"__esModule",{value:!0});var n=t(312);i.default=function(e){var i={},t=n.defaultKeyBindings,o=n.GenericFullNavigationRules;return i.moveTo=function(i){var t=e.structure.nodes[i];if(t)return t},i.move=function(t,n){if(t){var r=e.structure.nodes[t];if(r.edges){var s=null,a=0,d=o[n];if(!d)return;var l=function(){var i=e.structure.edges[r.edges[a]];if(i.navigationRules.forEach((function(e){s||(s=function(e,i){if(e!==n)return null;var o={target:"string"==typeof i.target?i.target:i.target(r,t),source:"string"==typeof i.source?i.source:i.source(r,t)};return o[d.direction]!==t?o[d.direction]:null}(e,i))})),s)return"break"};for(a=0;a
80 |
87 |
88 |
89 |
133 |
134 |
148 | Instructions
81 |
82 | Technically this is just a test environment for different structures as I am creating the
83 | dimensions API for Data Navigator. But that being said, if someone comes across this
84 | page, here are the keyboard instructions:
85 |
87 |
| Command | 91 |Expected input | 92 |
|---|---|
| Enter the visualization | 97 |Activate the "Enter navigation area" button. | 98 |
| Exit the visualization | 101 |ESC key. | 102 |
| Left: Backward along category or dimension | 105 |← (left arrow key). | 106 |
| Right: Forward along category or dimension | 109 |→ (right arrow key). | 110 |
| Up: Backward along sorted metric | 113 |↑ (up arrow key). | 114 |
| Down: Forward along sorted metric | 117 |↓ (down arrow key). | 118 |
| Drill down to child | 121 |ENTER key. | 122 |
| Drill up to parent-category node | 125 |W key. | 126 |
| Drill up to parent-numeric node | 129 |J key. | 130 |
134 |
135 | The dimensions API does a few things to the navigation experience by default, notably both are about
136 | the creation of "divisions" of that dimension: if a metric/numeric value is used, then it simply
137 | becomes a sorted list of all values in the dataset in ascending order. The api can be used to
138 | numericallySubdivide metrics. For categorical dimensions, they will be nested by
139 | default. However, if a category contains all unique values (see last 2 examples), then the dimension
140 | can be compressed using compressSparseDivisions.
141 |
Description of visualizations
143 | All of these visualizations are visual representations of the structure created from different datasets 144 | that have been sent into Data Navigator'sdimensions API. I'm playing with the declarative
145 | props for the API with these different visualizations as well as testing to see if the structure looks
146 | as expected (and the API performs as expected).
147 |
149 |
155 | Simple test (colors = dimension level)
150 |
151 |
152 |
153 |
154 | 156 |
157 |
163 | Testing added data and generic edges -> rules generation
158 |
159 |
160 |
161 |
162 | 164 |
165 |
171 | Testing larger data (a stacked bar chart)
166 |
167 |
168 |
169 |
170 | 172 |
173 |
186 | Testing maintaining stacked bar chart child nav direction
174 |175 | In the previous example, navigation seems counter-intuitive at the childmost level: left-right 176 | navigates between months at the division level, but drilling into a month (since these are children 177 | of the date's division) also maintain left-right. But at the childmost level, left-right moves 178 | across groups instead. This fixes the lack of intuitive navigation for something like a stacked bar 179 | chart: left-right always moves across dates. 180 |
181 |
182 |
183 |
184 |
185 | 187 |
188 |
194 | Testing sparse categorical data (one child per parent)
189 |
190 |
191 |
192 |
193 | 195 |
196 |
202 | Testing compressing sparse example into a list
197 |
198 |
199 |
200 |
201 | 203 |
204 |
210 | Testing a manually-built list without a parent node
205 |
206 |
207 |
208 |
209 | 211 |
Data Navigator demo
119 |
123 | 124 | This page is a live, interactive application that demos some of the coolest capabilities of our system, 125 | Data Navigator. 126 |
127 |What is Data Navigator?
130 |131 | Data Navigator enables designers and developers to render a semantic, navigable structure on top of any 132 | graphic. This structure can be used by a massive variety of different input modalities. 133 |
134 |If you want to learn more or get started, you can
135 |-
136 |
- 137 | Begin making 138 | your first navigable data structure 139 | 140 |
- 141 | Read our accessible 142 | HTML paper on Data Navigator 143 | 144 |
- 145 | Check out the code repo for 146 | Data Navigator on GitHub 147 | 148 |
151 | Below is an introductory video, explaining a basic overview of what Data Navigator does, why we made it, 152 | and what we hope our system is used for: 153 |
154 |
155 |
163 |
164 | Demo
165 |166 | In this demo, you can use a bunch of different input modalities to navigate the data structure of a png 167 | image of a chart. 168 |
169 |The core 3 subsystems within Data Navigator are Structure, Input, and Rendering:
170 |-
171 |
- The structure is bespoke but mostly follows common patterns. 172 |
- You can use a lot of different inputs! 173 |
- 174 | The chart itself is just a png image. The rendered elements (when you navigate) are semantic HTML 175 | with custom visuals. 176 | 177 |
Overall instructions and commands
179 |You will need to "enter" Data Navigator's structure before you can begin navigating.
180 |181 | The details of every input command are outlined below, however note that each input modality specifies 182 | these commands in different ways (see each section for more details): 183 |
184 |
185 |
241 |
186 |
188 |
189 |
239 |
240 | View commands:
187 || Command | 191 |Result | 192 |
|---|---|
| Enter | 197 |198 | Enter the interface. (You must enter the interface before using any other command.) 199 | | 200 |
| Exit | 203 |Exit the interface. | 204 |
| Right | 207 |Move right (across teams). | 208 |
| Left | 211 |Move left (across teams). | 212 |
| Up | 215 |Move up (across legend items or between title/legend/axes). | 216 |
| Down | 219 |Move down (across legend items or between title/legend/axes). | 220 |
| Child | 223 |Drill into the x axis, legend, or childmost elements. | 224 |
| Parent | 227 |Drill out toward the x axis. | 228 |
| Legend | 231 |Drill out toward the legend. | 232 |
| Undo | 235 |Move to a previous position. | 236 |
Keyboard, screen reader, touch, and mouse-drag
242 |
243 |
360 | Show section
244 |
245 |
299 |
246 |
248 |
249 |
297 |
298 | View keyboard and desktop screen reader controls:
247 || Command | 251 |Expected input | 252 |
|---|---|
| Enter | 257 |Click the "Enter navigation area" button. | 258 |
| Exit | 261 |ESC key. | 262 |
| Right | 265 |→ (right arrow key). | 266 |
| Left | 269 |← (left arrow key). | 270 |
| Up | 273 |↑ (up arrow key). | 274 |
| Down | 277 |↓ (down arrow key). | 278 |
| Child | 281 |ENTER key. | 282 |
| Parent | 285 |BACKSPACE key. | 286 |
| Legend | 289 |L key. | 290 |
| Undo | 293 |. (period) key. | 294 |
300 |
359 |
301 |
303 |
304 |
357 |
358 | View mobile screen reader, touch, and mouse-drag controls:
302 || Command | 306 |Expected input | 307 |
|---|---|
| Enter | 312 |313 | Long press and release on the chart area or click the "Enter navigation area" 314 | button. 315 | | 316 |
| Exit | 319 |320 | Long press and release on the chart area (if you have entered already). 321 | | 322 |
| Right | 325 |→ Press and swipe right. | 326 |
| Left | 329 |← Press and swipe left. | 330 |
| Up | 333 |↑ Press and swipe up. | 334 |
| Down | 337 |↓ Press and swipe down. | 338 |
| Child | 341 |↘ Press and swipe down and to the right. | 342 |
| Parent | 345 |↖ Press and swipe up and to the left. | 346 |
| Legend | 349 |↗ Press and swipe up and to the right. | 350 |
| Undo | 353 |↙ Press and swipe up and to the right. | 354 |
Text and speech
361 |
362 |
405 | Show section
363 |
364 |
404 |
365 |
387 |
366 |
372 |
373 |
385 |
386 | View text and speech controls:
367 |368 | All of the commands from the previous section (Overall Commands) can simply be typed 369 | into the text input or spoken using the button. For example: 370 |
371 || Command | 375 |Expected input | 376 |
|---|---|
| Enter | 381 |"Enter" "enter" and "EnTeR" are all valid. | 382 |
388 |
403 |
389 |
397 | 390 | Issue a text command: 391 | 395 |
396 |
398 |
402 | Speak a single-word command:
399 | 400 | 401 |Gesture
406 |
407 |
506 | Show section
408 | 409 |
410 |
491 | 492 |
493 | 494 |
495 |
505 | 411 | The gesture control model is heavy, so we only load it if you want to try it. Click "Load 412 | Gesture Model" to load it and then activate the model with "Open Webcam" (it will need access to 413 | your camera). 414 |
415 |
416 |
489 |
490 |
417 |
428 |
429 |
487 |
488 | View gesture controls:
418 |419 | Close your hand to set the gesture center (marked by an 👊 emoji on the camera 420 | space). When ready, you can open your hand or point in a direction to move. Close your 421 | hand again to set the gesture center for a new gesture (and repeat). 422 |
423 |424 | The model is slow and isn't very smart, so you will need to exaggerate your movement 425 | distances and hold your gesture for about a second. It fails often (apologies). 426 |
427 || Command | 431 |Expected input | 432 |
|---|---|
| Enter | 437 |🖐 Open your hand, facing the camera. | 438 |
| Exit | 441 |442 | 🖐 Open your hand, facing the camera (once already entered). 443 | | 444 |
| Right | 447 |👉 Point right of your gesture center. | 448 |
| Left | 451 |👈 Point left of your gesture center. | 452 |
| Up | 455 |☝ Point above your gesture center. | 456 |
| Down | 459 |👇 Point below your gesture center. | 460 |
| Child | 463 |464 | 👇 👉 Point below and to the right of your gesture center. 465 | | 466 |
| Parent | 469 |470 | ☝ 👈 Point above and to the left of your gesture center. 471 | | 472 |
| Legend | 475 |476 | ☝ 👉 Point above and to the right of your gesture center. 477 | | 478 |
| Undo | 481 |482 | 👇 👈 Point below and to the left of your gesture center. 483 | | 484 |
491 | 492 |
493 | 494 |
495 |
496 |
499 | Ready for a command? No. Try closing your hand.
497 |Command used: (none yet)
498 |
500 |
501 |
502 |
504 | 👊
503 | 507 |
508 |
517 |
518 |
509 |
514 |
515 |
516 |
514 | Why make Data Navigator?
519 |520 | Modern data visualization accessibility faces 3 challenges in design and development that we wanted to 521 | help practitioners and researchers tackle: 522 |
523 |-
524 |
- 525 | Navigable structure is hard to build for data visualizations. Structure is important for 526 | understanding and usability but is often ignored. 527 | 528 |
- 529 | Only mouse input is treated well (with sporadic support for touch or screen reader input). Many 530 | other input modalities are unaddressed! 531 | 532 |
- 533 | Visualizations are often rendered as semantic-less SVG or raster (pngs, canvas, etc). If semantics 534 | are added at all they end up using low-level SVG, which is often not appropriate. Semantics help 535 | understanding and add functional interactivity. 536 | 537 |
Advantages of Data Navigator
539 |540 | Data Navigator uses a graph-based infrastructure, comprised of nodes and edges. This allows us to do two 541 | really interesting things: create almost any other possible structure (list, hierarchy, spatial, 542 | network, etc) and prioritize direct relationships among data points. This underlying infrastructure is 543 | different from HTML's, which prioritizes hierarchies and not direct relationships. 544 |
545 |546 | It might seem like anarchy to design a low-level building block like this, but this is actually 547 | philosophically more empowering: designers and developers can add the structure and order that make the 548 | most sense for what they are doing, rather than try to make everything fit into a hierarchy. 549 |
550 |551 | Data Navigator allows designers and developers to express both rich and unique structures in ways that 552 | can handle making an entire library of charts more accessible or even take on unaddressed or bespoke 553 | visualizations. 554 |
555 |556 | And navigation of a structure can also be built to fit: Data Navigator abstracts navigation rules into 557 | namespaces, like "commands." Commands can be entirely customized to suit the needs of the structure they 558 | support. The advantage of this abstraction is that Data Navigator can be made to work with nearly any 559 | input modality as long as input is validated and converted into an existing command. 560 |
561 |562 | And lastly, Data Navigator can create an accessible rendering layer (using semantic HTML) on top of any 563 | existing visuals (or no visuals at all). This approach lets designers and developers fully control how 564 | navigation looks and feels for both screen readers and other input modalities without relying on 565 | whatever was used to render the original visualization (SVG, png, canvas, etc). This means that 566 | interactive elements in a visualization can be real "button" elements and not an SVG rectangle made from 567 | scratch to emulate a button. 568 |
569 |