JSpectraViewer

A Javascript library for viewing spectra. While designed primarily for NMR spectra, it can be used for any XY plot.

Documentation and Demos

For the latest documentation, download the repository and open the following file: docs/index.html

Demos of the various JSV features can be found in the demo directory.

Note, the demos may not work with Google Chrome due to a security issue opening local files. To get around this close Chrome and open it again from the command line:

# On macOS
open /Applications/Google\ Chrome.app --args  --disable-web-security \
  --allow-file-access-from-files
# Or use the included script
./script/open_chrome.sh

Dependencies

• D3 - http://d3js.org
• x2js - http://d3js.org (Optional. Required to read nmrML data)
• Sortable - https://github.com/RubaXa/Sortable (Optional. Required to drag peak and atom badge in the Assignment Table)

Setup

• Copy the dependencies (d3.v3.min.js) and jspectra_viewer.js to your javascript folder.
• Add script tags pointing to the files in your html:

<script src='javascript/d3.v3.min.js'></script>
<script src='javascript/jspectra_viewer.js'></script>

• Copy jspectra_viewer.css to your stylesheets folder and add a link to the file in your html:

<link rel="stylesheet" href="stylesheets/jspectra_viewer.css" />

Create new viewer

Create a container for the viewer in HTML:

<div id='my-spectra'></div>

Create viewer:

sv = new JSV.SpectraViewer('#my-spectra', {
  height: 450,
  width: 850,
  axis_y_lock: true,
  axis_y_show: true,
  axis_x_label: 'ppm'
});
sv.flash('Loading...')

See SpectraViewer for details about additional options.

Add an XY plot:

sv.add_spectrum(
  {
    id:'spectrum',
    name: 'Spectrum',
    xy_line: xy_data
  },
  {color: '#00F'}
);

XY data format

The XY data is an object with x and y arrays:

xy_data = { x: [0, 1, 2], y: [0, 2, 4] };

Additional data formats are described in SpectraViewer.add_spectrum.

OLD FOMRAT (deprecated): The XY data is an array of xy points:

xy_data = [{x:0, y:0}, {x:1, y:2}, {x:2, y:4}];

JSV Namespace

All JSV classes and utility functions are accessed through the JSV namespace:

merged = JSV.merge({a:1, b:1}, {b:2, c:3}); // => {a:1, b:2, c:3}

If a JSV object already exists, you can use the full name of JSpectraViewer instead:

merged = JSpectraViewer.merge({a:1, b:1}, {b:2, c:3}); // => {a:1, b:2, c:3}

Build JSV from Source

To ease in development, the JSV source code is broken into several files in "/dev". The compiled JSV file "/src/jspectra_viewer.js" is built using the following command:

./script/build.sh

This command will also build the help documentation in "/docs".

Spectra Viewer Controls

Zoombox Controls (box in upper left corner)