jp_doodle
makes implementing special purpose interactive visualizations easy.
It is designed to facilitate the development of bespoke scientific data presentation
and interactive exploration tools.
Quick references: Please see the Javascript quick reference or the Python/Jupyter quick reference for an introduction to building visualizations using `jp_doodle`.
Below is a screenshot of the
multidimensional frames
example using jp_doodle dual canvases.
Please click the youtube link to view a presentation about dual canvases and related technologies.
The jp_doodle package provides jQuery plugins which make it easy to build
interactive visualizations in Javascript. The package also provides Jupyter widget
interfaces to make it easy to build visualizations for Jupyter notebooks.
Most demonstration code is provided as Jupyter notebooks
under the
./notebooks directory.
You can
view ./notebooks using nbviewer
or use
Binder
to run the notebooks interactively. The Tutorial
introduces dual canvases primarily from a Javascript
perspective. The Simple Python Examples shows
some examples of using dual canvases in Jupyter widgets
using only the Python interface. The Feature demonstrations sub-directory provides many other examples of how to use
the various features of dual canvases both in the Javascript and the Python contexts.
To install the package for use with Jupyter notebooks:
python -m pip install https://github.com/AaronWatters/jp_doodle/zipball/master
To use the package with Jupyter Lab you also need to build the Jupyterlab Javascript
resources with widget support and jp_proxy_widget:
jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build
jupyter labextension install jp_proxy_widget
The dual_canvas jQuery component of the jp_doodle package supports implementing
visualizations using two dimensional HTML5 canvas elements. It provides
-
Graphical object creation, deletion, mutation, and smooth feature transitions.
-
Managed coordinate spaces including the pixel coordinate space, the canvas coordinate space and reference frame coordinate spaces.
-
Local and global event coordination to identify objects under positional mouse events and relative event coordinate transformations.
-
Bounding box calculation and canvas fitting support.
-
Axis creation helpers.
-
A built in "lasso tool" for selecting multiple objects in a canvas.
-
Animation support.
-
Python wrappers for building Jupyter widgets containing dual canvases .
|
The In this figure we draw a number of objects on a canvas to illustrate basic shapes. The figure also responds to mouse-over events. Move the mouse over the objects to see the "name" of the object undeneith the mouse. |
|
This illustration uses mouse events associated to the whole canvas to allow the user to drag elements using the mouse. In this illustration you may move the named objects (everything colorful) by mousing down on the object and dragging it to a new location and then mousing up. |
|
Canvases can respond to mouse events. The mouse events can be associated to the whole canvas or to named elements in the canvas. In this illustration a different click event handler attaches to each text area to change the text areas in different ways for 5 seconds. |
|
Dual canvases can be animated. This figure includes a clock with an animated
seconds hand and a blinking light.
|
|
Dual canvasses provide a lasso feature which allows the user to select a group of named elements by encircling them with a polygonal "lasso". In this figure the user may mouse down to draw a polygon and mouse up to close the polygon. Selected circles in the lassoed area will turn from green to pink. |
|
The Click "person type" or "State" to start and stop adjusting the layout of the barchart. Mouse over the rectangles and other labels for detail information. |
|
This chart proof of concept illustrates reference frames, object updates, and responses to mouse interactions. Mouse over the figure for detail from the underlying data. |
|
You can draw images on canvases in two steps.
First you must load the image and identify it with a name,
and afterward you can draw the image any number of times
by providing x, y corner coordinates with width and height.
You may also specify a rectangle inside the image to draw.
|
|
You can change named objects on canvases using smooth transitions
which interpolate between one group of attribute values and another smoothly over a time period.
|
|
Assembly definitions may be specified using Javascript and attached to a jp_doodle canvas. The assemblies describe how to draw composite objects which are manipulated as primative units in the jp_doodle drawing system. This demonstration attaches a "teddy bear" assembly definition and then creates some teddy bear assemblies and other standard assemblies on the canvas. You may move the assemblies by mousing down on the object and dragging it to a new location and then mousing up. |
|
Objects can be created in reference frames in order to share the same drawing order priority and the same coordinate system. All objects contained in a reference frame share the same translation and vector scaling with respect to the underlying canvas coordinate system. Changes or transitions to a reference frame geometry effect all objects contained in the frame. In this demonstration drag the blue controls to change the parameters of the frame on the right. |
|
|
Multidimensional frames allow data to be projected from higher dimensions into 3 dimensions and then into 2 dimensions. the 3 dimensional representation can be rotated or otherwise animated before the presentation in 2 dimensions. Below we draw elements with 3 dimensional coordinates. Drag the mouse on the figure to rotate the diagram. Shift-drag the mouse on the figure to translate the diagram. |
|
The multidimensional scatter plot widget allows interactive exploration of dimensionality reduction projections that project many features into three dimensional summaries. The demonstration below shows the standard "iris" dataset projected from 4 dimensions into 3 dimensions using several projection methods. |
|
The directed network widget allows interactive exploration of directed weighted network structures. It was developed to facilitate the exploration and comparison of gene regulatory networks which are inferred using different methodologies. |
|
This component allows an analyst to compare the rows and columns of an array of data.
|
|
A color chooser. Choose a color and then click an object to apply the color.
|
|
This example uses a dual canvas in a JQueryUI dialog with multiple sliders to adjust
object colors and opacities in another dual canvas.
|
|
A polygon editor which illustrates combining mouse event modalities with reference frames.
Click to start the polygon. Type "." to drop a new vertex.
Click again to close the polygon. Press the reset button to play again.
|
|
The vector field component adds an animation of directional moving points
on a canvas.
|