3I/ATLAS: Building a Real-Time Interstellar Object Tracker with AI

3I/ATLAS

A Visitor from Beyond

On July 1, 2025, humanity detected something extraordinary: 3I/ATLAS, the third confirmed interstellar object to pass through our Solar System. This is not just another interstellar oobject, it is a real cosmic traveler from the depths of space of our galaxy.

When we heard about this discovery, we knew we had to build something special: a real-time analytics dashboard that would make astronomical data accessible to everyone, from professional astronomers to curious students around the world.

What started as a weekend prototype evolved into a comprehensive web platform featuring interactive visualizations, real-time tracking, and support for four languages (English, Spanish, Chinese Mandarin, and Russian). The interesting part is that most of the development was done using Claude Code, Anthropic’s AI-powered development assistant.

The Technology Stack: Modern Web Meets Space Science

Before diving into the story, here is what powers the site:

┌─────────────────────────────────────────────────────────────┐
│                     USER INTERFACE LAYER                    │
│  HTML5 • CSS3 (16 Modular Files) • JavaScript (13 Modules)  │
└────────────────────────┬────────────────────────────────────┘
                         │
        ┌────────────────┼────────────────┐
        │                │                │
        ▼                ▼                ▼
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  Highcharts  │  │    D3.js     │  │  Custom JS   │
│  (Charts &   │  │  (2D Solar   │  │  (Real-time  │
│   Gauges)    │  │   System)    │  │ Calculations)│
└──────┬───────┘  └──────┬───────┘  └──────┬───────┘
       │                 │                 │
       └─────────────────┼─────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                      DATA LAYER                             │
│  ┌─────────────┐  ┌──────────────┐  ┌─────────────────┐     │
│  │ JPL Horizons│  │  Translations│  │  localStorage   │     │
│  │    API      │  │  (255+ keys) │  │  (User Prefs)   │     │
│  │ (NASA Data) │  │  (4 langs)   │  │  (Theme/Units)  │     │
│  └─────────────┘  └──────────────┘  └─────────────────┘     │
└─────────────────────────────────────────────────────────────┘

Core Technologies:

Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
Visualization: Highcharts (charts/gauges), D3.js v7 (solar system)
Data Source: NASA JPL Horizons System
Development: Claude Code (AI-assisted)
Deployment: GitHub Pages

Part 1: The Prototype

Every ambitious project starts with a basic prototype. Ours was simple:

Basic HTML page with static information about 3I/ATLAS
A few Highcharts showing distance and trajectory
Dark theme (because astronomy websites must be dark)
Hardcoded data points copied from JPL Horizons

The prototype worked, but it was static, limited, and very much English-only. We knew we could do better…

Part 2: Enter Claude Code

This is where things get interesting. Instead of manually coding every feature, we partnered with Claude Code to accelerate development. Here is how the collaboration worked:

What Claude Code Did:

Generated modular JavaScript architecture (13 focused modules)
Implemented complex orbital mechanics calculations
Created responsive CSS layouts (16 modular stylesheets)
Built internationalization system with URL-based routing
Wrote Schema.org structured data for SEO
Refactored 2,584 lines of monolithic code into maintainable modules

What Humans Did:

Strategic decisions (which features to prioritize)
Design aesthetic and user experience
Content creation and educational descriptions
Quality control and cross-browser testing
Data validation against NASA references
Performance optimization decisions
Minor code updates

The Rapid Iteration Experiment:

This project served as an experiment in AI-assisted development workflows. The traditional development cycle of prototype → test → refine → deploy typically takes weeks or months. With Claude Code, we compressed this into days:

Quick Prototyping: Generate initial features in minutes, not hours
Immediate Testing: Deploy, break things, learn what works
Rapid Iteration: Refactor, optimize, and add features based on real feedback
Continuous Deployment: Push updates multiple times per day

