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:
along with a div to contain your atom.
`
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 = atomicConfig
Options
var myAtom = 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
Removes a given number of electrons
myAtom
Adds a given number of electrons
myAtom
Sets the number of electrons
var orbitalRotationConfig = pattern: alternating: true clockwise: false preset: 'parabolaUp' myAtom
Rotates orbitals with given configuration
myAtom
Destroys the <g>
element housing the Atom but, NOT the parent <svg>
var rotateConfig = speed: 50 clockwise: truemyAtom
Rotates entire atom with given configuration
Properties
// Wikipedia datamyAtomelementNamemyAtomwikiSummarymyAtomwikiUrlmyAtomelectronConfigmyAtomatomicSymbol// Identifying Atoms and their componentsmyAtomatomId // ex: atom-0var firstOrb = myAtomorbitals0 // d3 selectionfirstOrborbitalId // ex: atom-0-orbital-0firstOrbelectrons0eId // ex: atom-0-oribital-0-electron-0