--- title: GLIMPSE description: JWST spectroscopy visualizer section: craft tags: [project, full-stack] genre: reference stability: stable lastUpdated: 2026-04-19 url: https://fardiniqbal.com/docs/craft/projects/glimpse --- Interactive JWST exoplanet transit spectroscopy visualizer. Browses the JWST observation catalog, renders transmission spectra with 1-sigma error bars, overlays molecular absorption bands, and exports publication-ready data. WCAG 2.1 AA compliant. ## What it is [#what-it-is] GLIMPSE is a full-stack visualization tool for exoplanet atmospheres. When a planet transits its host star, a fraction of starlight filters through its atmosphere; molecules absorb at characteristic wavelengths, producing a spectral fingerprint. GLIMPSE renders those fingerprints interactively from real JWST archive data and physically-motivated demo models. The transmission spectrum plots transit depth `d = (Rp/R*)^2` in ppm against wavelength — feature amplitudes are 10–1000 ppm for gas giants and 1–100 ppm for terrestrials. ## By the numbers [#by-the-numbers] | Metric | Value | | ----------------------------- | ------------------------------------- | | Wavelength coverage | 0.6–5.3 um (NIRSpec + NIRISS) | | Molecules with band overlays | 7 (H2O, CO2, CO, CH4, SO2, NH3, Na/K) | | Uncertainty bands | 1-sigma and 2-sigma | | Spectral binning range | 5–100 points | | Export formats | CSV, JSON, PNG | | Canvas render target | 60 fps on mobile | | Accessibility standard | WCAG 2.1 AA | | Text / UI contrast | 4.5:1 / 3:1 | | Zoom without loss of function | 200% | | Frontend hosting | Vercel | | Backend hosting | Render (free tier) | ## Architecture [#architecture] ``` +-------------------------------------------------------------+ | Next.js 16 / React 19 | | (Vercel) | | Target Selector | Spectrum Canvas | Spectrogram / LC | +------------------------------+------------------------------+ | HTTPS (JSON) v +-------------------------------------------------------------+ | FastAPI (Python 3.11) | | (Render free tier) | | /api/mast/targets | /api/mast/demo-data | /api/mast/... | +------------------------------+------------------------------+ | v +-------------------------------------------------------------+ | MAST Archive (STScI) + NASA Exoplanet Archive | | JWST NIRSpec / NIRISS transit FITS via astropy | +-------------------------------------------------------------+ ``` The frontend also ships Next.js API routes (`apps/web/src/app/api/*`) as a resilience layer so the app stays interactive when the free-tier Render backend cold-starts. ## Key features [#key-features] * **Transmission spectra with uncertainty bands** — Transit depth in ppm vs. wavelength, rendered to HTML5 Canvas with 1-sigma and 2-sigma shaded regions. No chart library; custom renderer targets 60 fps on mobile. * **Molecular band overlays** — H2O (1.4, 1.9, 2.7 um), CO2 (4.3, 15.0), CO (2.3, 4.6), CH4 (2.3, 3.3, 7.7), SO2 (4.0, 7.3, 8.7), NH3 (1.5, 2.0, 10.5), Na/K (0.59, 0.77). Per-molecule toggles let users reason about composition visually. * **Spectrogram heatmap + light curves** — 2D heatmap across wavelength and orbital phase; transit light curves at user-selected wavelengths. * **Live MAST queries** — Pulls JWST NIRSpec / NIRISS transit FITS through `astroquery` against the Mikulski Archive for Space Telescopes. Demo mode falls back to physically-motivated simulated spectra grounded in published JWST observations. * **Exoplanet parameter lookups** — NASA Exoplanet Archive integration returns planet / host-star parameters for each target. * **Spectral binning controls** — 5 to 100 points, user-adjustable. * **CSV / JSON / PNG export** — Publication-ready output of the active spectrum and view. * **Colorblind-safe palette** — Okabe-Ito by default across all charts. * **Resilience layer** — Next.js API routes shadow the Python backend so the frontend remains interactive during Render free-tier cold starts. ## Accessibility [#accessibility] * **WCAG 2.1 AA** — 4.5:1 text contrast, 3:1 UI contrast, 200% zoom without loss of function. * **Screen-reader data tables** — Every canvas chart has an `aria-label` description plus a hidden table of the underlying data points. * **Keyboard navigation** — Focus indicators on every control, skip links, data points reachable via keyboard. ## API reference [#api-reference] Base URL: `https://astrospecvis.onrender.com`. | Method | Path | Purpose | | ------ | ------------------------------------------ | ---------------------------------- | | GET | `/` | Health + metadata | | GET | `/health` | Render health check | | GET | `/api/mast/targets` | Curated JWST exoplanet target list | | GET | `/api/mast/demo-data/{target}?bin_size=20` | Simulated transit spectrum | | GET | `/api/mast/real-data/{target}` | Live JWST data from MAST | | GET | `/api/mast/exoplanet/{target}` | NASA Exoplanet Archive parameters | | GET | `/api/mast/molecular-bands` | Molecular absorption band catalog | ## Stack [#stack] | Layer | Technology | | ------------------ | -------------------------------------------- | | Frontend framework | Next.js 16 (App Router), React 19 | | Language (web) | TypeScript 5 | | Styling | Tailwind CSS 4 | | Animation | Framer Motion 12 | | Charts | HTML5 Canvas (custom renderer) | | 3D | three.js, `@react-three/fiber`, drei | | Icons | `lucide-react` | | Backend framework | FastAPI | | Language (api) | Python 3.11 | | Astronomy | astropy >=6.0, astroquery >=0.4.7 | | Numerics | numpy, scipy | | ASGI server | uvicorn + uvloop + httptools | | Data sources | MAST Archive (STScI), NASA Exoplanet Archive | | Hosting | Vercel (web), Render free tier (api) | ## Links [#links] * **Live:** [https://glimpse-jwst.vercel.app](https://glimpse-jwst.vercel.app) * **API:** [https://astrospecvis.onrender.com](https://astrospecvis.onrender.com) * **Source:** [github.com/FardinIqbal/GLIMPSE](https://github.com/FardinIqbal/GLIMPSE)