This rapid iteration cycle allowed us to experiment with features we might never have attempted in a traditional waterfall approach. For example, implementing hyperbolic orbit calculations or building a complete internationalization system would normally require extensive planning. Instead, we could prototype, test with real users, gather analytics data, and iterate. This was accomplished within the same week.

The Analytics Dashboard: Highcharts + Physics

One of the most challenging aspects was creating scientifically accurate visualizations. It is not just showing pretty graphs, every data point is calculated using real orbital mechanics.

Velocity Evolution Chart:

// Vis-viva equation: v = sqrt(GM × (2/r + 1/|a|))
const GM = 1.32712440018e20; // Sun's gravitational parameter
const a = -0.264 * AU_TO_METERS; // Semi-major axis (negative for hyperbolic)
const velocity = Math.sqrt(GM * (2/r - 1/a));

Solar Radiation Intensity:

// Inverse square law: F = L_sun / (4π × r²)
const L_sun = 3.828e26; // watts
const intensity = L_sun / (4 * Math.PI * r * r);

Why Highcharts?

We evaluated several charting libraries and chose Highcharts because:

Precision: Supports scientific notation and high decimal precision
Interactivity: Built-in zoom, pan, crosshairs, and responsive tooltips
Performance: Smoothly renders thousands of data points
Accessibility: Keyboard navigation and screen reader support
Gauge Charts: Perfect for real-time metrics (distance, velocity, magnitude)

The result: 17 interactive visualizations that would take months to build from scratch, ready in days.

The Solar System Visualization: D3.js Magic

The crown jewel of the project is the interactive 2D solar system visualization. This required solving some serious computational geometry:

┌────────────────────────────────────────────────────────┐
│         ORBITAL MECHANICS PIPELINE                     │
└────────────────────────────────────────────────────────┘

    JPL Orbital Elements
         │
         ├─ Eccentricity (e): 6.137 (hyperbolic!)
         ├─ Perihelion (q): 1.356 AU
         ├─ Inclination (i): 175.11° (retrograde)
         ├─ Argument of Periapsis (ω): 128.01°
         └─ Longitude of Ascending Node (Ω): 322.15°
         │
         ▼
    Kepler's Equation (Hyperbolic)
         │  M = e×sinh(H) - H
         │  (Newton-Raphson iteration: 10 passes)
         ▼
    True Anomaly (ν)
         │  tan(ν/2) = √((e+1)/(e-1)) × tanh(H/2)
         ▼
    3D Cartesian Coordinates
         │  x, y, z in heliocentric frame
         ▼
    Rotation Transformations
         │  1) Rotate by ω (perihelion)
         │  2) Rotate by i (inclination)
         │  3) Rotate by Ω (ascending node)
         ▼
    2D Projection (Ecliptic Plane)
         │  Project 3D → 2D for visualization
         ▼
    D3.js SVG Rendering
         │  Smooth animations @ 50ms intervals
         ▼
    Interactive Visualization
         └─ Play/Pause, Speed Control, Date Slider

Key Challenge: Hyperbolic orbits are tricky. Unlike elliptical orbits (planets, typical comets), hyperbolic orbits use hyperbolic sine and tangent functions. We had to implement a Newton-Raphson solver to find the eccentric anomaly:

function solveHyperbolicKeplersEquation(M, e) {
  let H = M; // Initial guess
  for (let i = 0; i < 10; i++) {
    const f = e * Math.sinh(H) - H - M;
    const df = e * Math.cosh(H) - 1;
    H = H - f / df; // Newton-Raphson step
  }
  return H;
}

The result: a simple animation showing 3I/ATLAS’s trajectory from July 2025 through June 2026, with verified close approaches to Mars (0.223 AU) and Jupiter (0.265 AU).

Part 3: The Analytics Surprise

After launching the English version, we integrated Umami analytics (privacy-friendly, GDPR-compliant) and discovered something shocking:

Traffic Distribution (September 2025):

China: 40% of traffic
Russia: 35% of traffic
USA: 14% of traffic
Other: 11% of traffic

Search Engine Sources:

