Life123 : Dynamical Modeling of Biological Systems
Home1-click Live DemoTechnologyExperimentsGuideVisualizationDiffusionReactionsMembranesHistoryDownloadContact / Participate

1) Routine visualizations

Routine visualizations are done with plotly, inside the notebooks in JupyterLab.
plotly is fairly easy to use, provides good interactive controls, and appears to play nice with JupyterLab.
plotly is JavaScript-based, and uses D3 libraries, but it can be used from within JupyterLab purely by means of Python function calls.

The plotly visualizations seem to work fine both locally, as well as on the mybinder.org hosting environment.

matplotlib is also installed (but not used) for those preferring it.

2) Ad-hoc/specialized visualizations

Ad-hoc/specialized visualizations are done with D3.js and Vue.js. The reasoning behind that, is explained in this article.
In addition, Cytoscape.js is used for network diagrams ("directed graphs")

A series of Vue components provide the various types of needed functionality, typically based on ad-hoc/specialized needs, and interactive controls.

End users running experiments, as well as python programmers involved in the simulation software, may be happy to hear that they don't need to directly interact with JavaScript!

All Vue/D3/Cytoscape visualizations are sent to the (HTML) log file created by the various experiments – generally, a file with the same name stem as the JupyterLab notebook with the experiment, and located in the same folder. Such files can be opened with any brower; they will turn into a page on a new browser tab.
(Note: a bug in JupyterLab currently prevents would would have been the convenient "Open in New Browser Tab" feature from within JupyterLab.)

The "heavy lifting" (e.g. in terms of coordinate transformations) is done, as much as possible, by using existing D3 libraries; when not possible, the in-house library SVG Helper is used, typically to supplement D3 libraries.

List of Available Vue components

(Repository)

The following Vue components are matched to the current needs of the current experiments, for ad-hoc/specialized visualizations.

They typically supplement visualizations done with plotly inside the notebooks.

Click on the thumbnail images for LIVE versions of tests utilizing the same component (images may differ.)

(_n, below, is an integer indicating the version number)

vue_curves_n. Line charts and interpolating functions in 1D, with a chooser for the interpolating function.


vue_heatmap_n. A heatmap in 2D, with tool tips and a slider control.


vue_cytoscape_n. A visualization of network diagrams ("directed graphs"), based on the cytoscape.js library, with re-positionable and clickable nodes.
CLICK ON IMAGE FOR LIVE VERSION:


How to use Vue components for visualization (for DATA SCIENTISTS and END USERS)

If you run experiments in the JupyterLab notebooks, you'll generally use functions provided by the various modules. Those functions will do all the work of assembling the needed data, and passing it to the graph modules.

The interactive plots will be found in the output log of your run: a file (typically with the same name stem as the notebook, and in the same folder) that can be opened with any browser.

How to use Vue components for visualization (for Python CODE DEVELOPERS)

The parameters of the Vue components are currently best explained inside the components' .js files.

Python developers will generally interact with the graphic components by means of the Python library `HtmlLog`; you'll be using the same parameters – just with Python-appropriate values (e.g. "True" with capital T, instead of the "true", with lower case, that is used in JavaScript.) That library exports the given Python data into a format readable by the JavaScript visualization components, and creates a "live" HTML log file that can be opened with a browser, and contains the output collected during the run of the experiment, including the graphics and interactive controls for them.

The files with the Vue components for visualization are found in the `modules/visualization/vue_components` directory (in the repository). Components usually come as triplets of files: .js, .css and _test.htm
The _test.htm files are just for testing. Sometimes, a _debug.js version exists; those can generally be ignored
Typically, there are multiple versions of each component; generally, the one with the highest number is the one in recommended current use.

How to create/modify/test Vue components for visualization

Guidelines for Vue/D3/SVG developers:

Background:
You'll need knowledge of Vue.js (version 2), as well as at least general acquaintance with D3 libraries and SVG, as well as (if applicable) the Cytoscape.js library. Please refer to this in this article about the synergistic interplay of Vue and D3.

Typical work flow:

  1. develop or expand a Vue component (.js file) and its .css counterpart. For the components, use names such as "vue_heatmap_11". Directory of current Vue components
  2. as much as possible, use existing D3 libraries; when not possible, use or expand the in-house library SVG Helper
  3. demonstrate functionality with a self-standing XYZ_test.htm file

(Note: we use the "template literals" format for Vue components, which is very readable and requires no file compilation. It's discussed, in the context of various alternatives, in this excellent article: 7 Ways to Define a Component Template in Vue.js)

Recommended protocol: duplicate, and change the name, of the 3 files, .js, .css and _test.htm, for the component you want to edit – or for the one most similar to the new component you want to develop.

Final Result:
At the end of your development, you should have a Vue graphic component that can be demonstrated in its XYZ_test.htm file.



Guidelines for Python developers to create test files for existing graphic modules:

Background:
"Vue components" are graphic modules that can be invoked from python files by means of the Python library `HtmlLog`. That library permits the creation of "HTML logs" (.htm files) that can be opened with any browser, and can embed the graphic element(s) and text sent to the log in the run of a python file.

Typical work flow:

  1. Identify the _test.htm file that was used by the creator of the Vue component (graphical module), for the component of interest. Location of those files.
  2. Test an existing visualization component by creating a Python file, under `experiments/visualization/logs_with_Vue_component_tests`
  3. Use names such as "vue_heatmap_11.py" to indicate a Python test based on the visualization module "vue_heatmap_11"
  4. Duplicate an existing python file in that folder, and use it as a template. Note that the files make use of the convenient Python library `HtmlLog`
  5. Change the values of the COMPONENT_NAME variable at the top, where it says   # CHANGE AS NEEDED
  6. Further below in the python file, in the definition of the all_data dictionary, change the data for the plot. Use arbitrary data hardwired in the python file; refer to the appropriate _test.htm for examples of data names and values.
  7. Run the python file and verify that the HTML log is created with the corresponding .log.htm name; in the above example, "vue_heatmap_11.log.htm" (note: if using PyCharm, or perhaps other IDE's, you may need to refresh the view of the Project files.)
  8. Open that log file with a browser, and inspect the correctness of the embedded graphic element(s), often also containing interactive controls.
  9. Troubleshooting: in case of a missing or incorrect display of the graphic element(s), press F12 on your browser, to view the JavaScript console. Also, view the page source of the HTML file with the log, and verify that all CSS and Javascript links work.
    Compare your log file with the original _test.htm file that accompanied the Vue component, in the directory of Vue components. Your log file ought to largely re-create that HTML file, with some differences in paths of embedded file names.

Final Result:
At the end of your development, you should have a Python file that, when run, creates an HTML file with a name such as XYZ.log.htm ; that log file, when opened in a brower, should correctly display the graphic element(s).
GOAL: Users running experiments in Jupyterlab notebooks will be able to refer to the python test files, in case their graphics don't show up as expected.

Get Involved!

Improve and expand the existing visualizations

Skill set: D3 libraries and Vue.js front end for interactivity
Help enhance/create Vue components using D3 libraries.
Skill set: Graphic design/UX
Help create or polish the conceptual designs.
Skill set: Chemisty/Biology
Try out the existing experiments, or some of your own, and suggest needed improvements/expansion to the existing visualization tools.