Circles

100%

✓ Published0🌍 Public

Last edited Mar 4, 2020

Created on Mar 4, 2020

Five blue circles appear in a row, drawn as SVG elements. Clicking the button triggers a `mouseleave` event on all of them, causing each to turn red and then fade back to blue over one second. Built with React, it uses D3 v5’s selection and transition API to animate the fill attribute.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Circles Part2

Ten randomly placed light blue circles animate smoothly across the screen in a full-window SVG. The example uses React state to trigger a D3 v5 transition that shifts each circle horizontally; upon transition completion, new random x-coordinates are generated and the animation repeats. Data binding via `selectAll` and `join` keeps the circles synchronized with the changing state.

Mmbooch22

85% match

Loading thumbnail…

Circles Part3

Three face-like clusters of circles are grouped and then re-sorted into rows by color when a button is clicked. The visualization uses React state to manage the SVG circles, with D3’s `selectAll`, `data`, and `transition` APIs to animate the `cy` attribute over one second. A `d3.nest` key operation groups circles by their color property, and the resulting groups trigger rendering of text labels. The example is built with React 16.9, D3 v5, and renders via SVG.

Mmbooch22

84% match

Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

LLauranJade

83% match

Loading thumbnail…

Events

Five gray circles demonstrate different D3 event bindings: the first changes color on click, the second on mouseover, the third on mouseout, and the fifth on contextmenu. A fourth circle, given an id, moves via WASD key presses using d3.transition() with a duration of 1000ms. The circles render as SVG, sized 1600 by 800, with random colors from d3.interpolateRainbow. Event handlers use d3.select and event.currentTarget to update fill attributes.

Vvivianaaai@qq.com

82% match

Loading thumbnail…

HTML Starter

Five red circles appear in a row across the center of an SVG canvas, created using D3 v5 data joins. The code generates an array of apple objects with `d3.range`, binds it to circle elements, and renders them with a static radius and fill. It then removes one data item to demonstrate the `.exit()` selection, but no transition animates the removal. The visualization relies on D3 selections and standard SVG attributes.

Mmohdabidali

82% match

Loading thumbnail…

Circles

This visualization presents a list of names as hyperlinks on a black background, accompanied by animated red and blue circles that drift and pulse. The cursor and a smaller mouse follower are custom-styled elements that respond to mouse movement, with the follower scaling in size based on a frame counter. The name list skews horizontally when the mouse moves far from the center. The implementation uses vanilla JavaScript with `requestAnimationFrame`, CSS animations with `@keyframes`, and DOM manipulation via `querySelector` and `style.transform`.

Aanniehoshi18

81% match

Loading thumbnail…

Click to select

Five circles render in an SVG, each representing a fruit. Clicking a circle selects it, applying a black stroke. The visualization uses D3 v5 within a React framework to animate circle radii and colors based on fruit type ("apple" or "lemon") via ordinal scales. The fruitBowl function manages enter, update, and exit transitions, animating radius changes with `transition().duration(1000)`.

Eevapavlinek

81% match

Loading thumbnail…

Circles React

This example shows 50 randomly sized and positioned circles moving horizontally across the screen, bouncing off the edges. A button toggles between sorting the circles by descending radius and reverting them to random positions. Built with React hooks and D3 v5, it uses `d3.range` to generate the initial data and a `d3.timer` loop to update both React state and SVG attributes (`cx`, `cy`). The circles are rendered as SVG elements, with the animation driven by state changes that update the DOM.

Mmbooch22

81% match