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:
linearPositivelinearNegativecubedPositivecubedNegativeparabolaUpparabolaDownrandomuniform
- 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