Exploring alternate UI/UX about jupyterlab_voyager HOT 10 OPEN

Here is another version that separates the Fields/Encoding from the actual visualization view:

Pros:

• Full flexibility of JupyterLab to layout the different components.
• Side panel used effectively
• Can easily size visualization panel separately from the Fields/Encodings.

Cons:

• The Fields/Encoding UI is probably wider than most side panel content. We can put a minimal size on the content to make sure the side panel is wide enough though.
• More disjoint.

from jupyterlab_voyager.

One potential big usability problem with the disjointed window version is that if users open multiple sets of Voyager instances and drag tabs around, it will be no longer clear which data/encoding panes maps to which plots.

from jupyterlab_voyager.

Here is a version that:

• Removes the header (Bookmark, Undo, Redo can be moved to a menu)
• Removes the Data component (we will pass it data)
• Only shows the specified view.

Pros:

• More minimal than the full thing, takes up less space in the dock panel.
• More focused UI.

Cons:

• Still not a great aspect ratio for the dock panel - you still can't fit a notebook, file browser and Voyager easily all together.

from jupyterlab_voyager.

I don't have much to add but just wanted to say that, done well, I think this could be a killer feature and I'm excited to see where it goes!

from jupyterlab_voyager.

A nice UX might be if there was a JupyterLab Voyager widget which displayed the chart in the JLab output but when selected linked to a Voyager side panel which would allow the user to change the Fields/Encoding to explore different visualisations of the data.

from jupyterlab_voyager.

from jupyterlab_voyager.

I was looking around the JupyterLab UI for other existing patterns that might be similar to this and found the "Inspector" that can be opened from the Notebook:

The Voyager Fields/Encoding UI maybe could be thought of as an inspector for Vega Lite schemas. So instead of a side panel, it would just be a different window (also made with Sketch from @ellisonbg's screenshots):

To parallel something like the existing Inspect window, you could right click on any existing Vega Lite preview and select "Modify" or something and it would bring up this Voyager GUI.

If you had a file in the sidebar, maybe it would then open two panels, one for the Vega Lite visualization (like an unsaved buffer) and then the field editor as well.

from jupyterlab_voyager.

@ellisonbg Did you remove the suggested visualizations in order to reduce visual clutter?

from jupyterlab_voyager.

Instead of having the fields/encodings on left, we could also have them above in a toolbar. This one make the UI more similar to the Datagrid UI to change the delimiter for the file. Imagine that the toolbar at the top has all of the encoding options:

Pros:

• Less horizontal space used
• Simpler UI components (dropdowns instead of drag and drop)
• Similar to existing Datagrid UI

Cons:

• Lose listing of all fields
• Harder to group encodings
• Header row would likely have to wrap

from jupyterlab_voyager.

I think if the encoding pane/window simply reflected the data for the currently selected Voyager plot/widget and displayed a message "No Voyager widget selected." if none currently had focus it would be reasonably clear for the user

from jupyterlab_voyager.