JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<h3>Sodium (2,8,1)</h3>
<div id="chart_container">
</div>
<script src="http://d3js.org/d3.v2.js"></script>
</body>

CSS

body { 
    padding: 10px;
}
h3 { 
    font-family: Georgia;
    font-weight: bold;
    margin-bottom: 10px;
}
#chart_container { 
    width: 300;
    height: 300;
}
svg { 
 border: 1px solid #ccc;
 -webkit-box-shadow: inset 0 1px 1px rgba(127, 101, 187, 0.075), 0 0 8px rgba(212, 85, 102, 0.6);
 -moz-box-shadow:inset 0 1px 1px rgba(127, 101, 187, 0.075), 0 0 8px rgba(212, 85, 102, 0.6);
 box-shadow:inset 0 1px 1px rgba(127, 101, 187, 0.075), 0 0 8px rgba(212, 85, 102, 0.6);
}
circle.shell {
    fill: transparent;
  stroke: #ccc;
  stroke-width: 1px;
}
circle.nucleus {
    fill: #ccc;
  stroke: grey;
  stroke-width: 1px;
}
circle.electron {
    fill: steelblue;
  stroke: #ccc;
  stroke-width: 1px;
}

JavaScript

$(document).ready(function() { 
    
var width = 300,
    height = 300,
    margin = 20;
var x_centre = width/2;
var y_centre = height/2;
var nuclear_radius = 15;
    
var vis = d3.select("#chart_container").append("svg:svg")
    .attr("width", width)
    .attr("height", height);

var electrons = [
    { name: 'Electron1', distance: 1 }, 
    { name: 'Electron2', distance: 1 }, 
    { name: 'Electron3', distance: 2 }, 
    { name: 'Electron4', distance: 2 }, 
    { name: 'Electron5', distance: 2 }, 
    { name: 'Electron6', distance: 2 }, 
    { name: 'Electron7', distance: 2 }, 
    { name: 'Electron8', distance: 2 }, 
    { name: 'Electron9', distance: 2 }, 
    { name: 'Electron10', distance: 2 }, 
    { name: 'Electron11', distance: 3 }, 
];

var radius_counts = {};
for (var i = 0; i < electrons.length; i++) { 
    if (electrons[i].distance in radius_counts) { 
         radius_counts[electrons[i].distance] += 1;
    } else { 
         radius_counts[electrons[i].distance] = 1;
    } 
}

var radiuses = [];
for (var key in radius_counts) {
    radiuses.push(key);
}

var multiplier = (d3.min([width, height]) - 2*margin - nuclear_radius) / (d3.max(radiuses) * 2);

var shells = vis.selectAll("circle.shell")
     .data(radiuses)
     .enter().append("circle")
     .attr("class", "shell")
     .attr("cx", x_centre)
     .attr("cy", y_centre)
     .attr("r", function(d, i) { 
         return (d * multiplier);
      });

var nucleus = vis.selectAll('circle.nucleus')
    .data(['nucleus'])
    .enter().append("circle")
    .attr("class", "nucleus")
    .attr("cx", x_centre)
    .attr("cy", y_centre)
    .attr("r", nuclear_radius);

// Calculate the x- and y-coordinate values 
// for each electron.
var keep_count = {};
electrons.forEach(function(d) { 
    var siblings = radius_counts[d.distance];
    if (d.distance in keep_count) { 
      keep_count[d.distance] += 1;    
    } else { 
        keep_count[d.distance] = 1;
    }
    var angle = (360/siblings) *...