Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published0🌍 Public

Last edited Sep 4, 2025

Created on Sep 4, 2025

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

AI-generated description

By hovering over each circle, you can send them to a circular shape in the middle of the screen, then hover over them again to send them back to their original positions.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

A fixed full-screen visualization renders seven multi-colored circles on a soft green background. Each circle’s position, size, and color come from a hard-coded data array, drawn using D3’s data join and `attr` methods. A `setInterval` then drives a continuous animation, using D3 transitions with a 1000-millisecond duration to shift each circle’s center and radius in a smooth sine/cosine wave pattern. The result is a lively, looping motion that continuously warps the static layout.

BBismark Kofi Owusu Sarfo

90% match

Loading thumbnail…

Fork of Circles with D3

Seven colored circles of varying sizes and neon hues sit fixed on a pale green field, each gently orbiting its anchor point in a slow circular drift. The animation is driven by a continuous timer from the `d3-timer` library, updating each circle’s position with sine and cosine functions every frame. The visualization uses D3 v7’s `select` and join operations to efficiently create and update the SVG circles, with data defined inline as hardcoded coordinates, radii, and fill colors.

JJose Morales

90% match

Loading thumbnail…

Fork of Circles with D3

Seven colorful circles of varying sizes and positions float on a light green background. The circles feature vivid hex colors and a uniform 70.8% opacity. The visualization uses D3.js 7.8.5 with the general update pattern via `d3.select`, `.selectAll`, `.data`, and `.join` to create and bind the SVG elements based on an array of circle objects.

Hh.harrycoding@gmail.com

90% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render a static collection of circles on an SVG canvas. Seven circles with varying positions, radii, and bright colors are drawn against a light green background, with a semi-transparent opacity that creates overlapping color effects. The code demonstrates the D3 data join pattern and method chaining by binding an array of circle objects to SVG elements. The visualization is created using d3.select, d3.selectAll, and the .attr method to set circle coordinates, radius, and fill properties.

Aauer.major7@gmail.com

90% match

Loading thumbnail…

Fork of Circles with D3

Seven translucent circles of varied sizes and neon colors float on a pale green background. Using the D3.v7 `select` API, the visualization joins SVG circles to an array of position, radius, and fill data, setting each circle's circumference attributes and a uniform 0.7 opacity. The fixed full-viewport container resizes the drawing with the browser window.

Sskasliwal@wpi.edu

90% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render seven colored circles of varying sizes and positions on a dynamically sized SVG canvas. The visualization demonstrates the D3 data join pattern, binding an array of objects containing x, y, radius, and fill properties to circle elements with a uniform opacity. The code employs `select`, `join`, and `.attr` methods to create and style the shapes, showcasing method chaining and the General Update Pattern for dynamic SVG rendering.

JJohn J. Pinckney

90% match

Loading thumbnail…

Fork of Circles with D3

This example displays seven colored circles of varying sizes and positions on a pale green background. It demonstrates the D3 General update pattern for creating and managing SVG elements. The code uses `select`, `selectAll`, `data`, and `join` from D3 to bind circle data to SVG `<circle>` elements, then sets `cx`, `cy`, `r`, `fill`, and `opacity` attributes via method chaining. The data is an array of objects defining each circle's coordinates, radius, and color.

WWill Chen

89% match

Loading thumbnail…

Fork of Circles with D3

This D3.js example displays seven colorful circles of varying sizes and positions on a light green background, creating an abstract composition. The circles use a semi-transparent opacity, allowing overlaps to blend their colors. The code demonstrates D3’s `select`, `selectAll`, and `join` API methods, chaining attribute setters like `attr('cx', ...)` and `attr('r', ...)`. The circle data is hardcoded as an array of objects containing coordinates, radii, and hex color values, with an SVG element sized to the container.

PPremkumar

89% match