Thanks for responding well — a neat tool.
As second suggestion: this probably looks great on a cell phone, but on a 50" display you've got tons more space for additional elemental facts/tidbits. Perhaps detect monitor size, then keep simple for phones?
This could additional put the lanthomides into their correct placement (if window widened enough) [0].
[0] <https://xkcd.com/2913/>
[•] <https://i.imgur.com/aAnz6w1.png>
Wasn't so cluttered before — the elements were squares (not tallcats). Silver's typo remains.
Much prettier. Could easily have larger pop-ups (entire point is to get information on elements, no?) <https://i.imgur.com/IVx5MY5.png>
Heck, even have a link to Wikipedia articles (why not?). You're obviously in the enjoyment of information sharing =D
You also have plenty of space for an example element (e.g. describe what each line represents e.g.g: density, atomic mass, proton/element #). The map's "key" if you will... not everybody knows these standardized chemnerd properties (you can then also remove the 120+ "RT" by simply placing in example element @STP, with a link to what that means, too).
Just feedback from a fellow dork am.chem.
To streamline the UI, might I suggest replacing example element (copper) with just the explainers, next to hydrogen [2]... using that elements information (without adding a free-floating copper).
If that doesn't make sense, let me know.
Thanks for being a responsive educator.
[2] perhaps use Beryllium for your example/explainer -- because then you can explain the electron orbitals too ..?
----
Replace the topbar (color==atomic class) location to between Group II & III elements (e.g. whitespace between Be B); does not need to be explained on example element text.