Atomic Models in D3 v3

by jdcast

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="dalton">
Dalton
</button>
<button id="thompson">
Thompson
</button>
<button id="rutherford">
Rutherford
</button>
<button id="bohr">
Bohr
</button>
<button id="schrodinger">
Schrodinger
</button>

<svg></svg>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

#dalton, #thompson, #rutherford, #bohr, #schrodinger {
  width: 100px;
  height: 20px;
  border-radius: 5px;
}

svg {
  height: 500px;
  width: 500px;
}

JavaScript

var svg = d3.select('svg');

var atom_x = 250;
var atom_y = 250;
var atom_r = 100;

var electron_r = 8;

var offset = 0.35;
var refreshIntervalId;
var e_offset = 20;

//need to better center the electron orbit ellipses around these nucleus coordinates
var nucleus_x = atom_x; 
var nucleus_y = atom_y; 
var nucleus_r = 20;

function getRandomOffset() {
  return (Math.random() * 2 - 1);
}

// Create data array containing initial coordinates for schrodinger electron clouds.
var electrons_schrodinger_db = [
  {
  	cx: nucleus_x,
    cy: nucleus_y,
    r: 40,
    class: 'electron-schrodinger',
    opacity: 0.8
  },
  {
  	cx: nucleus_x,
    cy: nucleus_y,
    r: 60,
    class: 'electron-schrodinger',
    opacity: 0.6
  },
  {
  	cx: nucleus_x,
    cy: nucleus_y,
    r: 80,
    class: 'electron-schrodinger',
    opacity: 0.4
  },
  {
  	cx: nucleus_x,
    cy: nucleus_y,
    r: 100,
    class: 'electron-schrodinger',
    opacity: 0.2
  }
];

// Create data array containing initial coordinates for electrons.
var electrons_db = [
  {
  	cx: atom_x + atom_r - e_offset,
    cy: atom_y,
    r: electron_r,
    fill: 'red',
    opacity: 0.0,
    class: 'electron'
  },
  {
  	cx: atom_x,
    cy: atom_y + atom_r - e_offset,
    r: electron_r,
    fill: 'red',
    opacity: 0.0,
    class: 'electron'
  },
  {
  	cx: atom_x - atom_r + e_offset,
    cy: atom_y,
    r: electron_r,
    fill: 'red',
    opacity: 0.0,
    class: 'electron'
  },
  {
  	cx: atom_x,
    cy: atom_y - atom_r + e_offset,
    r: electron_r,
    fill: 'red',
    opacity: 0.0,
    class: 'electron'
  }
];

//create data for rutherford electron orbits
//These angles and translations could be better programmatically done
var electron_orbits_rutherford_db = [
  {
  	cx: atom_x,
    cy: atom_y,
    rx: atom_r,
    ry: atom_r / 10,
    class: 'electron-orbit',
    angle: 10,
    translate_x: 45,
    translate_y:-30
  },
  {
  	cx: atom_x,
    cy: atom_y,
    rx: atom_r,
    ry: atom_r / 10,
    class:...