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 linesstyles.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?
ShipReport - Landing Page
ShipReport - Index Page for Logging
ShipReport - Login Page