Orbital Trajectory

100%

Orbital Trajectory

✓ Published0🌍 Public

Last edited Feb 9, 2018

Created on Feb 9, 2018

An interactive simulation of orbital trajectories shows a blue satellite orbiting a central red mass, with its path traced as a dotted trail on a canvas. The velocity slider adjusts the satellite’s initial tangential speed relative to orbital velocity, demonstrating circular, elliptic, or hyperbolic paths based on gravitational physics. The number of trajectory sample points is also user-controllable. The visualization uses `d3.forceSimulation` with `d3.forceMagnetic` to model gravity, rendering the trail via Canvas `fillRect` calls and the satellite as an SVG circle.

AI-generated description

A simulation of orbital trajectories using the d3-force simulation engine with the gravity-like d3-force-magnetic attraction force.

The initial tangential velocity of the blue orbiting body can be set relative to its orbital speed, calculated as √(GM/d). A factor of 1x (default) results in a perfectly circular orbit. Approaching the factor of √2x reaches the body's escape velocity, causing the body to drift away from the central object's gravity pull in an hyperbolic trajectory. Factors below 1 will cause a quicker fall of the blue body towards the attracting center, yielding elliptic orbits with increasing eccentricity.

The length of the pre-estimated trajectory can be manipulated by changing the number of samples (represented as dots).

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/2da88fb89cc75d18b20d8a7776fd6860'>Orbital Trajectory</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Binary Star System

This example visualizes the orbital trajectory of a satellite around a dynamically adjustable binary star system. Two red stars are fixed, while a blue satellite moves under an inverse-square attraction force, with its path traced as a dotted line. Users can add or remove stars by double-clicking, drag any node to reposition it, and adjust the satellite’s initial velocity or trajectory prediction length via a GUI. The simulation uses `d3.forceSimulation` with the `d3-force-magnetic` attraction force, rendering trails on a canvas and interactive elements as SVG, with controls built using `dat.GUI`.

TThanaporn-sk

79% match

Loading thumbnail…

ForceMagnetic based Hierarchical Orbits

Three orbiting bodies—a sun, planet, and moon—trace fading trails as they revolve in a hierarchical system, with the moon completing many more loops around the planet than the planet does around the sun. The animation uses `d3.forceSimulation` with the `d3.forceMagnetic` plugin to model gravity via electrostatic attraction, assigning each link its own gravitational constant to exaggerate relative orbital speeds. The SVG canvas is dynamically sized to the window, with orbit trails rendered as circles that fade and remove over five seconds.

MMbrownshoes

73% match

Loading thumbnail…

Satellite

This visualization shows a rotating globe with a graticule and sphere outline from the perspective of a satellite orbiting Earth. The animation continuously adjusts the camera tilt and rotation, creating a dynamic view of the planet’s surface. It uses the D3.js graphics pipeline with `d3.geo.satellite` for projection, `d3.geo.clipCircle` for visibility clipping, and the Canvas API for rendering. The data source is a graticule and sphere generated on the fly, with real-time animation driven by a timer and elapsed time.

Mmbostock

72% match

Loading thumbnail…

Force-simulated Solar System

This interactive simulation depicts the solar system with bodies rendered true-to-scale, revealing the vast emptiness of space. The visualization uses a force-simulated engine, `d3.forceSimulation`, paired with the gravity-like `d3-force-magnetic` attraction force, to derive orbital trajectories from celestial mass and distance configurations. The code loads body data from a JSON file and renders it on a Canvas element, using `chroma` for colors. A "Size distortion" slider exaggerates body diameters for visibility, while radio buttons lock the view onto a selected body, and scroll-wheel zooming adjusts speed.

TThanaporn-sk

68% match

Loading thumbnail…

Fork of Projectile Motion Simulator

This interactive physics simulator visualizes projectile motion by animating a red circle along a computed parabolic trajectory, with a purple path tracing the full flight. Real-time updates to launch angle, velocity, height, and gravity recalculate the trajectory using the underlying physics formulas. Interactive sliders control simulation parameters, while a play button restarts the animation. The visualization uses D3’s `scaleLinear`, `line`, and `axisBottom`/`axisLeft` components to render axes, ground, and animated elements within an SVG canvas.

NNita

68% match

Loading thumbnail…

Orbit Layout Modes

This interactive visualization uses the d3.layout.orbit library to map the D3.js API in an animated orbital layout. The visualization displays the API’s functions and modules as nodes on concentric rings, with a custom mode array defining the ring structure, and uses size and color scales to encode node depth and child count. Hovering over a node stops the animation, recenters the layout on that node, and draws blue spokes to its children and parent. The code is forked from tarekrached's orbital layout block and relies on D3 v3 with SVG rendering.

TThanaporn-sk

67% match

Loading thumbnail…

Space Stations

Space Stations visualizes orbital data for satellites through an interactive parallel coordinates plot. The D3.js visualization maps each satellite's trajectory across multiple dimensions including inclination, eccentricity, and mean motion, with brushed axes allowing users to filter data ranges. The example parses two-line element (TLE) set data from a text file into structured CSV format, then renders the multidimensional relationships using d3.svg.brush and custom SVG paths with color-coded strokes for each orbital object.

Nnadia-el

66% match

Loading thumbnail…

Dynamical Systems: circule trajectories

This example visualizes circular trajectories for the dynamical system \(\dot{x}=xy,\dot{y}=(1-x^2-y^2)/2\). A click on the phase plane draws the unique circular path determined by the chosen initial condition, with a red center marker and a blue dot tracking the motion. The D3.js code renders an SVG canvas with axes, tick labels, and a set of precomputed trajectory circles in light gray, while user interaction dynamically adds a highlighted trajectory. The implementation uses `d3.select`, `d3.scaleLinear`, and SVG element `append` calls to build the plot, updating the circle’s position and radius via `attr` on mouse events.

YYanghong Huang

66% match