react-emission-spectra

a set of react components for visualising the visible emission and absorption spectra of chemical elements

Demo

Install

npm install --save react-emission-spectra

Usage

import React, { Component } from 'react'

import {SpectralLines} from 'react-emission-spectra'

class Example extends Component {
  render() {
    return <SpectralLines elementSymbol="H" spectrumType="emission"/>
  }
}

For more examples see https://rested.github.io/react-emission-spectra/

How it works

The data

The data for the emission/absorption spectrum for each element comes from the NIST Atomic Spectra Database Lines Form. This collection code can be found here.

The data then gets processed into clusters using the jump method and K-Means. The code for this can be found here.

The data for some elements is missing this should be due to there not being available data on these:

const missingElements = ["Ds", "Mt", "Nh", "Mc", "Ts", "Lv", "Fl", "Hs", "Fm", "Db", "No", "Md", "Sg", "At", "Rg", "Bh", "Cn", "Rf", "Lr", "Og"]

The rendering

The rendering uses css gradients generated using the fantastic tinygradient library. This avoids cluttering the dom with extra elements and ensures native rendering.

License

MIT © Rested