jp_doodle

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.

Installation

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

dual_canvas

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 .

	Drawing The jp_doodle package includes jQuery plugins to make figures that can interact with mouse events and may be animated. 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.
	Events 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.
	Bindings 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.
	Animation Dual canvases can be animated. This figure includes a clock with an animated seconds hand and a blinking light.
	Lasso 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.
	Rectangles The rectangle_collection.js plugin provides an experimental implementation of a two category bar chart. This proof of concept is useful as an example of a complex component built using jp_doodle. 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.
	Chart 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.
	Images 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.
	Transitions 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.
	Assemblies 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.
	Frames 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.
	N-Dimensional Frames 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.
	N-Dimensional Scatter Plot 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.
	Network Explorer 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.
	Array explorer This component allows an analyst to compare the rows and columns of an array of data.
	Color chooser A color chooser. Choose a color and then click an object to apply the color.
	Opacity Sliders This example uses a dual canvas in a JQueryUI dialog with multiple sliders to adjust object colors and opacities in another dual canvas.
	Edit polygon 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.
	Vector Field The vector field component adds an animation of directional moving points on a canvas.