Binary Star System

100%

Binary Star System

✓ Published0🌍 Public

Last edited Feb 9, 2018

Created on Feb 9, 2018

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`.

AI-generated description

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

By default the layout represents a binary system. All the stars (red nodes) have the same mass and their attraction influence on the satellite (blue node) is proportional to the inverse-square of the distance. The stars are statically positioned and remain unaffected by either the satellite or other stars. Stars can be added and removed by double-clicking on canvas/nodes. All nodes can also be repositioned by dragging.

The initial velocity (and direction) of the satellite can be changed using the controls on the top-right. The length of the pre-estimated trajectory can be manipulated by changing the number of samples (represented as dots).

Similar vizzes

Loading thumbnail…

Orbital Trajectory

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.

TThanaporn-sk

79% 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

70% match

Loading thumbnail…

Fork of Solar System

This example visualizes a solar system as a network of connected nodes, with planets orbiting a central star and lines tracing their paths. It uses `d3.forceSimulation` to position the bodies and `d3.geoPath`-like rendering for orbital trajectories. The animation is driven by `requestAnimationFrame` while each planet’s velocity and acceleration update per frame, producing a dynamic, physics-inspired model. The fork specifically alters the original force parameters, changing the balance of attraction and repulsion to create divergent orbital patterns. All rendering is done through SVG elements, with the code drawing from the v3 branch of the original project.

Aanilthapa1.at23@gmail.com

69% 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

68% match

Loading thumbnail…

AI Test with Stars

This visualization presents a starfield of green stars connected by lines, forming a dynamic constellation. The stars gently drift and collide under a force-directed simulation, creating an organic, evolving network. Using D3.js, the code employs `d3.forceSimulation` for physics-based movement, `d3.drag` for interactive manipulation, and `d3.zoom` for pan and zoom controls. Stars are drawn as SVG paths, with lines linking those within a proximity threshold. The animation loop, driven by `requestAnimationFrame`, continuously updates positions and redraws the scene, allowing users to explore the interconnected star system.

CCurran Kelleher

67% match

Loading thumbnail…

Gist 11c1688ba20a5fd934f0b9b6dc336303

This visualization uses a force-directed simulation to lay out a network of nodes, likely representing celestial objects, with each node’s position computed by D3’s `d3.forceSimulation`. The code generates synthetic star names using a custom `starNameGenerator` function, which produces labels like “PSRJ” followed by two random two-digit numbers, mimicking pulsar catalog designations. The rendering relies on D3’s force layout to compute collision and linkage forces, though no explicit visual encoding (e.g., size or color) is defined beyond node positions. The example demonstrates a generic template for simulating dynamic graphs, with the data source being procedurally generated placeholder names rather than an external dataset.

WWill Carter

66% 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

64% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays six stars—Earth, Mira, Antares, Betelgeuse, Rigel, and Deneb—with their relative sizes scaled proportionally while distances are normalized for visibility. Each star is rendered as a circle with a distinct fill color, and labels fade in sequentially above each body. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate circle radii and positions, with data sourced from a Kaggle dataset of star properties. The animation runs on an SVG canvas with a black background, smoothly expanding each circle and fading in its name.

PParth Shroff

64% match