This data visualization shows an animated Bohr diagram for the first 18 atoms of the periodic table. Hover over the atoms to get more information regarding their shells.
This may seem just an animated SVG, not that much related to a regular dataviz.
However, this is in fact a visualization based on data! Looking at the periodic table I created an array like this, with the basic information about the electron shells:
[
{atom: "Hydrogen", symbol:"H", shells:[{level:"K", amount:1}]},
{atom: "Helium", symbol:"He", shells:[{level:"K", amount:2}]},
{atom: "Lithium", symbol:"Li", shells:[{level:"K", amount:2}, {level:"L", amount:1}
...etc
]Then, based on that data, I created the atoms, with the nucleus, the shells and the electrons.
This animated SVG was not created for the best performance... for that, a rotating <g> element holding the shell and its electrons would be an easy and efficient option. Instead of that, here I’m doing a very computer-intense approach: each one of the 171 electrons is individually controlled. This approach demands a lot of computation (your browser is probably struggling by now), but it has advantages: the electrons can have different speeds or different paths. This may be useful if, for instance, I decide to change the shape of each shell, or even adding the subshells (s, p, d, f) with different geometries.