A d3 powered customizable and animated atomic bohr model
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

atomic-bohr-model

This d3 powered visualization package provides atomic animations which are highly customizable. An example app using this package can be found here: https://acollectionofatoms.github.io/atomic-bohr-model-examples/index.html

Features

  • Responsive
  • Built with d3.js in ES6
  • Easily modified nucleus, orbital, and electron radii, color
  • Animated initialization
  • Orbital rotational patterns:
    • linearPositive
    • linearNegative
    • cubedPositive
    • cubedNegative
    • parabolaUp
    • parabolaDown
    • random
    • uniform
  • Orbital patterns can be entirely clockwise, counter-clockwise, or alternating
  • Dynamic "address" system provides distinct ID's for each component of the Atom (Helpful for animation and styling. See: Properties)
  • Wikipedia summary and links provided for each Atom object (See: Properties)
  • Electron configurations provided by https://en.wikipedia.org/wiki/Electron_shell

Installation

npm install atomic-bohr-model --save

Usage

Include this script element in your mark-up:

<script type="text/javascript" src="./node_modules/atomic-bohr-model/dist/atomicBohrModel.min.js" charset="utf-8"></script>

along with a div to contain your atom.

<div id="bohr-model-container"></div>`

You MUST ensure your div has a width and height

The atoms provided are restricted to those which exist and have been discovered, therefore:

1 <= numElectrons <= 118

(passing anything < 1 or > 118 will result in either Hydrogen or Ununoctium)

At minimum numElectrons, containerId, and a unique idNumber must be provided.

var atomicConfig = {
  containerId: "#bohr-model-container",
  numElectrons: 88,
  idNumber: 1
}

var myAtom = new Atom(atomicConfig)

Options

var myAtom = new Atom({
  containerId: '#my-container',
  numElectrons: 1, // An integer between 1 and 118
  nucleusRadius: 30, // If not supplied will be 1/12 of the containers width
  nucleusColor: 'rgba(124,240,10,0.5)', // Hex, string or rbga
  electronRadius: 3, // Default value is 3
  electronColor: 'blue', // See nucleusColor
  orbitalSpacing: 10, // If not specified will be a 1/3rd of the nucleusRadius
  orbitalWidth: 1, // width of orbital paths, default is 0.1
  orbitalColor: 'black', // see electronColor
  idNumber: 1, // Required int to provide unique Atoms
  animationTime: 1300, // Time in milliseconds for initial electron animation
  rotateConfig: {speed: 50, clockwise: true}, // Rotates entire Atom with given params
  orbitalRotationConfig: { // Invokes orbital rotations at initialization
    pattern: {
      alternating: false, // Alternate orbital direction
      clockwise: false, // Direction for all orbitals
      preset: 'cubedPositive', // String to set pattern (see Features section)
    }
  },
  symbolOffset: 8, // When modifying nucleus radius this may need adjusting
  drawSymbol: true // Render atomic symbol or not
})

Methods

myAtom.removeElectrons(2)

Removes a given number of electrons

myAtom.addElectrons(7)

Adds a given number of electrons

myAtom.setNumElectrons(33)

Sets the number of electrons

var orbitalRotationConfig = {
  pattern: {
    alternating: true,
    clockwise: false,
    preset: 'parabolaUp',
  }
}
myAtom.rotateOrbitals(orbitalRotationConfig)

Rotates orbitals with given configuration

myAtom.destroy()

Destroys the <g> element housing the Atom but, NOT the parent <svg>

var rotateConfig = {speed: 50, clockwise: true}
myAtom.rotate(rotateConfig)

Rotates entire atom with given configuration

Properties

// Wikipedia data
myAtom.elementName
myAtom.wikiSummary
myAtom.wikiUrl
myAtom.electronConfig
myAtom.atomicSymbol
// Identifying Atoms and their components
myAtom.atomId // ex: atom-0
var firstOrb = myAtom.orbitals[0] // d3 selection
firstOrb.orbitalId // ex: atom-0-orbital-0
firstOrb.electrons[0].eId // ex: atom-0-oribital-0-electron-0