Yandex (Russia): 51%
Bing: 38%
DuckDuckGo: 19%
Google: 12%
Baidu (China): Significant but hard to track

This was a wake-up call. 91% of our traffic came from non-English speaking regions, yet we only had an English site. It was time to internationalize.

Part 4: Data-Driven Translations

Most websites translate to Spanish, German, and French because those are “the usual suspects.” We took a different approach: translate to the languages our users actually speak.

Based on analytics:

Chinese (Simplified): 40% of traffic → Top priority
Russian: 35% of traffic → Second priority
Spanish: Global language → Third priority

We implemented full internationalization with 255+ translation keys per language:

// Translation system architecture
const translations = {
  en: {
    'mission.title': 'MISSION CONTROL DASHBOARD',
    'chart.velocity.title': 'Velocity Evolution',
    'countdown.perihelion': 'Closest to Sun'
    // ... 252 more keys
  },
  zh: {
    'mission.title': '任务控制仪表板',
    'chart.velocity.title': '速度演变',
    'countdown.perihelion': '最接近太阳'
    // ... 252 more keys (all translated)
  },
  ru: {
    'mission.title': 'ПАНЕЛЬ УПРАВЛЕНИЯ МИССИЕЙ',
    'chart.velocity.title': 'Эволюция скорости',
    'countdown.perihelion': 'Ближайшее прохождение Солнца'
    // ... 252 more keys
  }
}

Everything was translated:

All chart titles, axes, and tooltips
Mission Control dashboard
Scientific data panels (6 modules)
Gallery descriptions and metadata
Navigation and UI elements
Temperature labels (°C for Russia, °F option for US)
Date formatting (3 октября 2025, 10月26日 2025, Oct 26, 2025)

URL Structure for SEO:

English: /
Spanish: /es/
Chinese: zh/
Russian: /ru/

Each URL is properly indexed with hreflang tags, ensuring international users find the right version in search results.

Part 5: The China Accessibility Challenge

Here is a problem most Western developers never think about: What if critical CDNs are blocked in your largest market?

China’s Great Firewall blocks:

Google Fonts
Many CDN providers
Some JavaScript libraries

For Chinese users, our site was either broken or incredibly slow (30+ second timeouts). The solution:

Self-Host Everything Critical:

Before (External Dependencies):
- Google Fonts CDN (blocked in China) → 30s timeout
- Highcharts CDN (sometimes rate-limited) → Unreliable
- D3.js CDN → Blocked sporadically
Total load time in China: 35-45 seconds ❌

After (Self-Hosted):
- Space Grotesk fonts (local) → Instant
- Highcharts (local) → Instant
- D3.js (local) → Instant
Total load time in China: ~1.2 seconds ✅

We self-hosted:

5 font weights of Space Grotesk (340KB)
Highcharts library (272KB)
D3.js v7 (273KB)
Font Awesome icons (940KB)

Total: 1.8MB, but cached after first visit. The tradeoff was worth it: 2-5x faster loading for 40% of our users.

Part 6: Optimizing for AI Search Engines

By late 2025, ChatGPT, Claude, and Perplexity were becoming primary research tools. We needed to optimize for AI-powered search.

Traditional SEO vs AI SEO:

Traditional SEO	AI SEO
robots.txt	robots.txt (GPTBot, Claude-Web)
sitemap.xml	sitemap.xml + structured data
Meta keywords	Schema.org markup
Backlinks	Citation & attribution schema
Page titles	Speakable content markup
Alt text	Dataset & scholarly article schema

AI-Specific Optimizations We Implemented:

1) Breadcrumb Schema: Helps AI understand site structure

{
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "URL" },
    { "@type": "ListItem", "position": 2, "name": "Analytics", "item": "URL" },
    { "@type": "ListItem", "position": 3, "name": "Live Tracking", "item": "URL" }
  ]
}

2) Citation Schema: Tells AI how to credit our data

