Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AaronWatters/jp_doodle

Tools for drawing 2d and 3d interactive visualizations using Jupyter proxy widgets
https://github.com/AaronWatters/jp_doodle

Last synced: 3 months ago
JSON representation

Tools for drawing 2d and 3d interactive visualizations using Jupyter proxy widgets

Awesome Lists containing this project

README 

        



[![Binder](https://mybinder.org/badge.svg)](https://mybinder.org/v2/gh/AaronWatters/jp_doodle/master)

[![Build Status](https://travis-ci.org/AaronWatters/jp_doodle.svg?branch=master)](https://travis-ci.org/AaronWatters/jp_doodle)

[![Coverage Status](https://coveralls.io/repos/github/AaronWatters/jp_doodle/badge.svg?branch=master)](https://coveralls.io/github/AaronWatters/jp_doodle?branch=master)



# `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`](./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.