Periodic Table
what is this
all 118 elements drop in one by one, in order of atomic number, so you can watch the periods fill at their real lengths: two, eight, eight, eighteen. hover for name and mass, click for a short fact, click a family in the legend to isolate it. hit spiral to fold the table into a plain line of atomic numbers winding outward, and flip back to see how much structure the grid adds.
where each element goes
no positions are stored. row and column come from the atomic number and where each period starts:
const PERIOD_STARTS = [1, 3, 11, 19, 37, 55, 87, 119]
period 1 puts hydrogen and helium at opposite edges, periods 2 and 3 leave a gap of ten, periods 4 and 5 fill all eighteen columns, and periods 6 and 7 pull 57–71 and 89–103 out into the two rows at the bottom.
the spiral
it's an archimedean spiral. equal angles would crowd the centre, so each step turns by arc length divided by radius, which keeps neighbours evenly spaced all the way out.
learn one a day
a companion page for memorising the table: one element per day, with an atom model, a fact, and where you meet it in real life.
element of the day →learn one element a day, with a tiny atom model for each one.