I was looking at the periodic table for a little side project and found myself referring back to the Wikipedia page. I wanted to checkout a few elements and their physical properties.

Then looking for additional attributes, I landed on this site. Looks like a university page prepared for a class. I thought, hmm, looks like the perfect recipe for an interactive periodic table using the different attributes for each element. Here’s what I did:

downloaded the two CSV files from the site

put them together into a JSON dataset

loaded the JSON dataset into the D3 Console

used D3 to make the periodic table

This whole thing took about 4–5 hours, so it wasn’t that bad at all. For a piece of work that only took a few hours, it came out pretty good, thanks to the D3 abstractions and Datazar’s JS and CSS editors. Only thing that was annoying was the tedious process of matching the JS cell with the element itself so that I can display the name/atomic number and also detect which cell is being clicked to display additional information. I followed a row-column process to identify each cell and then put that identification into the JSON dataset that contains all the metadata of each element. I used the dashboard.dataset() function to pull the dataset into my JS file.