Fork of Hot Circles

100%

Fork of Hot Circles

✓ Published0🌍 Public

Last edited Nov 27, 2024

Created on Nov 27, 2024

Animated circles in vivid colors pulse and drift across a black canvas, blending via screen mode for luminous overlaps. The visualization reads a static CSV dataset of circle positions and radii, rendering each as an SVG element with a 2-second growth transition. D3’s selection joins handle enter, update, and exit states, while `transition` with `easeLinear` animates movement and resizing. Data coordinates drive the layout, with opacity set for subtle layering.

AI-generated description

An example showing the capabilities of VizHub 3.

See also Blank Slate for an intro video on hot reloading.

There is no index.html here! That's what enables hot reloading.
The entry point is the named export main from index.js
The first argument to main is container, a DOM node
The container DOM node is a <div> with measurable dimensions
You can import './styles.css' to load CSS
You can import data from './data.csv' to load CSV data
Dependencies such as D3 are configured in package.json
Alt+Click on a color to get a color picker
Alt+Drag on a number for to change it
All changes are hot reloaded
Works with remote collaborators!

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

88% match

Loading thumbnail…

Hot Circles

Twelve colorful circles pulse outward from their stored coordinates, each expanding to a uniform radius against a black background. Using D3's data join with enter, update, and exit selections, the visualization animates circle growth with slow transitions while rapid updates reposition elements. The circles use `mix-blend-mode: screen` in CSS to blend overlapping colors, rendering CSV-derived data through D3's `select` and `transition` APIs.

CCurran Kelleher

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

84% match

Loading thumbnail…

Fork of D3 Transitions

A collection of six colored circles, each with a distinct radius and position, appears sequentially on a pale green background, then subsequent updates smoothly relocate them. The visualization demonstrates D3's data join and transition system, using `d3.transition`, `easeLinear`, and a custom transition duration to animate the enter, update, and exit states. The enter animation grows each circle from a radius of zero with a staggered delay, while the update state animates positional changes and the exit shrinks the circle back to zero before removal. The code works with SVG circle elements and applies a fixed opacity.

JJulien Tremblay

84% match

Loading thumbnail…

Fork of Fork of Circles with D3

A collection of colorful, semi-transparent circles of varying sizes are arranged across a pale green canvas, with a large black circle at the center. A green planet orbits this central circle along a dashed gray path, while star-shaped paths are rendered using a custom function that calculates polygon coordinates. The visualization uses D3.js version 7 with its `select` and `join` methods to declaratively build the SVG elements, and employs `requestAnimationFrame` to animate the orbiting planet.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

Fork of D3 Transitions

Six circles in a pale green SVG canvas demonstrate D3's built-in transition system. On load, each circle animates from a radius of zero to its target size with a staggered delay, while subsequent updates move them instantly to new positions and exits shrink them back to nothing. Using D3 v7.8.5, the code employs `select` joins with `.data()` keys, `transition()` for both slow and fast timing, and `easeLinear` for uniform motion. Circle positions, radii, and hex colors are hardcoded in the data array.

Aanilthapa1.at23@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example animates a set of colored circles and lines on a pale green background. The circles grow from a radius of zero to their target sizes, while the lines draw themselves from their starting coordinates to their final endpoints. The visualization uses D3.js v7, with all SVG elements created and animated through D3's selection join operation. The `animateCircles` and `animateLines` functions leverage D3's `.transition().duration(1000)` API to smoothly interpolate the circle radii and line x2/y2 attributes over one second.

BBismark Kofi Owusu Sarfo

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

84% match