data-navigator 2.2.0 → 2.2.2

package/README.md

@@ -2,78 +2,47 @@
 
 ![Data Navigator provides visualization toolkits with rich, accessible navigation structures, robust input handling, and flexible, semantic rendering.](https://raw.githubusercontent.com/cmudig/data-navigator/main/assets/data_navigator.png)
 
-Data Navigator is a JavaScript library that allows for navigation of data structures. Data Navigator makes png, svg, canvas, and even webgl graphics accessible to a wide array of assistive technologies and input modalities.
+Data Navigator is a JavaScript library that enables keyboard, screen reader, and multi-modal navigation of data structures and visualizations. It works with any rendering technology — SVG, Canvas, images, or WebGL — by creating a semantic, accessible HTML layer on top of your graphics.
 
-Check out [our online, interactive demo](http://dig.cmu.edu/data-navigator/) for a video introduction and to try out Data Navigator hands-on.
+**[Documentation](https://dig.cmu.edu/data-navigator/)** · **[Getting Started](https://dig.cmu.edu/data-navigator/getting-started/)** · **[Demo](https://dig.cmu.edu/data-navigator/demo)** · **[npm](https://www.npmjs.com/package/data-navigator)**
 
-## Data Navigator's approach
-
-Data Navigator has abstracted navigation into commands, which enables it to easily receive input from screen readers and keyboards to more interesting modalities like touch and mouse swiping, spoken commands, hand gestures, and even fabricated or totally novel interfaces, like bananas.
-
-![Image in two parts. First part: Inputs: A. Hand swiping. B: Speaking "left." C. A hand gesture on camera. D. Bananas. Second part: Output: (focus moves left) A focus indicator has moved on a bar chart from one stacked bar to another on its left.](https://raw.githubusercontent.com/cmudig/data-navigator/main/assets/inputs.png)
-
-Data Navigator is expressive for builders and enables entire toolkits or ecosystems to become more accessible. The system provides low-level control over narratives, interaction paths, and journeys a user might want to take through an image or graphic.
-
-Developers can build schemas that scale to work with any chart in a charting library or a single, bespoke implemetation for use in story-telling contexts like journalism, reports, presentations, and interactive infographics.
-
-![Image in two parts. First part: A schema for navigation that works with any stacked bar chart. Great for libraries! A complex schema is shown over a stacked bar chart with up, down, left, and right directions. Second part: A bespoke, guided journey through a visual. Great for storytelling! A simple navigation path is shown going through the image.](https://raw.githubusercontent.com/cmudig/data-navigator/main/assets/journey.png)
-
-Not only are paths through an image customizeable but so are the visual indications that are rendered alongside those journeys. These visual indications use semantically rich, native HTML elements for maximized accessibility.
-
-![Code used to render a path that looks like an outline and then place that outline over visual elements on a data visualization.](https://raw.githubusercontent.com/cmudig/data-navigator/main/assets/path.png)
-
-Visit [our landing page](http://dig.cmu.edu/data-navigator/) to try our demo, which shows a png image made into navigable experience. A variety of input modalities are enabled, including touch and mouse swiping, keyboard, screen reader, text input, voice control, and hand gesture recognition.
-
-We also have [a vega-lite demo online](https://dig.cmu.edu/data-navigator/vega-lite.html), which (under the hood) shows how someone could write one schema that serves any chart in an ecosystem.
-
-## System design
-
-Data Navigator is organized into 3 separately composable modules: the first is a graph-based _structure_ of nodes and edges, the second handles _input_ and navigation logic, and the third _renders_ the structure. These may be leveraged together or independently. Read our paper to learn more!
-
-### Types
-
-Our types are consolidated into a single [types export file](./src/data-navigator.ts), designed (mostly) as a grammar. Each major module is broken down into subparts, each with their own types, all the way to the primitive-most types used.
-
-## Getting started
-
-You can install or use both esm and cjs modules in a variety of ways, in addition to importing all of data-navigator or just one part.
+## Install
 
 ```
-# to install into a project
 npm install data-navigator
 ```
 
 ```js
-// to use it in a .js or .ts file
-import { default as dataNavigator } from 'data-navigator';
+import dataNavigator from 'data-navigator';
+```
 
-// whole ecosystem
-console.log('dataNavigator', dataNavigator);
+## How it works
 
-// one module in the ecosystem
-console.log('dataNavigator.rendering', dataNavigator.rendering);
-```
+Data Navigator is organized into 3 composable modules:
 
-```html
-<!-- and even as a script tag module loaded from a cdn -->
-<script type="module">
-    // pay attention to the version! the latest may be higher than this example
-    import dataNavigator from 'https://cdn.jsdelivr.net/npm/data-navigator@1.2.4/dist/index.mjs';
-    console.log(dataNavigator);
-</script>
-```
+1. **Structure** — a graph of nodes and edges that defines navigation paths through your data
+2. **Input** — handles keyboard, touch, voice, gesture, and custom input modalities
+3. **Rendering** — creates semantic HTML elements overlaid on your visualization
+
+These modules can be used together or independently. Visit [the docs](https://dig.cmu.edu/data-navigator/getting-started/) for a step-by-step guide to building your first navigable chart.
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions and development workflow.
 
 ## Credit
 
-Data-Navigator was developed at CMU's [Data Interaction Group](https://dig.cmu.edu/) (CMU DIG), primarily by [Frank Elavsky](https://frank.computer).
+Data Navigator was developed at CMU's [Data Interaction Group](https://dig.cmu.edu/) (CMU DIG), primarily by [Frank Elavsky](https://frank.computer).
 
 ## Citing Data Navigator
 
 ```bib
 @article{2023-data-navigator,
-  year = {2023},
+  title = {{Data Navigator}: An Accessibility-Centered Data Navigation Toolkit},
+  publisher = {{IEEE}},
   author = {Frank Elavsky and Lucas Nadolskis and Dominik Moritz},
-  title = {{Data Navigator:} An Accessibility-Centered Data Navigation Toolkit},
-  journal = {{IEEE} {VIS}}
+  journal = {{IEEE} Transactions on Visualization and Computer Graphics},
+  year = {2023},
+  url = {http://dig.cmu.edu/data-navigator/}
 }
 ```

package/dist/chunk-MPFBSVCV.js

@@ -0,0 +1 @@
+var e={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},r={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},t=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],i=["KeyW","KeyJ"],o=[["LeftBracket","RightBracket"],["Slash","Backslash"]],a={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"}},n=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],c={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"]},d={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"}},s={cssClass:void 0,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}};export{e as a,r as b,t as c,i as d,o as e,a as f,n as g,c as h,d as i,s as j};

package/dist/{chunk-PEL3ZYDS.mjs → chunk-TZKH227U.js}

@@ -1 +1 @@
-var e={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},r={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},t=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],i=["KeyW","KeyJ"],o=[["LeftBracket","RightBracket"],["Slash","Backslash"]],a={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"}},n=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],c={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"]},d={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"}},s={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}};export{e as a,r as b,t as c,i as d,o as e,a as f,n as g,c as h,d as i,s as j};
+var e={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},r={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},t=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],i=["KeyW","KeyJ"],o=[["LeftBracket","RightBracket"],["Slash","Backslash"]],a={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"}},c=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],d={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"]},n={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"}},s={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}};export{e as a,r as b,t as c,i as d,o as e,a as f,c as g,d as h,n as i,s as j};

package/dist/consts.cjs

@@ -0,0 +1 @@
+function e(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}var r=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var o=function e(e,t){for(var i in t)r(e,i,{get:t[i],enumerable:!0})},a=function o(o,a,c,l){var u=true,d=false,s=undefined;if(a&&(typeof a==="undefined"?"undefined":e(a))=="object"||typeof a=="function")try{var y=function(){var e=f.value;!n.call(o,e)&&e!==c&&r(o,e,{get:function r(){return a[e]},enumerable:!(l=t(a,e))||l.enumerable})};for(var p=i(a)[Symbol.iterator](),f;!(u=(f=p.next()).done);u=true)y()}catch(e){d=true;s=e}finally{try{if(!u&&p.return!=null){p.return()}}finally{if(d){throw s}}}return o};var c=function e(e){return a(r({},"__esModule",{value:!0}),e)};var l={};o(l,{GenericFullNavigationDimensions:function e(){return g},GenericFullNavigationPairs:function e(){return v},GenericFullNavigationRules:function e(){return f},GenericLimitedNavigationRules:function e(){return w},NodeElementDefaults:function e(){return k},SemanticKeys:function e(){return u},TypicallyUnreservedKeyPairs:function e(){return p},TypicallyUnreservedKeys:function e(){return s},TypicallyUnreservedSoloKeys:function e(){return y},defaultKeyBindings:function e(){return d}});module.exports=c(l);var u={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},d={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},s=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],y=["KeyW","KeyJ"],p=[["LeftBracket","RightBracket"],["Slash","Backslash"]],f={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"}},g=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],v={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"]},w={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"}},k={cssClass:void 0,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}};0&&(module.exports={GenericFullNavigationDimensions:GenericFullNavigationDimensions,GenericFullNavigationPairs:GenericFullNavigationPairs,GenericFullNavigationRules:GenericFullNavigationRules,GenericLimitedNavigationRules:GenericLimitedNavigationRules,NodeElementDefaults:NodeElementDefaults,SemanticKeys:SemanticKeys,TypicallyUnreservedKeyPairs:TypicallyUnreservedKeyPairs,TypicallyUnreservedKeys:TypicallyUnreservedKeys,TypicallyUnreservedSoloKeys:TypicallyUnreservedSoloKeys,defaultKeyBindings:defaultKeyBindings});

package/dist/consts.js

@@ -1 +1 @@
-var e=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var t=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var n=function(r,t){for(var i in t)e(r,i,{get:t[i],enumerable:!0})},o=function(n,o,a,c){var l=true,u=false,s=undefined;if(o&&typeof o=="object"||typeof o=="function")try{var d=function(){var t=p.value;!i.call(n,t)&&t!==a&&e(n,t,{get:function(){return o[t]},enumerable:!(c=r(o,t))||c.enumerable})};for(var y=t(o)[Symbol.iterator](),p;!(l=(p=y.next()).done);l=true)d()}catch(e){u=true;s=e}finally{try{if(!l&&y.return!=null){y.return()}}finally{if(u){throw s}}}return n};var a=function(r){return o(e({},"__esModule",{value:!0}),r)};var c={};n(c,{GenericFullNavigationDimensions:function(){return f},GenericFullNavigationPairs:function(){return g},GenericFullNavigationRules:function(){return p},GenericLimitedNavigationRules:function(){return v},NodeElementDefaults:function(){return w},SemanticKeys:function(){return l},TypicallyUnreservedKeyPairs:function(){return y},TypicallyUnreservedKeys:function(){return s},TypicallyUnreservedSoloKeys:function(){return d},defaultKeyBindings:function(){return u}});module.exports=a(c);var l={Escape:!0,Enter:!0,Backspace:!0,ArrowLeft:!0,ArrowRight:!0,ArrowUp:!0,ArrowDown:!0},u={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"up",ArrowDown:"down",Period:"forward",Comma:"backward",Escape:"parent",Enter:"child"},s=["KeyW","KeyJ","LeftBracket","RightBracket","Slash","Backslash"],d=["KeyW","KeyJ"],y=[["LeftBracket","RightBracket"],["Slash","Backslash"]],p={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"}},f=[["left","right"],["up","down"],["backward","forward"],["previous","next"]],g={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"]},v={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"}},w={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}};0&&(module.exports={GenericFullNavigationDimensions:GenericFullNavigationDimensions,GenericFullNavigationPairs:GenericFullNavigationPairs,GenericFullNavigationRules:GenericFullNavigationRules,GenericLimitedNavigationRules:GenericLimitedNavigationRules,NodeElementDefaults:NodeElementDefaults,SemanticKeys:SemanticKeys,TypicallyUnreservedKeyPairs:TypicallyUnreservedKeyPairs,TypicallyUnreservedKeys:TypicallyUnreservedKeys,TypicallyUnreservedSoloKeys:TypicallyUnreservedSoloKeys,defaultKeyBindings:defaultKeyBindings});
+import{a,b,c,d,e,f,g,h,i,j}from"./chunk-MPFBSVCV.js";export{g as GenericFullNavigationDimensions,h as GenericFullNavigationPairs,f as GenericFullNavigationRules,i as GenericLimitedNavigationRules,j as NodeElementDefaults,a as SemanticKeys,e as TypicallyUnreservedKeyPairs,c as TypicallyUnreservedKeys,d as TypicallyUnreservedSoloKeys,b as defaultKeyBindings};

package/dist/examples/basic_list/bokeh.d.ts

@@ -0,0 +1 @@
+export function plot(id: any, focusData: any): void;

package/dist/examples/bokeh.d.ts

@@ -0,0 +1 @@
+export function plot(id: any, focusData: any): void;

package/dist/examples/docs.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/examples/force-graph.d.ts

@@ -1,7 +1,7 @@
 export function ForceGraph({ nodes, links }: {
     nodes: any;
     links: any;
-}, { nodeId, nodeGroup, nodeGroups, nodeTitle, nodeFill, nodeStroke, nodeStrokeWidth, nodeStrokeOpacity, nodeRadius, nodeStrength, linkSource, linkTarget, linkStroke, linkStrokeOpacity, linkStrokeWidth, linkStrokeLinecap, linkStrength, colors, width, height, invalidation }?: {
+}, { nodeId, nodeGroup, nodeGroups, nodeTitle, nodeFill, nodeStroke, nodeStrokeWidth, nodeStrokeOpacity, nodeRadius, nodeStrength, linkSource, linkTarget, linkStroke, linkStrokeOpacity, linkStrokeWidth, linkStrokeLinecap, linkStrength, colors, width, height, invalidation, description, hide }?: {
     nodeId?: (d: any) => any;
     nodeGroup: any;
     nodeGroups: any;
@@ -27,4 +27,6 @@ export function ForceGraph({ nodes, links }: {
     width?: number;
     height?: number;
     invalidation: any;
+    description: any;
+    hide: any;
 }): any;