Solar System Visualization

Functional Overview

This example creates a visualization of a solar system with planets orbiting around a central star. Each planet is a node with its own orbit path, and the system demonstrates animation, hierarchical relationships (moons orbiting planets), and spatial positioning in graph form.

Implementation of Key Features

Orbital Mechanics

const updatePlanetPositions = () => {
    const time = Date.now() * 0.0001;

    planets.forEach(planet => {
        const angle = time / planet.orbitalPeriod;
        const x = sunX + Math.cos(angle) * planet.distance;
        const y = sunY + Math.sin(angle) * planet.distance;

        graphInstance.updateNode(planet.id, { x, y });
    });

    requestAnimationFrame(updatePlanetPositions);
};

Moon Hierarchies

const createMoonSystem = (planetId: string, moons: Moon[]) => {
    const moonNodes = moons.map(moon => ({
        id: `${planetId}-${moon.name}`,
        text: moon.name,
        data: { parentPlanet: planetId, distance: moon.distance }
    }));

    // Position moons relative to planet
    moonNodes.forEach(moon => {
        const planet = graphInstance.getNodeById(moon.data.parentPlanet);
        moon.x = planet.x + moon.data.distance;
        moon.y = planet.y;
    });

    return moonNodes;
};

Creative Use Cases

Astronomy Education: Teach solar system structure.

Orbital Mechanics: Demonstrate gravitational relationships.

Fictional Universes: Create custom star systems for games/stories.

Satellite Tracking: Visualize artificial satellite orbits.

Data Constellations: Arrange data points in cosmic patterns.