Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Tidied up Bubble Chart

Public visualization

Viewing a saved revision (read-only)

db505cf6f2824f60be7fae03ebcb990f

Fork of Tidied up Bubble Chart

0 stars0🌍 Public
GGabriel Ing
Last edited Feb 4, 2025
Created on Jan 30, 2025

This bubble chart visualizes sales records by country, with circle size representing total profit and color encoding country. Each bubble displays its country name as a label. The visualization uses D3 v7's `d3.pack` layout and `d3.hierarchy` to calculate circle positions and sizes from the CSV data. Interactive tooltips appear on mouseover using HTML and D3 event handlers. A save button clones the SVG and downloads it as a file, preserving computed styles. Data is loaded via `d3.csv` from a gist URL, and the chart is rendered as an SVG in a React-based HTML page.

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;