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.
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.
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:
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.
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
_test.htm files are just for testing. Sometimes, a _debug.js version exists; those can generally be ignored
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:
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.
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:
_test.htm file that was used by the creator of the Vue component (graphical module), for the component of interest.
Location of those files.
COMPONENT_NAME variable at the top, where it says # CHANGE AS NEEDED
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.
.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.)
_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.