Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Hello VizHub 3

Public visualization

Viewing a saved revision (read-only)

d2e9ab14694149799447e01a0281f2a6

Hello VizHub 3

0 stars10🌍 Public
CCurran Kelleher
Last edited Feb 14, 2025
Created on Dec 21, 2023
Forked from Hello VizHub

This example demonstrates a dynamic scatter plot rendered using D3 version 7.8.5, where circles appear one by one with an animated radius expansion. The visualization reads data from a CSV file containing circle positions, sizes, and colors, and uses the D3 `transition` API with `easeLinear` for both slow entrance animations and fast updates. A grid of ten blue squares animates across the top of the canvas, while the circles use `mix-blend-mode: multiply` for overlapping color effects. The SVG is sized to the container’s dimensions and the entire scene animates on a yellow-green background.

AI-generated description

An example showing the capabilities of VizHub 3:

  • Entry point is named export viz from index.js
  • The first argument to viz is container, a DOM node
  • Alt+Click on a color to get a color picker
  • Alt+Drag on a number for instant feedback
  • Hot reloads all changes
  • Works with remote collaborators!