Skip to main content
100%

SpecdrawJS: Full client-side mode - SampleSet spectra

✓ Published0🌍 Public
Aahmohamed
Last edited Oct 16, 2015
Created on Oct 12, 2015

This interactive visualization displays a two-dimensional HSQC spectrum from the BMSE000139 entry, rendered through SpecdrawJS in its full client-side mode. The application loads spectral data from the NMRPro server and visualizes peak intensities using D3.js for rendering and interaction. Users can zoom along the z-axis with the mouse wheel to intensify peaks, while the SpecdrawJS library manages the spectrum display within a 960-by-500-pixel container. The example demonstrates SpecdrawJS’s application programming interface, configured via `specdraw.App().config(2)` and bound to the container using D3’s selection and call methods.

AI-generated description

This example demonstrate using SpecdrawJS in interactive view mode. This mode is most suitable for spectral databases, as it allows zooming, viewing of multiple spectra (i.e datasets) in the same App. Interactive view mode doesn't support peak picking, integration, binning or saving spectra as images.

NB: Use mouse wheel (scroll) to zoom on the z-axis (intensify peaks in the spectrum).

For details about SpecdrawJS.

For more examples see NMRPro.

Similar vizzes

Loading thumbnail…

SpecdrawJS: Full client-side mode - SampleSet spectra

This example demonstrates a static, full client-side rendering of an NMR spectrum using SpecdrawJS, showing a SampleSet of spectral data without user interactivity. The visualization is created by initializing a SpecdrawJS app with a single configuration, loading data from a remote JCAMP-DX file (indometacin/1h.dx) via the `.data()` method, and then rendering it into a container div using `d3.select().call()`. The code relies on D3 v3 and the SpecdrawJS library, which handles the spectral plotting entirely in the browser.

Aahmohamed
92% match
Loading thumbnail…

SpecdrawJS: Full client-side mode - SampleSet spectra

This example shows a one-dimensional nuclear magnetic resonance (NMR) spectrum displayed as a line chart, using the SpecdrawJS library in full client-side mode. The application fetches sample set data from a remote NMRPro server URL and renders it inside a fixed-size container. The code loads d3.v3 and SpecdrawJS from a CDN, then creates a `specdraw.App` instance, passes the data URL via its `.data()` method, and binds the app to the DOM element using `d3.select(...).call(...)`. The visualization is styled with a custom CSS rule for the container.

Aahmohamed
91% match
Loading thumbnail…

SpecdrawJS: Full client-side mode - SampleSet spectra

SpecdrawJS renders a proton NMR spectrum of indomethacin directly in the browser from a JCAMP-DX file fetched via a URL. The interactive visualization displays the spectral trace with zooming and panning controls, enabling users to explore peak positions and intensities. The code initializes a `specdraw.App()` instance, binds it to the `#container` div, and loads the data from `rawgit.com` using d3.v3. Styling relies on `specdraw.min.css`, while the underlying data processing is handled entirely client-side by the SpecdrawJS library.

Aahmohamed
91% match
Loading thumbnail…

SpectrogramJS

This interactive spectrogram visualizes audio frequencies in real time, displaying a scrolling heatmap of sound data across time. The project uses the Web Audio API to analyze audio buffers and D3.js (v5) for rendering the SVG axes and canvas-based spectrogram. Playback controls allow users to load and analyze sound files, with the frequency analysis performed via `AnalyserNode.getByteFrequencyData`. The visualization animates as audio plays, building up the spectrogram view.

JJoker-tr
65% match
Loading thumbnail…

SpectrogramJS

A spectrogram visualization displays the frequency spectrum of an audio file over time, rendered as a scrolling heatmap across a canvas. The example loads a duck sound effect, analyzes it with the Web Audio API’s `AnalyserNode`, and records frequency data during playback. D3.js draws the axes and scale grid as SVG overlays, while the spectrogram’s pixel data is painted onto the canvas. Playback and analysis run via `ScriptProcessorNode` and `requestAnimationFrame`, and the visualization updates in real time until the sound finishes.

JJoker-tr
63% match
Loading thumbnail…

Spectrogram Visualization

This spectrogram visualization renders audio frequency data as a series of colored rectangles across an SVG canvas. The code loads a CSV file containing 13 numeric columns representing frequency bins and maps each row to a rectangular band using D3’s data join. The example uses d3.csv for data loading, d3.scaleLinear for horizontal positioning, and d3.select to manipulate the SVG elements. The rectangles are appended with a fixed height, though the width calculation appears incomplete in the code.

NNeeraj Gopalakrishnan
62% match
Loading thumbnail…

Spectrum - Dots

This visualization presents a real-time audio spectrum analyzer that animates a canvas of colored dots. It uses the Web Audio API to capture microphone input, and then d3.js scales map frequency data to screen coordinates and color values. Each frame, the code reads frequency data using `analyser.getByteFrequencyData`, then draws fading circles to create a dynamic, trailing effect. The visualization displays the raw frequency amplitude, with low values shown in black and higher amplitudes in red, rendered as a continuously updating canvas animation.

Aalexmacy
62% match
Loading thumbnail…

Untitled

This interactive scatter plot displays two measured variables, Spe_1 and Spe_2, as semi-transparent circular points on Cartesian axes. Users can zoom and pan the chart using the mouse. The visualization uses d3.zoom to handle user interactions, rescaling the linear scales with d3.event.transform. Axes update through d3.axisBottom and d3.axisLeft, while a clipPath prevents points from rendering outside the plot area. Data loads from a CSV file hosted on GitHub, and the chart is rendered in SVG within a React-based page using d3.v4.

Aamnicpo
61% match