atom.js

var redElectron = {
  theta: 0,
  draw: function() {
    if (redElectron.theta > Math.PI*2) {
      redElectron.theta = 0;
    }
    if (redElectron.theta > Math.PI) {
      var removed = d3.selectAll('.red-electron').remove();
      d3.selectAll('.red-far').append(function() {
        return removed.node();
      });
    }
    else {
      var removed = d3.selectAll('.red-electron').remove();
      d3.selectAll('.red-close').append(function() {
        return removed.node();
      });
    }

    var additional = "translate("+100*Math.cos(redElectron.theta)+","+5*Math.sin(redElectron.theta)+")";
    d3.selectAll('.red-electron').attr("transform", "rotate(35,250,250) translate(-95,75) "+additional);
    redElectron.theta += 0.05;
  }
}

var purpleElectron = {
  theta: 0,
  draw: function() {
    if (purpleElectron.theta > Math.PI*2) {
      purpleElectron.theta = 0;
    }
    if (purpleElectron.theta > Math.PI) {
      var removed = d3.selectAll('.purple-electron').remove();
      d3.selectAll('.purple-far').append(function() {
        return removed.node();
      });
    }
    else {
      var removed = d3.selectAll('.purple-electron').remove();
      d3.selectAll('.purple-close').append(function() {
        return removed.node();
      });
    }

    var additional = "translate("+85*Math.cos(purpleElectron.theta)+","+5*Math.sin(purpleElectron.theta)+")";
    d3.selectAll('.purple-electron').attr("transform", "translate(10,-60) rotate(120,94,90) "+additional);
    purpleElectron.theta += 0.05;
  }
}

var dash = {
  offset: 0,
  draw: function() {
    if (dash.offset > 4.8) dash.offset = 0;
    d3.selectAll('.electron-line').attr('stroke-dashoffset',dash.offset);
    dash.offset += 0.1;
  }
}

d3.xml("/img/atom.svg", "image/svg+xml", function(xml) {
  document.getElementById('atom').appendChild(xml.documentElement);
  window.setInterval(redElectron.draw,50);
  window.setInterval(purpleElectron.draw,45);
  window.setInterval(dash.draw,45);
});