Data Navigator demo

Instructions

Technically this is just a test environment for different structures as I am creating the dimensions API for Data Navigator. But that being said, if someone comes across this page, here are the keyboard instructions:

Command	Expected input
Enter the visualization	Activate the "Enter navigation area" button.
Exit the visualization	`ESC` key.
Left: Backward along category or dimension	`←` (left arrow key).
Right: Forward along category or dimension	`→` (right arrow key).
Up: Backward along sorted metric	`↑` (up arrow key).
Down: Forward along sorted metric	`↓` (down arrow key).
Drill down to child	`ENTER` key.
Drill up to parent-category node	`W` key.
Drill up to parent-numeric node	`J` key.

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 numericallySubdivide 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 compressSparseDivisions.

Description of visualizations

All of these visualizations are visual representations of the structure created from different datasets that have been sent into Data Navigator's dimensions 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).

Simple test (colors = dimension level)

Testing added data and generic edges -> rules generation

Testing larger data (a stacked bar chart)

Testing maintaining stacked bar chart child nav direction

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.