Circles

100%

✓ Published0🌍 Public

Last edited Sep 24, 2018

Created on Sep 24, 2018

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

AI-generated description

forked from <a href='http://bl.ocks.org/trebor/'>trebor</a>'s block: <a href='http://bl.ocks.org/trebor/3817668ce6a358a685cab29907c0f52f'>Circles Chartlet</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau

84% match

Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo

83% match

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

82% match

Loading thumbnail…

D3: Adding values and elements to a chart

A button click triggers animated transitions for a set of circles plotted against linear x- and y-axes. The chart initially displays points from a fixed data array, then swaps their coordinates and colors in two sequential transitions, cycling in a loop. Built with D3 v4, it uses SVG circles, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with chained `transition` calls and delays to orchestrate the repeating visual update.

SS-trunk

82% match

Loading thumbnail…

Fork of Circles with D3

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.

BBen Trantanella

81% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

81% match

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof

81% match

Loading thumbnail…

Circles with D3

Twelve pastel circles in a fixed layout demonstrate a straightforward data binding workflow with D3. Each circle’s position and radius are predefined in an array, and D3 selects all `circle` elements, binds the data, and appends new circles with the `enter` selection. The SVG renders with rounded corners and a subtle shadow from CSS. The example uses `d3.select` and `selection.attr` to apply the `cx`, `cy`, `r`, and `fill` attributes, mapping each data object to a visually distinct geometric shape.

223100098@lums.edu.pk

81% match