Web-viewer for plots in materials science, chemistry, and physics

Vis-à-vis is a standalone and self-contained HTML5 widget, written in the $mol framework and based on the D3 and Plotly libs.

Supports the following plot types (see examples folder):

• bar
• cube
• scatter and customscatter
• discovery
• eigenplot
• graph
• heatmap
• matrix
• phase diagram
• pie

All the plot types being visualized must conform the spec:

{
    "use_visavis_type": "SUPPORTED_TYPE",
    "error": "ERROR_OR_NULL",
    "payload": {
        "VARIOUS_FIELDS": "VARIOUS_CONTENT"
    }
}

Vis-à-vis exists in two realizations: standalone application called app and embeddable web component called plot.

Requirements

• node -v >= 15
• npm -v >= 7

Installation and development

Note, that, unlike many other frontend frameworks, $mol provides the same single environment for all its projects. That is, all your $mol-based code lives inside some directory $MOL_HOME. So if you don't have $MOL_HOME, create it and navigate there:

mkdir $MOL_HOME && cd $MOL_HOME

Run $mol MAM server (MAM stands for the $mol abstract modules) inside your $MOL_HOME:

npm exec mam@latest

Use a link to run the standalone Vis-à-vis application app with the hot reload support: http://localhost:9080/mpds/visavis/app/-/test.html

Building

Build the standalone application app at mpds/visavis/app/- using:

npm exec mam@latest mpds/visavis/app

Build the embeddable web component plot at mpds/visavis/plot/-/web.js using:

npm exec mam@latest mpds/visavis/plot

See also the mpds-visavis-plot web component description.

Sources file layout

app - the main $mol app

elements - Vis-à-vis elemental properties and constants

examples - Vis-à-vis supported data samples, see also plots on MPDS platform

lib - external libraries bundled

plot - plot types + embeddable web component implementation

plotly - Plotly library embedding description

License

MIT © by HYOO Guild (Pavel Zubkov, standonarise, and Dmitriy Karlovskiy) and Tilde Materials Informatics (Evgeny Blokhin)