Explore Zoomable Orbit

100%

Explore Zoomable Orbit

✓ Published0🌍 Public

Last edited Aug 9, 2021

Created on Aug 9, 2021

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.

AI-generated description

Orbit Layout 4 by Elijah Meeks.

Trying to make it zoomable

MIT Licensed

Similar vizzes

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

93% match

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

88% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

76% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of hierarchical data, where each ring segment represents a category and its size corresponds to a numerical value. Built with D3 v5, it uses the `d3.partition` layout to compute the angular and radial coordinates for the hierarchical structure. The visualization is rendered as SVG, with a click interaction on each arc that triggers a smooth animated zoom via `d3.transition` and `attrTween`. Node labels rotate to align with their segments. The example is an updated version of Mike Bostock's original, ported from Observable, and uses the `flare.csv` and `flare.json` datasets.

DDonald Bagwell

76% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

76% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This example visualizes a hierarchical dataset as a zoomable sunburst chart, where clicking a ring segment zooms in to show that subtree, with a central circle allowing navigation back to the root. The chart uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the radial layout, with smooth animated transitions driven by `transition.attrTween` and `d3.interpolate`. Data is loaded asynchronously from the `@observablehq/flare` package via the Observable stdlib.

KKinjal-Goyani

75% match

Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent

75% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays a hierarchical dataset as nested circles, where each circle represents a node and its size corresponds to the node's value. Clicking any circle animates a zoom to that node, revealing its children and hiding unrelated elements. The implementation uses d3.layout.pack for the circle layout and d3.interpolateZoom for smooth zoom transitions. The data comes from the flare.json file, which contains a tree structure with named categories and numeric sizes. The visualization renders with SVG circles and labels, with a color scale applied by tree depth.

AAndresAnayaIsaza

75% match