Skip to main content
100%

Fork of Bubble Chart - Clustered with CSV import + Tooltip

✓ Published0🌍 Public
GGabriel Ing
Last edited Jan 30, 2025
Created on Jan 30, 2025

This example demonstrates a clustered bubble chart with interactive tooltips, using sales data from a CSV file. It visualizes two facets of the data side-by-side: one chart sizes bubbles by "Total Profit" and another by "Total Cost", with each bubble labeled by country. The visualization uses D3 v7's `d3.pack()` layout algorithm to create the cluster arrangement, and implements custom tooltips via HTML elements that display country and profit or cost details on mouseover. The code employs D3's `d3.csv()` to import data from a remote gist, and renders resulting SVG circles and text labels within a React framework, with styling applied through CSS.

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;

MIT Licensed

Similar vizzes