Epicyclic Gearing

100%

Epicyclic Gearing

✓ Published0🌍 Public

Last edited Jul 10, 2018

Created on Jul 10, 2018

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.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1353700'>Epicyclic Gearing</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Epicyclic Gearing

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.

Mmbostock

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

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

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

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

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

67% match

Loading thumbnail…

D3 Selection

This example demonstrates animated data-driven circles rendered as SVG elements whose positions, radii, and count oscillate in response to a continuous time variable. It shows how D3’s selection and join API incrementally updates an existing set of circles, adding or removing them as their number changes. The code uses `d3.select`, `selectAll('circle')`, and the `.join()` method to synchronize the SVG with a dynamic array, while a `setInterval` loop recomputes the dataset from trigonometric functions. Circle properties like `cx`, `cy`, and `r` are bound to each datum for smooth motion.

HHtet Yan Oo

67% match

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates a set of animated circles whose vertical positions and radii oscillate smoothly over time, creating a wave-like pattern across the screen. The visualization uses the D3.js library (v6.6.2) to create an SVG canvas and a custom `join` operation for incremental updates. A timer-driven loop in JavaScript updates the data every 60 frames per second, while the `makeData` function generates new values using trigonometric functions (sine and cosine) based on a time variable. The code leverages D3's `select` and `range` utilities to manage the dynamic rendering, though the circles simply move continuously without any direct user interaction.

FFelicity Wu

66% match