Dependencies:

JSpectraViewer requires the following dependencies:

• D3.js (v7.9)
• X2js (v3.4)
• Fast-XML-Parser (v4.5)
• JSMol (v?)

Installation:

JSpectraViewer (jsv2) can be installed in your Node.js project using npm or Yarn. You can also include it via a CDN like jsdeliver or unpkg link in your HTML file. These should also include the dependencies mentioned above.

node.js

npm install jsv2

yarn

yarn add jsv2 

jsdeliver

<script src="https://cdn.jsdelivr.net/npm/jsv2@latest/dist/index.umd.js"></script>

unpkg

<script src="https://unpkg.com/jsv2@latest/dist/index.umd.js"></script>

Usage:

After installation, you can use JSpectraViewer in your JavaScript code. The API provides three main classes: DataParser, SpectraViewer1D, and SpectraViewer2D.

Parsing Data

The DataParser class is used to parse various data formats, including JSON, nmrML, and CSV.The `dataType` option must specify the type of visualization you expect to create, such as `1D-NMR`, `2D-NMR`, `1D-EIMS`, etc.For full list of supported data types, refer to the DataParser API documentation

import { DataParser } from 'jsv2';
// Initialize the DataParser with the selected file type
// Note: The HTML file selector should be an input element with type="file" and id="file-selector"
let dataParser = new DataParser("#file-selector", {
  dataType: "1D-NMR", // Specify the type of data you expect
  expectedDataTag: "spectrumDataArray",
})

Once parsing is completed, it emits a `fileParsed` event with the parsed data. Event listeners can be added for visualizing this data.

dataParser.addEventListener("fileParsed", (event) => {
  // Access the parsed data
  let parsedData = event.detail;
});

Data Visualization

The SpectraViewer1D class is used to visualize 1D spectra data. It can be initialized with any X, Y based data arrays or the parsed data from DataParser. For more details on the SpectraViewer1D API options, refer to the SpectraViewer1D API documentation

import { SpectraViewer1D } from 'jsv2';
// Initialize the SpectraViewer1D with the parsed data
let spectraViewer1D = new SpectraViewer1D("#spectra-viewer-1d", {
  name: "test-viewer",
  width: 1650,
  height: 400,
  chartTitle: {
      text: "Spectrum Viewer",
      fontSize: 20,
      color: "black",
      position: "top-right",
      underline: true
  },
  chartType: "1D-NMR", // Specify the type of chart (event.detail.dataType)
  dataset: [
      {
          dataArray: {
              x: event.detail.x,
              y: event.detail.y
          }
      }
  ],
});

Similarly, the SpectraViewer2D API documentation can be used for visualizing 2D NMR spectra data.