SVG ring 4

100%

✓ Published0🌍 Public

Last edited Sep 14, 2016

Created on Sep 14, 2016

An interactive radial menu displays numbered, color-coded squares around a ring. Users spin the ring by dragging, and the active square is determined by its angular position. Built with AngularJS and SVG, the visualization updates the ring's rotation and active index based on mouse events, with a transition animation on release.

AI-generated description

Similar vizzes

Loading thumbnail…

Square Circle Spiral Illusion

Six concentric rings of small squares rotate at different speeds via SVG transforms, creating a spiral-like square illusion against a gray background. Alternate squares are stroked white for contrast. The animation uses `d3.timer` and `d3.selectAll` with `attr("transform")` to update rotation based on elapsed time, while each ring’s squares are generated from `d3.range` and positioned with `translate` and `rotate`. The code runs on D3 v3 and relies on SVG `rect` elements.

Mmbostock

74% match

Loading thumbnail…

React Starter

This example uses D3.js (v5) and SVG to render three concentric rings of colored squares, each labeled with a number. The code constructs a custom `Square` class and uses `d3.select`, `selectAll`, and data joins to append rectangles and text elements within an SVG viewBox. Square positions are calculated using trigonometry with varying radii for each ring, though the sample data and color definitions are only partially implemented in the provided files.

WWalden Li

70% match

Loading thumbnail…

Intro D3 Workshop

Fifty red circles radiate from the center of an SVG canvas, each sized by a random count value and positioned by distance from a clicked circle. Clicking a circle increments its count and re-renders the layout, animating all circles to new positions via `transition()` over 800 milliseconds. The example uses D3 v4 scales (`d3.scaleSqrt`, `d3.scaleLinear`) to map counts to circle radius and color, with a color gradient from steelblue to red based on proximity to the clicked circle. A gray ring backdrop and trigonometric positioning complete the interactive workshop demo.

GGJHazelaar

70% match

Loading thumbnail…

fresh block

Ten black circles sit in a ring around the center of an SVG canvas. Moving the mouse over a circle turns it red; moving the mouse away returns it to black. The code uses D3 v4 to bind an array of ten numbers to circle elements, positioning each one with trigonometric functions based on its index. The SVG is created with d3.select and appended directly to the body, with a fixed width of 960 pixels and height of 500 pixels.

SSelan87

70% match

Loading thumbnail…

JavaScript SVG Animation

A rotating square animates over a static Cartesian coordinate system, with two small circles tracking its corners along a circular path. Built with vanilla JavaScript and SVG, the animation uses `requestAnimationFrame` to update the square's `transform` attribute and calculate circle positions via trigonometric functions. The code directly manipulates SVG elements like `<rect>` and `<circle>` without any external libraries, rendering entirely in the browser.

MMTR

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

69% match

Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Mmbostock

69% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays four solid-colored circles arranged in a diamond pattern around a central point within an SVG canvas. The visualization uses raw SVG markup with inline circle elements, each defined by cx, cy, and r attributes alongside hex color fills. The page embeds the SVG inside a flex-container for centering and includes a stylesheet for subtle border styling. An accompanying JavaScript file only logs a message to the console, confirming the static nature of the graphic. The code relies solely on native SVG and HTML, with no additional data sources or libraries.

CCurran Kelleher

69% match