The Periodic Table is one of the most iconic tools in science, but it often feels overwhelming in static textbook form. Imagine if you could explore it interactively—searching, clicking, and learning in seconds.

That’s exactly what I built: an Interactive Periodic Table App using Python + Streamlit, powered by a JSON dataset of all elements. 🎉

In this blog, I’ll walk you through the motivation, features, tech stack, and implementation—and how you can try it out yourself.

🌟 Why This Project?

Chemistry students often face two big problems:

📖 Static tables are hard to navigate quickly.

🤯 It’s tough to connect element properties with their position in the table.

So I set out to build an app that solves both: interactive, searchable, and fun.

⚙ Tech Stack

The app is powered by:

Python 🐍 – core logic

Streamlit 🎨 – for building the interactive UI

Requests + JSON 🌐 – to fetch element data from GitHub

Pandas 📊 – for data handling

🔑 Features

📊 Detailed info: atomic number, weight, group, category, etc.

🎨 Color-coded categories (alkali metals, noble gases, etc.)

🖱 Clickable periodic table to view details

📱 Works on both desktop and mobile

🛠 Implementation

Fetching the Data

I used a JSON file of all periodic table elements hosted on GitHub: 👉 Periodic Table JSON

import requests 
import pandas as pd

#Fetch JSON data
url = "https://raw.githubusercontent.com/Bowserinator/Periodic-Table-JSON/master/PeriodicTableJSON.json" 
data = requests.get(url).json()

#Convert to Pandas DataFrame
elements = pd.DataFrame(data["elements"])

Streamlit Layout

import streamlit as st

st.title("🧪 Interactive Periodic Table")

Interactive Element Grid

Each element is displayed as a button, and clicking it shows details:

for , row in elements.iterrows():
    if st.button(row['symbol']):
        st.subheader(f"{row['name']} ({row['symbol']})") 
        st.write(f"Atomic Number: {row['number']}") 
        st.write(f"Atomic Mass: {row['atomicmass']}") 
        st.write(f"Category: {row['category']}") 
        st.write(f"Phase: {row['phase']}")

📸 Demo (Screenshots)

🚀 Deployment

The app is deployed on Streamlit Cloud, so you can try it instantly: 🔗 Live Demo

To run locally:

git clone https://github.com/anu-rag-panda/streamlit-projects.git
cd "interactive periodic table" 
pip install -r requirements.txt 
streamlit run app.py

💡 Challenges

Formatting the JSON into a usable DataFrame.

Designing a grid layout close to the actual periodic table.

Keeping the app fast and responsive.

🌱 Future Plans

📈 Visualizing periodic trends (like electronegativity, radius, etc.)

🎧 Adding audio/voice explanations

🌍 Translating to multiple languages

🙌 Conclusion

By using Streamlit + JSON data, I transformed the static periodic table into a dynamic, interactive learning tool.

Whether you’re a student, teacher, or science enthusiast, this app makes exploring chemistry fun, engaging, and memorable.

👉 GitHub Repo: Interactive Periodic Table

👉 Try it Live: https://interactive-periodic-table-anurag.streamlit.app/

📧 Contact Me

👉 Linkedin: https://linkedin.com/in/anurag-panda-

👉 Email ID: anuragpanda.dev

🧪 Building an Interactive Periodic Table with Streamlit (Python + JSON)