This project occurred to me looking at the current "complete" periodic table and thinking back to what it looked like when I was in grade school (Unnilhexium, anyone?). Thinking about the history of the thing, I thought I would be neat to have an interactive view of how the table has changed over time.
You can see the current working product here. I was heavily inspired by the PubChem website, but when I started looking at the source, it was based on a lot of modern tooling, custom fonts, Nodejs, React, and had no source to render. As an adherent of the open web, I thought I'd like to recreate it in a different way.
I want to create a visualization of the periodic table. These guiding principals help make decision and influence the design of the project. I want to build a working, interactive display of the periodic table which is self-contained, easy to understand, and visually appealing, and easy to augment with new filterings. To accomplish this, I had a few principles to help guide solutions to challenges.
As much as possible, everything needed to render the page should be in the source file.
To render their page, PubChem supplies a JSON file information about each element (chemical, not HTML). We should use this and extend it for our purposes.
The JSON file supplied to PubChem's website is a good place to start. Using some fancy regex, or simple programs, we can update the json document to add new features (like image urls)
Storing our data in JSON also allows us to make a data-driven script to build the HTML structure, which is essential to the next step
There are 118 unique elements with. We shouldn't be manually editing the final html file to deal with them. The best way to handle this is to have the computer do it for us.
In research during this project, I found the book, Superheavy, by Kit Chapman. It describes the history of the discoveries of the synthetic elements and the people behind them and was very entertaining.