An interactive data visualization of the 20 nearest stars to Earth, built with React and D3.js.
https://zianam.github.io/Star-Map/
Each star is plotted by its real distance from Earth, color-coded by spectral type (red dwarfs, yellow stars like our Sun, white and blue giants). Hover over any star to see its name, distance, and classification. Stars can be filtered by type using the checkboxes.
The data was scraped from stellarcatalog.com using Python and BeautifulSoup, then processed to add spectral colors and sizes.
- React + Vite
- D3.js (visualization)
- Python + BeautifulSoup (data scraping)
npm install npm run dev
This was my first time using D3.js. I learned how to bind data to SVG elements, use scales to map real astronomical distances to pixel positions, and build interactive hover effects. I also learned how to deploy a React app with GitHub Actions.