Skip to content

Web-viewer for materials science visualizations

License

Notifications You must be signed in to change notification settings

mpds-io/visavis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 following spec:

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

This is currently supported by various MPDS online products.

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

Requirements

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

Development

Note that, unlike many other frontend frameworks, $mol provides the same single environment for all its projects, under the standard namespace scheme. That is, all your $mol-based code lives inside some directory $MOL_HOME. So if you don't have $MOL_HOME yet, 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

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

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

Building

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

npm exec mam mpds/visavis/app

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

npm exec mam mpds/visavis/plot

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)