Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

practice_with_h

Public visualization

Viewing a saved revision (read-only)

edacb5064a104b97970d2288cd120635

practice_with_h

0 stars1🌍 Public
GGabriel Ing
Last edited Jan 20, 2025
Created on Jan 19, 2025
Forked from HTML Starter

This example shows a circle-packing visualization of eight data groups labeled A through H, where each circle’s area is proportional to a numeric value. Every two seconds, the visualization toggles between displaying the group’s total and its percentResponse metric. Using D3 v7’s `d3.pack` and `d3.hierarchy`, the circles animate smoothly to new positions and sizes via a `d3.transition` with a linear ease. The code renders to SVG, updating circle radii and text labels for the current value on each cycle.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.