Drawing
Events
Bindings
Animation
Lasso
Rectangles
Chart
Images
Transitions
Assemblies
Frames
N-Dimensional Frames
N-Dimensional Scatter Plot
Network Explorer
Array explorer
Color chooser
Opacity Sliders
Edit polygon
Vector Field

This is an example page for the jp_doodle package.

jp_doodle makes implementing special purpose interactive visualizations easy.

Quick references: Javascript API; Python API.

Miscellaneous Demos: Image detail viewer..

These example pages use stand alone Javascript, but the code used to implement them can be transliterated to Python and implemented using Jupyter widgets (modulo some subtleties).
Please see the Jupyter notebooks in the package for additional discussion and documentation.
Please use Binder to easily run the Jupyter notebooks of the package.

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.

Code

Discussion

The widget allows the user to:

  • drag nodes of the network to new positions with the mouse,
  • adjust the display size,
  • find a subset of the network of interest,
  • focus on lassoed elements or remove lassoed elements,
  • reset the layout for the nodes of the network,
  • display visible node and edges as text,
  • specify a region of "too small" edge weights to exclude from view, and
  • select nodes to display by matching names or "glob" patterns for names.

    • The widget also includes a large number of configuration options which do not have corresponding visual controls which can be set upon initialization or modified subsequently.

    The "relax" and "skeleton" layout methods use a gradient descent heuristic to find a layout for the nodes which reflects the edge weights between connected nodes. These layout methods can be slow if there are a large number of nodes and edges visible. The "wiggle" operation applies that heuristic for a limited number of steps. The "grid" layout just puts the nodes in a rectangular array without considering the edge weights.