Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Buddha

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

da4cda666b5d4be2aca30df6423956b9

Open

Buddha

3 stars4🌍 Public
NNita
Last edited Jan 20, 2024
Created on Jan 20, 2024
Forked from Hot Circles

A layered animation of colorful circles expands and shifts across a black background, using a screen blend mode to create luminous overlaps. The circles appear with staggered transitions, growing to a uniform radius before adjusting to their target positions and colors. Built with D3.js, the visualization uses `transition()` calls with varying delays and durations, along with an SVG opacity setting, to orchestrate the movement. The shape of a path is embedded in the code, hinting at a hidden form that the circles may ultimately trace.

AI-generated description

An example showing the capabilities of VizHub 3.

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

<video autoplay="" loop="" muted="" width="100%"> <source src="https://vizhub-images.s3.amazonaws.com/hot-reloading-demo.mp4" type="video/mp4" /> </video>
  • 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!