I built an interactive periodic table with accessible facts and visuals. My son has recently been studying a children's encyclopedia of chemical elements and found it very interesting. The encyclopedia is in Swedish but he also speaks English so I noticed he, understandably, cannot identify some elements by their English name when it's too unlike Swedish (such as sulfur being svavel in Swedish). At first I made a quick bilingual periodic table for him and then started expanding it with various visuals. My aim was to have a fact about each element and a simple experiment visualization, some elements have more. The table retains an English-Swedish toggle.

All elements have an experiment animation such as a flame test, radioactivity or alkaline water explosion. The first two rows have real world pictures related to the elements, which take a bit to find and describe. I don't have any background in chemistry but have hopefully avoided basic mistakes.

I tried to keep the text educational but accessible - I imagine the target audience being kids like my own, or a younger me. Curious learners but young, so the text occasionally i.e. mentions nutrition or clarifies what "synthetic" means.

On the technical side, I have minimal Web experience and don't find the visual/UI side of development very fun so I wanted to build this without any JS frameworks or extensive use of JS. The backend is written in Go and the frontend interactivity is mostly done with HTMX and unsophisticated JS. The experiment visualizations for elements like lead and quicksilver are SVG shapes to which simple animation steps are applied.

Would love to hear any thoughts on the general approach, the element visualizations and any other points from HN readers. In particular I would welcome ideas about the transuranium elements, I have essentially the same Geiger visualization for many, and a silly particle beam collision for others because I wasn't able to come across any accessible differences between these elements.