Orbits 3

100%

✓ Published0🌍 Public

Last edited Nov 7, 2017

Created on Nov 7, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Mraleksa/'>Mraleksa</a>'s block: <a href='http://bl.ocks.org/Mraleksa/e29eb5e7dc60404cc82fe6ef9a3345b3'>fresh block</a>

mit Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Orbits 3

Orbits 3 is an animated, scroll-driven visualization of political connections in Ukraine, centered on Petro Poroshenko and featuring named figures like Iryna Lutsenko and Ihor Kononenko. The hierarchy is presented as a dynamic orbital layout, where nodes orbit their parent in concentric rings, with portraits of individuals loaded from static.rada.gov.ua URLs. The D3.js layout, defined in d3.layout.orbit.js, uses a custom tick function to update node positions, while graph-scroll.js handles scroll-based transitions between sections. The SVG rendering is powered by d3.layout.pie for angular distribution and setInterval for animation.

MMraleksa

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

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

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

68% match

Loading thumbnail…

Graph

This graph visualization maps the relationships between actors, directors, and films using a force-directed layout. It displays movies as one node type and the people involved as another, with arrows indicating the specific role each person played in a production, such as acting or directing. The visualization uses the D3.js library with the `d3.forceSimulation` and `d3.forceLink` APIs to simulate physical forces that position the nodes, while a custom drag interaction lets users rearrange the network. Data comes from the provided `data.json` file, which contains nodes for people and films along with links specifying their relationships.

VVictor Lorena

67% match

Loading thumbnail…

Network Graph

A force-directed network graph displays seven nodes representing movie-related concepts, such as Movie, Story, and Director, connected by weighted links that indicate relationships. The SVG visualization uses the D3.js `layout.force()` API for physics-based positioning, allowing nodes to be dragged and repositioned. Data loads from a local `graphFile.json` file, with link thickness proportional to each connection's weight, and node styling applied via CSS classes.

Vvarun-030

67% match

Loading thumbnail…

Actor Graph

This interactive visualization displays a force-directed graph of actors and the movies they appear in, where each actor is represented as a node and connections between actors who share a film are shown as links. The graph is built using D3.js v7, with the `d3.forceSimulation` API handling node positioning and link physics. Data comes from a CSV file listing movies and their cast, parsed using `d3.csvParse`, and rendered as SVG elements (circles, text labels, and lines). The visualization explores collaborative networks among actors across the included film dataset.

KKyle?

67% match