{
  "@type": "CreativeWork",
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "creditText": "Data sourced from NASA JPL Horizons System, ESA, and Minor Planet Center. Licensed under CC BY 4.0."
}

3) Speakable Content: Optimized for voice AI (ChatGPT voice mode, Alexa, Siri)

<div class="speakable">
  3I/ATLAS is the third confirmed interstellar object
  discovered on July 1, 2025. It will reach perihelion
  at 1.356 AU on October 29, 2025, traveling at 58 km/s.
</div>

4) Dataset Schema: Signals real-time, authoritative data

{
  "@type": "Dataset",
  "name": "3I/ATLAS Real-Time Tracking Data",
  "description": "Live orbital data updated every 5 minutes from NASA JPL Horizons",
  "temporalCoverage": "2025-07-01/..",
  "variableMeasured": [
    { "name": "Heliocentric Distance", "unitText": "AU" },
    { "name": "Velocity", "unitText": "km/s" },
    { "name": "Visual Magnitude", "unitText": "mag" }
  ]
}

Expected Impact: +50-200% traffic from AI search engines, better AI-generated responses about 3I/ATLAS.

The Architecture: From Monolith to Modules

Early in development, we had two giant files:

script.js: 2,584 lines
styles.css: 2,329 lines

Debugging was a nightmare. Making changes risked breaking everything. We needed modularization.

JavaScript Refactoring:

Before:                    After:
script.js (2,584 lines)    js/
                          ├── core/
                          │   ├── translations.js
                          │   ├── theme.js
                          │   └── navigation.js
                          ├── components/
                          │   ├── charts.js
                          │   ├── solar-system.js
                          │   ├── countdowns.js
                          │   └── realtime-data.js
                          ├── utils/
                          │   ├── orbital-calculations.js
                          │   ├── date-formatter.js
                          │   ├── error-handler.js
                          │   └── lazy-load-charts.js
                          └── app.js (entry point)

CSS Refactoring:

Before:                    After:
styles.css (2,329 lines)   css/
                          ├── base/
                          │   ├── variables.css
                          │   ├── reset.css
                          │   └── typography.css
                          ├── layout/
                          │   ├── header.css
                          │   ├── navigation.css
                          │   └── footer.css
                          ├── components/
                          │   ├── charts.css
                          │   ├── cards.css
                          │   ├── mission-control.css
                          │   └── solar-system.css
                          └── utilities/
                              ├── responsive.css
                              └── print.css

Result: 29 focused modules (13 JS + 16 CSS), average 200-300 lines each. Much easier to maintain, test, and extend.

Claude Code helped tremendously here, refactoring thousands of lines while maintaining zero visual changes.

Performance Optimization: Making it Fast

A beautiful site is useless if it is slow… We implemented aggressive optimizations:

Lazy Loading Charts (Intersection Observer):

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      initChart(entry.target.id); // Only load when visible
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '50px' }); // Load 50px before visible

Result: 50% reduction in initial page load time (from ~2s to ~1s).

Service Worker for Offline Support:

// Cache-first strategy for static assets
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Result: Instant repeat visits, works offline.

Critical CSS Extraction:

