Skip to main content
100%

Hello Vizhub

✓ Published0🌍 Public
EEJ Fox
Last edited Jan 19, 2024
Created on Jan 19, 2024
Forked from Hello VizHub 3

Twelve colored circles, each loaded from a CSV dataset with id, x, y, radius, and fill, animate into view by growing from a radius of zero, while ten blue squares bounce between two positions. The visualization uses D3’s data join with explicit enter, update, and exit transitions, combining a slow two-second ease for entrance and a fast linear movement for updates. Circles blend with multiplative blending via CSS, and the entire scene renders inside a dynamically sized SVG, relying on d3-transition and d3-selection, with data parsed through d3.csv.

AI-generated description

An example showing the capabilities of VizHub 3:

  • There is no index.html here!
  • 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