Zoomable Orbit

100%

Zoomable Orbit

✓ Published2🌍 Public

Last edited Dec 17, 2020

Created on Dec 11, 2020

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.

AI-generated description

Orbit Layout 4 by Elijah Meeks.

Trying to make it zoomable

MIT Licensed

Similar vizzes

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

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

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

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

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

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical Flare dataset, where each ring segment represents a node and its angular width encodes the node's value. Clicking a segment zooms into that subtree, smoothly animating the layout using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with `transition.attrTween` for interpolated arc paths. Labels and fill opacity update dynamically, while a central circle returns the view to the root. The visualization is rendered as SVG and uses `d3.scaleOrdinal` with an interpolated rainbow palette.

VVishnu Ch

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a node and its size corresponds to a value. Users can click on any segment to zoom in, revealing its children and re-centering the view, or click the central circle to zoom back out. Built with D3 v5, the visualization uses SVG for rendering and employs animated transitions via `transition.attrTween` to smoothly interpolate arc paths and labels as the view changes. The hierarchical data is processed using `d3.hierarchy`, `d3.partition`, and `d3.arc`, with colors assigned via a quantized rainbow interpolator.

LLal Singh Dhaila

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of the flare.json hierarchical dataset, where clicking on a ring segment animates the view to focus on that node. Built with D3 v5, it renders the hierarchy as an SVG using `d3.partition` and `d3.arc` to compute arc geometry. Interactive transitions leverage `transition.attrTween` and `d3.interpolate` to smoothly reshape arcs and labels when navigating. Data is loaded via the Observable `@observablehq/flare` module using a `require()` call.

Ssathishkanna11

79% match