Show HN: Interactive Periodic Table with Experiments(grundamnen.nu)

2 pointsby ACS_Solver6 maanden geleden3 comments

Show HN: Interactive Periodic Table with Experiments

https://grundamnen.nu

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.

3 comments

vunderba6 maanden geleden

Nice job. I'd recommend adding either a Zoom In/Out slider or Fit to Screen though - since even on a full-width browser the table cuts off.

Related: this one also has some nice visualizations that help illustrate corresponding practical applications for each element.

https://elements.wlonk.com/ElementsTable.html

And if you're ever feeling particularly masochistic, I built a slide puzzle game which randomly chooses elements and challenges you to re-arrange them by atomic number.

https://slide-puzzles.specr.net

ACS_Solver6 maanden geleden

Thanks, I'll see about an on-page zoom. On my 1440p the whole table fits even with the side drawer open and with my webdev inexperience I didn't even think about zoom controls other than the browser's being an option.

I love your slide puzzle too. Very cool with different hint levels, where you can have just the element symbol or the full name as well. Surely trivial for chemists but not so for me.

vunderba6 maanden geleden

Thanks! My brother is a chemical engineer so he's about the only one who can come close to solving the puzzles. :)

Also really like how the Timeline fades out the elements to filter by year.

Hmmm... I wonder if its a HiDPI scaling thing? I tried the site on a couple browsers (Safari, Chromium) and even on a 4K monitor it only fits Hydrogen to Nitrogen.