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.
purely by means of Python function calls.
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.
Ad-hoc/specialized visualizations are done with
Vue.js. The reasoning behind that, is explained in
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.
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.
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)
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.
_test.htmfiles are just for testing. Sometimes, a
_debug.jsversion exists; those can generally be ignored
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:
(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,
for the component you want to edit – or for the one most similar to the new component you want to develop.
At the end of your development, you should have a Vue graphic component that can be demonstrated in its
"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:
_test.htmfile that was used by the creator of the Vue component (graphical module), for the component of interest. Location of those files.
COMPONENT_NAMEvariable at the top, where it says
# CHANGE AS NEEDED
all_datadictionary, change the data for the plot. Use arbitrary data hardwired in the python file; refer to the appropriate
_test.htmfor examples of data names and values.
.log.htmname; 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.)
_test.htmfile 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.
At the end of your development, you should have a Python file that, when run, creates an HTML file with a name such as
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.