Skip to main content
SimilarExport ZIP
100%

ForceMagnetic based Hierarchical Orbits

✓ Published0🌍 Public
MMbrownshoes
Last edited Mar 14, 2018
Created on Mar 14, 2018

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.

AI-generated description

Simulation of multiple particles orbitting around each other in a hierarchical system (e.g. sun > planet > moon).

Uses D3's force plugin forceMagnetic to connect particles to their moving gravitational centers via magnetic/electrostatic links. These magnetic attraction forces simulate the mechanics of gravity. Each link holds its own gravitational constant to exaggerate the amplitude and velocity of the orbits relative to each other, which would be otherwise impossible in a system with a single constant.

Compare with the forceLink version.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/5086628299fa6c1bae0094f93d112634'>ForceMagnetic based Hierarchical Orbits</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Solar System

This example visualizes the orbital hierarchy of the solar system using animated circles positioned along a horizontal axis, ordered by planetary distance from the Sun. Each planet and the Sun appear as scaled circles with distinct colors, while text labels fade in sequentially beneath each body. The implementation uses D3.js v7 selections with `transition` and `easeLinear` to grow entering circles from radius zero, shift existing positions with fast transitions, and fade out exiting elements. Data is hardcoded in the script, with coordinates derived from astronomical distances and radii scaled to the container dimensions.

Hhunsingeruk@gmail.com
74% 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
74% match
Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets scaled by relative size, while orbital distances are not to scale. Each celestial body appears as a colored circle, with a label beneath it, revealing its name. The animation sequentially grows the Sun and planets into view. The code uses D3’s `select` and `transition` APIs for rendering and animation, with data sourced from Wikipedia’s list of gravitationally rounded objects. The view is built using SVG circles and text elements, styled over a black background.

MMing Li
72% match
Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the Sun and planets in the solar system, using circles positioned along a horizontal line, with distances not to scale. Each celestial body appears sequentially, expanding from a radius of zero to its proportional size, with labels fading in beneath. The code uses D3.js transitions with `transition.attr` to animate the circle radii and text opacity, driven by data from Wikipedia’s list of gravitationally rounded objects. SVG circles and text elements are bound to the dataset, with a black background and distinct fills for each planet.

Oownerofthesoul0000@gmail.com
70% match
Loading thumbnail…

Solar System Orbits (Fork of Fork of HTML Starter)

This interactive HTML visualization presents the solar system with animated planet orbits around a central sun. Users click a planet to reveal two additional data views: a line chart showing distance from the sun versus average temperature, and a pie chart displaying atmospheric composition percentages for that planet. The orbit diagram uses SVG paths with animated motion along circular trajectories, while the charts are generated programmatically. The line charts employ D3's scaleLinear for axes and a monotone curve line, while the pie charts use the d3.pie layout algorithm with d3.arc for rendering sectors.

JJonas
70% match
Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets positioned across the screen, scaled proportionally to their actual radii while distances are compressed for clarity. Each celestial body and its label fades in sequentially from the sun outward, using D3’s `transition` and `easeLinear` for smooth motion. The code leverages D3’s data join to bind planetary data from Wikipedia, rendering circles and text elements with `selectAll` and custom transition delays. A black SVG background and distinct fill colors for each planet emphasize the size hierarchy, from Mercury to the sun.

Wwkj0713@gmail.com
70% match
Loading thumbnail…

Multi-Foci Force Layout

A stream of circles enters the scene at regular intervals, each assigned one of three focal points. The circles gravitate toward their assigned focus, creating three distinct clusters that shift as new nodes are added and older ones settle. Using D3 v3’s `d3.layout.force`, the example overrides the default tick handler to manually steer each node toward its focus, with the simulation’s alpha value controlling the easing. The SVG circles are colored via a categorical scale based on their focal point ID, and the animation runs indefinitely via `setInterval`.

Mmbostock
69% match
Loading thumbnail…

Zoomable Orbit

This example shows a hierarchical dataset from flare.json rendered as a zoomable, animated orbital layout. Nodes orbit their parent ring, with continuous motion driven by a custom `d3.layout.orbit` function that updates node positions on each tick. The SVG visualization supports zooming via `d3.zoom`, while mouseover and click interactions highlight rings and display details in a side panel. The code uses D3's `d3.layout.pie` to position children and `d3.scale` functions to determine node radii and ring spacing.

Iilincaion
69% match