Skip to main content
SimilarExport ZIP
100%

Orbits 3

✓ Published0🌍 Public
MMraleksa
Last edited Nov 7, 2017
Created on Nov 7, 2017

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.

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>

forked from <a href='http://bl.ocks.org/Mraleksa/'>Mraleksa</a>'s block: <a href='http://bl.ocks.org/Mraleksa/d37774aa67877246623c6d20dd194729'>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
75% match
Loading thumbnail…

Альтернативные кандидаты

This interactive visualization compares political speeches by Ukrainian and Russian leaders using a force-directed graph layout. The piece presents a narrator’s textual annotations alongside the named candidates—Petro Poroshenko, Viktor Yanukovych, and Vladimir Putin—with buttons that switch between their associated content. Built with D3 version 3, the visualization employs `d3.forceSimulation` for node positioning, SVG rendering for the graph elements, and a custom tooltip system for additional context. The underlying data is embedded directly in the HTML, comprising excerpts of speeches and annotations that shift based on user selection.

MMraleksa
73% match
Loading thumbnail…

Альтернативные кандидаты

This interactive visualization compares political speeches by Ukrainian and Russian leaders using a force-directed graph layout. The piece presents a narrator’s textual annotations alongside the named candidates—Petro Poroshenko, Viktor Yanukovych, and Vladimir Putin—with buttons that switch between their associated content. Built with D3 version 3, the visualization employs `d3.forceSimulation` for node positioning, SVG rendering for the graph elements, and a custom tooltip system for additional context. The underlying data is embedded directly in the HTML, comprising excerpts of speeches and annotations that shift based on user selection.

MMraleksa
73% 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
72% match
Loading thumbnail…

Альтернативные кандидаты

This visualization presents the 2014 Ukrainian presidential election as a network of alternative candidates, using a force-directed graph layout. The renderer is D3.js v3, with the `d3.forceSimulation` API driving node placement and SVG paths for the links. The interface includes interactive tooltips and fixed annotations. The data appears to be derived from a gist, and the graph styles edges to distinguish between candidate relationships, such as management or shareholder connections.

MMraleksa
67% match
Loading thumbnail…

ATO3

A geographic visualization of territory in Ukraine maps the progress of the "ATO" (Anti-Terrorist Operation). The map displays the location of settlements controlled by separatists, recent liberated cities, and the sites of the latest attacks, with the user able to hover over marked cities or hexagons to reveal names in tooltips. The project uses d3.v3 with a Mercator projection and d3.geo.path to draw the map, while d3.hexbin renders a hexagonal overlay, and d3.select appends SVG elements for rendering.

MMraleksa
66% 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
66% match
Loading thumbnail…

map_ATO3

This map visualizes the territorial situation in eastern Ukraine during the 2014 anti-terrorist operation (ATO), marking cities controlled by separatists, liberated towns, and recent attack locations. It also plots major regional cities and leader lines for reference. The visualization uses D3 v3 with a Mercator projection and `d3.geo.path` to render Ukraine’s oblast boundaries from a TopoJSON file, while custom SVG circles and labels represent place data. Hovering over map elements triggers a tooltip displaying the corresponding city or village name. The map also includes hexbin overlays and contextual annotations in Russian.

MMraleksa
65% match