Mike's Interactive, Open Source Periodic Table!

Interactive Periodic Table!

    For the last few weeks I have been learning to code over at Codecademy, and decided that it was time to test out the Javascript and jQuery I've been learning. So, I built a periodic table. Not only that, I wanted to make the project open source so students and educators can use it for teaching and projects, so I spent a little time at Creative Commons to learn more about how to release the table to the public.

    Quick link to the periodic table >>

 

How to use it

    The directions are very simple: Hover over a non-bold category to see elements belonging to that specific category, and Hover over a bolded category to see all elements covered by all categories in the section. You can also click on an element to open or close an info box which appears under the element. Here are some previews of the table in action:

 

Periodic Table showing metals, nonmetals, and metalloids

Periodic table showing metals, nonmetals, and metalloids. (full size)

 

Periodic table showing the various types of metals

Periodic table showing the various types of metals. (full size)

 

Periodic table showing the various types of nonmetals.

Periodic table showing metals, nonmetals, and metalloids. (full size)

 

Periodic Table showing the s, p, d, and f-blocks

Periodic Table showing the s, p, d, and f-blocks. (full size)

 

Periodic Table showing special, non-traditional categories

Periodic Table showing special, non-traditional categories. (full size)

Click to open the element info box

Click to open the element info box. You can open multiple boxes to make comparisons!

 

Possible Uses

  • Chemistry teachers could use this to enhance teaching about the periodic table in class.
  • Anyone working in a technical field could make their own subsection of this table. For example, "Special" could be replaced with "cars," and the subsections highlight elements in the car battery, catalytic converter, engine block, etc.
  • Students could modify the info blocks in the periodic table to make a stunning, informative chemistry project.
  • And of course, you could modify the table itself, to make joke periodic tables. One example is the Periodic Table of Minecraft.

 

Downloads

Go to the Interactive Periodic Table and see it in action!

Download the files here. Open table.html in a browser to see it work.

 

License

    This periodic table is under a Creative Commons Attribution-ShareAlike 3.0 Unported License. If you would like to use this periodic table beyond your own enjoyment, please credit me by using the information below, and using the same license.

 

Get updates!

    As time goes on, I will be making other versions of this periodic table when answering Ask a Scientist questions, and I will occasionally update the current version. So, if you would like updates, please follow me on Twitter so you can get the latest updates when I make them!