<!-- Inline critical CSS (~2KB) for instant render -->
<style>
  :root { --primary-color: #0a0a0a; }
  .hero { display: flex; }
  /* ... essential above-fold styles ... */
</style>

<!-- Defer non-critical CSS -->
<link rel="stylesheet" href="/css/main.css" media="print"
      onload="this.media='all'">

Final Performance Metrics:

First Contentful Paint: ~0.8s
Time to Interactive: ~1.2s
Lighthouse Score: 95 (Performance, Accessibility, Best Practices, SEO)
Bundle Size: 100KB (minified CSS/JS)

Key Features Worth Highlighting

Mission Control Dashboard: NASA-inspired real-time tracking

Real-time distance from Sun, Earth, Mars, Jupiter
Journey progress bar through solar system
Next milestone countdown (orange highlight)
Live data indicators (pulsing green dots)
Updates every second for smooth animations

Scientific Data Panels: 6 comprehensive modules for researchers

Orbital Metrics: Heliocentric distance (6-decimal precision), velocity, orbital elements
Observability: Magnitude, solar elongation, rise/set times, constellation
Physical Properties: Temperature, gas production rates, coma diameter
Observation Quality: Position uncertainty, data arc, signal-to-noise ratio
Environmental Context: Solar wind, zodiacal light, planetary distances
Mission Planning: Next milestone, observation windows, equipment recommendations

All panels export JSON/CSV for data scientists.

Interactive Solar System (D3.js): Watch the interstellar object’s journey

Play/Pause animation with 1x/5x/10x speed
Date slider (July 2025 - June 2026)
Real-time position and distance displays
Accurate planetary positions from JPL Horizons
Verified close approaches (Mars: 0.223 AU, Jupiter: 0.265 AU)

Challenges We Solved

Challenge 1: Hyperbolic Orbit Math

Problem: Most orbit calculators assume elliptical orbits
Solution: Implemented hyperbolic Kepler equation solver with Newton-Raphson
Verification: Positions accurate to within 0.01 AU vs JPL data

Challenge 2: Real-Time Updates

Problem: Cannot hit JPL API every second (rate limits)
Solution: Calculate positions client-side using cached orbital elements
Result: Smooth 1-second updates with zero API calls

Challenge 3: Multi-Language Chart Localization

Problem: Highcharts does not auto-translate tooltips/axes
Solution: Dynamic language configuration with month name arrays
Example: “days until perihelion” → “距近日点天数” (Chinese)

Challenge 4: Mobile Responsiveness

Problem: Complex charts and controls do not fit small screens
Solution: Hamburger menu, collapsible panels, reduced chart heights
Result: Fully functional on 320px phone screens

What We Learned

1) AI-Assisted Development Enables Rapid Experimentation

Claude Code accelerated development by an estimated 3-5x
The prototype → test → iterate cycle went from weeks to days
Perfect for exploring ideas that would be too risky in traditional development
Best for boilerplate, refactoring, and implementing known patterns
Still requires human judgment for architecture and strategy
Ideal for projects where speed to market and learning trumps perfection

2) Analytics Should Drive Decisions, Not Assumptions

We would have translated to French/German (wrong)
Data showed us Chinese/Russian were critical (right)
91% of traffic validated our translation strategy

3) Self-Hosting Matters for Global Reach

CDN dependencies can break for entire countries
Self-hosting adds size but guarantees reliability
For 40% China traffic, the tradeoff was obvious

4) SEO is Multi-Dimensional in 2025

Traditional search engines (Google) still matter, but…
Regional engines (Yandex, Baidu, Naver) dominate their markets
AI search engines (ChatGPT, Claude, Perplexity) are rising fast
Each requires different optimization strategies

5) Modular Architecture Pays Long-Term Dividends

2,500-line files are technical debt
200-line focused modules are maintainable
Refactoring hurts short-term, helps long-term

Acknowledgments

Building the site would have not been possible without:

NASA JPL Horizons System: For comprehensive, authoritative orbital data
ESA: For Mars orbiter observations and stunning imagery
ATLAS Telescope Team: For discovering this rare interstellar visitor
Highcharts: For excellent, scientific-grade visualization library
D3.js: For powerful, flexible data visualization
Anthropic: For Claude Code, our AI development partner
Open Source Community: For the tools and libraries that power the modern web

Conclusion

We started with a prototype to track an interstellar object. Today, we have a comprehensive platform serving thousands of visitors across many countries, available in 4 languages, optimized for both traditional and AI search engines.

This is an ongoing project. As 3I/ATLAS continues its journey through our solar system and beyond, we are continuously adding new features, improving performance, and expanding our scientific data panels. The interstellar object will not reach its farthest observable point until mid-2026, giving us plenty of time to enhance the platform and serve the global community of astronomy enthusiasts.

And it all happened because we asked: What if we could make space science accessible to everyone?