Orbit Layout Modes

100%

Orbit Layout Modes

✓ Published0🌍 Public

Last edited Aug 15, 2016

Created on Aug 15, 2016

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.

AI-generated description

An example of d3.layout.orbit that visualizes the D3 API.

When you mouseover a node, it displays its label and centers the orbit layout on that node. It also draws spokes to children and parents where applicable.

forked from <a href='http://bl.ocks.org/tarekrached/'>tarekrached</a>'s block: <a href='http://bl.ocks.org/tarekrached/a7628dd96c62155068dd'>Orbital Layout of D3.js API</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fork of Zoomable Orbit

This interactive D3 data visualization presents a hierarchical dataset from `flare.json` as an animated orbit layout, where nodes representing data categories orbit around their parent nodes in a solar-system-like structure. The fork of the original Orbit Layout example adds zooming capabilities through the d3-zoom library, allowing users to explore the hierarchy at different levels of detail. The visualization uses SVG rendering with custom layout logic from `d3.layout.orbit.js` to position nodes and animate their orbital paths, while the d3.zoom library handles the interactive zooming functionality. The animation continuously updates node positions through a tick interval, and users can hover over nodes to see orbit rings highlighted. Styling is applied through category20b colors, with node sizes determined by depth in the hierarchy.

Aape-ape-ape

80% match

Loading thumbnail…

Explore Zoomable Orbit

The Explore Zoomable Orbit example presents a hierarchical dataset as an animated, multi-ringed orbital layout. Nodes are positioned on concentric rings around a central root, with each depth level corresponding to a smaller ring and slower orbital speed. The visualization is implemented with `d3.layout.orbit`, which continuously updates node positions via `setInterval` and a `tick` dispatch. A custom zoom API from `d3-zoom.v2` is loaded, though the provided code does not explicitly attach zoom behavior to the SVG. The visualization uses `flare.json` data, renders nodes as circles and orbital rings as strokes, and supports mouseover highlighting and click interactions on ring groups.

Ggrampers

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

80% match

Loading thumbnail…

Orbits 3

A scrolling narrative pairs text sections with a fixed orbital node-link diagram built with D3.js. As the user scrolls, the active text section highlights while the graph animates between hierarchical layouts using the `d3.layout.orbit` plugin. The SVG visualization renders categories from a JSON file, colored via `d3.scale.category20b`, and uses the `graph-scroll.js` library to synchronize scrolling with the chart’s state changes.

MMraleksa

78% match

Loading thumbnail…

Orbits 3

The visualization presents a scrolling narrative about notable film director-actor partnerships, with a fixed, orbit-style network diagram displayed alongside. The SVG graph depicts nodes and connections, though the specific data relationships are loaded from a local `flare.json` file. The page uses D3.js (version 3.5.5) to render the SVG, and a custom `d3.layout.orbit.js` script for the graph layout. A `graph-scroll.js` script controls the fixed graph position, highlighting the active text section as the user scrolls.

MMraleksa

73% match

Loading thumbnail…

Orbiting Bodies

A stylized solar system animation built with D3.js renders a glowing central star surrounded by three orbital rings containing planets of varying sizes and colors. Each planet carries multiple moons that orbit independently, while the background features twinkling stars. The animation uses requestAnimationFrame to update positions over time, with planet coordinates calculated using trigonometric functions based on configurable speed and offset parameters.

CCurran Kelleher

72% match

Loading thumbnail…

Fork of Fork of Circles with D3

A collection of colorful, semi-transparent circles of varying sizes are arranged across a pale green canvas, with a large black circle at the center. A green planet orbits this central circle along a dashed gray path, while star-shaped paths are rendered using a custom function that calculates polygon coordinates. The visualization uses D3.js version 7 with its `select` and `join` methods to declaratively build the SVG elements, and employs `requestAnimationFrame` to animate the orbiting planet.

BBismark Kofi Owusu Sarfo

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

71% match