Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Tidied up Bubble Chart

Public visualization

Fork of Tidied up Bubble Chart

0 stars1🌍 Public
GGabriel Ing
Last edited Feb 4, 2025
Created on Feb 4, 2025

This example shows the total profit from a sales records dataset, grouped by region and visualized as a bubble chart, where each circle’s area encodes profit and its color encodes region. The chart uses D3’s `pack` layout for hierarchical bubble clustering and `scaleOrdinal` for color mapping. Hovering over a circle triggers a tooltip with the country name and profit value, implemented via D3’s selection and event handling. The visualization renders to an SVG canvas within a React framework, using `d3.csv` to load and parse the external data file.

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;

Comments

Sign in to join the discussion.

MIT Licensed