Epicyclic Gearing

100%

Epicyclic Gearing

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Nov 10, 2011

This example visualizes an epicyclic gearing system, showing the relative rotation of a sun gear, three planet gears, and an outer annulus. A menu in the top-left fixes any of the three gear types as the frame of reference, altering the apparent motion of the others. The gears are drawn using SVG paths generated by a custom `gear` function, which defines tooth shapes and central holes. The animation continuously updates each gear's rotation via `d3.timer` and applies a transform to the frame group to compute the relative motion based on gear radius.

AI-generated description

From Wikipedia:

Epicyclic gearing or planetary gearing is a gear system consisting of one or more outer gears, or planet gears, revolving about a central, or sun gear. … Epicyclic gearing systems also incorporate the use of an outer ring gear or annulus, which meshes with the planet gears.

Use the menu in the top-left to change the frame of reference, fixing the specified gear in-place.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Epicyclic Gearing

This example visualizes an epicyclic gear system, showing how a sun gear, three planet gears, and an outer annulus mesh and rotate together. A radio-button menu in the top-left switches the frame of reference, fixing either the annulus, planets, or sun in place while the other gears orbit accordingly. The animation runs via `d3.timer`, rotating each gear group based on its radius and tooth count, while `frame.attr("transform", ...)` applies the rotation offset for the selected reference. The code uses D3 v4 with SVG rendering, building each gear’s toothed path from trigonometric calculations and applying `fill-rule: evenodd` to create the cut-out centers.

IIgathi

95% match

Loading thumbnail…

Epicyclic Gearing (with svgsaver)

The visualization depicts a working model of an epicyclic gear system, with sun, planet, and annulus gears rendered as rotating SVG paths. It uses D3.js to animate the gears and update the frame of reference based on user selection via radio buttons. Clicking the graphic triggers the SvgSaver library to serialize the current SVG state into a downloadable file, demonstrating an interactive animation with export functionality.

HHypercubed

85% match

Loading thumbnail…

linked-gears

This example shows a system of linked gears rotating in continuous animation, rendered with D3.js as SVG. Each gear is composed of layered shapes—sun, planet, center, moon, and star—each with its own fill color, suggesting a stylized solar system or mechanical model. The visualization demonstrates hierarchical, orbiting motion: the center drives the planets, which in turn carry moons, all constrained by a ratio that makes the gears mesh. User interaction is limited to the form element, which is empty in this case.

11wheel

83% match

Loading thumbnail…

Accelerate, Then Coast III

Two large gray and brown gears rotate in interlocking motion, comparing three easing functions via radio buttons: accelerate-then-coast, cubic-in-out, and linear. The animation uses D3 v3’s `d3.transition` and `attrTween` to tween the gear rotation, with custom easing functions `easeAccelerateThenCoast` and `easeReflect` controlling the speed profile. SVG paths drawn by `pathGear` define the gear teeth, while the form switches modes to highlight how each easing affects maximum angular speed and smooth acceleration.

Mmbostock

76% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

Two gears made of interlocking cogs rotate continuously in opposite directions, driven by a small JavaScript animation embedded in the SVG. The code uses `animateTransform` with a `rotate` type to spin each gear group around its computed center, with speeds of 16 and 10 seconds per revolution. The gears are drawn as path elements with a brown fill and stroke, scaled and translated into place. The example demonstrates fundamental SVG manipulation and animation without external libraries.

Aape-ape-ape

73% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

65% match

Loading thumbnail…

Motion

The visualization shows two sets of black circles arranged in a diagonal pattern, with one circle from each set rotating around a fixed point to create a sense of continuous motion. The animation is driven by `d3.timer`, which repeatedly updates the `transform` attribute of the circles using an SVG `rotate` transformation. The rotation angle is calculated from the elapsed time since page load, with one set rotating around the first circle’s position and the other around the fifth circle’s position. Built with D3 v4 and rendered as SVG, the code uses hardcoded coordinates for the circles and relies on CSS classes to select and animate them, creating a simple kinetic composition without any external data source.

CCJKraenzle

64% match

Loading thumbnail…

Fork of Fork of D3 Selection Exploration

This example demonstrates a generative animation of circles that smoothly undulate across the screen, with each circle's position and radius oscillating over time. Built using the D3.js library, the visualization runs a continuous loop at 60 frames per second, recomputing the dataset based on a sine wave that controls both the number of circles and their lateral and vertical movement. The rendering relies on D3's selection and join API to update `<circle>` SVG elements, while the data is generated by a custom `makeData` function.

MMichael Bergerson

64% match