Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of HTML Starter

Public visualization

Viewing a saved revision (read-only)

cb30f75d66db4053ab0c263d802c90d6

Fork of HTML Starter

0 stars0🌍 Public
SSergey Karakash
Last edited Mar 16, 2026
Created on Mar 16, 2026
Forked from HTML Starter

This example generates a full-screen SVG canvas filled with 85 vertical rectangles, each with a distinct blue-green color gradient. The rectangles are rendered using D3 v7’s `selectAll().data().join()` pattern, with dimensions and positions computed from an array of objects. Transitions are applied via CSS, causing all circles to slowly change color over two seconds, while hovering turns them grey with a lightseagreen stroke. The code relies on D3’s selection and data-binding methods, alongside custom styling in `styles.css`.

AI-generated description