Data Visualization
// INTERACTIVE EXOPLANET SCROLLYTELLING • D3.JS
Through the Lens: An Interactive History of Exoplanet Discovery
Role: Frontend Developer & UI Designer (Data Processing, Scrollytelling Logic, D3.js Integration)
Stack: HTML5, JavaScript (ES6+), D3.js (v7), Vite, Vanilla CSS
Dataset: Open Exoplanet Catalogue (filtered 1992–2017)
Through the Lens is an interactive scrollytelling web application that visualizes the history of exoplanet discoveries from the first confirmed detection in 1992 up to 2017 (the height of the Kepler Space Telescope era). By mapping orbital and physical parameters, the project tells a narrative of human technological progress, our observational biases, and the vast scale of our ignorance.
Key Features
The Telescope Lens
An interactive scatter plot of over 3,500 planets. As the user scrolls, the catalog populates year-by-year in real time.
- Timeline Scrubbing: Fluid scroll-driven transitions.
- Flicker Effect: Planets with missing critical parameters flicker on the screen, representing the "ghosts" of our catalog.
Solar System Zoom
A logarithmic scale reference row of our own solar system with a physical "Zoom to Earth" button.
- Scale Context: Visually demonstrates how invisible our home planet would be to current exoplanet detection instruments.
Yield & Completeness
A dual-chart dashboard showing discoveries per year and parameter completeness.
- Figure A: Cumulative stacked area chart of discovery methods (Transit, Radial Velocity, etc.).
- Figure B: Bar chart tracking data fill rates for the selected year.
Scientific Storytelling Panels
To guide the user through the scientific insights, we integrated three guided narrative panels that filter and highlight specific regions of the scatter plot:
- Panel 01 (Hot Jupiters): Explores the core accretion model, showing how giant gas planets cluster close to stars, reflecting early detection biases.
- Panel 02 (Habitability): Maps stellar temperatures against orbital periods to highlight the boundaries of the habitable zone and where potential Earth-like candidates lie.
- Panel 03 (Eccentricity): Visualizes the orbital shapes and eccentricity, highlighting the extreme diversity of planetary orbits compared to our own solar system.
Design & Technical Implementation
Designing for astronomy data presents a unique challenge: representing vast scales without overwhelming the user. We used a dark, space-inspired theme with high-contrast color choices (yellow for Transits, blue for Radial Velocity) to make the data points pop.
The project leverages D3.js (v7) for rendering the dynamic SVG visualizations, using custom transition tweens to animate nodes as the timeline scrubs. Responsive design considerations ensure that the scrollytelling panels remain legible and the scatter plot adjusts its dimensions across different screen sizes.
