Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bubble Chart - Clustered with CSV import + Tooltip

Public visualization

Viewing a saved revision (read-only)

a3139bea2a1f4ce6993b6d2daf4fe49f

Bubble Chart - Clustered with CSV import + Tooltip

0 stars3🌍 Public
Hhquazza@gmail.com
Last edited Jan 30, 2025
Created on Jan 28, 2025

This bubble chart displays clustered circles representing sales records, with each bubble’s size corresponding to Total Profit and country labels inside. Built with D3 v7, it loads data via `d3.csv` and uses the `d3.pack` layout to arrange circles hierarchically. A custom HTML tooltip appears on mouseover, showing the country and profit value, with hover styling changing the fill color. The visualization renders as SVG within a React-free HTML page, using `d3.select` and `join` for dynamic circle and text creation.

AI-generated description

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

See also React Starter.

Added content = d3.csv (line 3)

Tooltip - create in html, add details in json See line 13 and line 44+ in js file;