Skip to main content
SimilarExport ZIP
100%

Category clustered Bubble Chart

✓ Published1🌍 Public
Hhquazza@gmail.com
Last edited Feb 19, 2025
Created on Feb 4, 2025

This example shows a clustered bubble chart where circles are grouped by color-coded regions, with bubble size representing total cost and labels indicating country. The visualization uses D3.js v7 with a d3.pack layout to position circles within a hierarchical cluster structure, processing data from a CSV file loaded via d3.csv. SVG renders the circles and text labels, while a custom HTML tooltip displays country, region, and cost details on mouseover, with d3.scaleOrdinal mapping region values to a color palette.

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

Loading thumbnail…

Category grouped Bubble Chart

This category grouped bubble chart displays total profit by country, with bubbles colored by region. Using D3.js v7, the visualization employs `d3.rollup` to aggregate sales data, `d3.hierarchy` and `d3.pack` to compute bubble positions and sizes, and an ordinal color scale for regional groupings. Hovering reveals a tooltip with profit details, while SVG text labels wrap within each bubble. Data loads from a CSV file containing 100 sales records.

Hhquazza@gmail.com
85% match
Loading thumbnail…

Bubble Chart - Clustered with CSV import + Tooltip

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.

Hhquazza@gmail.com
84% match
Loading thumbnail…

Template Attempt #1 - Clustered Bubble Chart

This clustered bubble chart visualizes total and unit costs and total profit aggregated by region, with bubble size and opacity encoding the selected financial metric. Users can switch metrics via a dropdown menu, triggering a rebuild of the chart using D3 v7’s `d3.pack()` and `d3.hierarchy()` layout. Hovering reveals tooltips with exact values, while labels inside bubbles wrap using a custom text-wrapping function. The SVG renders with D3 selections, and data comes from a CSV of 100 sales records.

Hhquazza@gmail.com
83% match
Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

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.

GGabriel Ing
82% match
Loading thumbnail…

Bubble Chart

A bubble chart displays the relationship between cost of living and population across five countries, with circle size encoding population and position encoding both variables. The example loads D3 v6 via UNPKG and uses SVG rendering. It constructs linear scales for the x- and y-axes, a square-root scale for circle radii, and an ordinal color scale from `d3.schemeCategory10`. Axis components are generated with `d3.axisBottom` and `d3.axisLeft`, and country labels are added as SVG text elements.

UUVarshaReddy
81% match
Loading thumbnail…

Tidied up Bubble Chart

This bubble chart visualizes sales records by country, with circle size encoding total profit and color mapping regions. The tidy, evenly spaced layout derives from a D3 hierarchy and pack layout (d3.pack), which positions the data points without overlap. Each circle displays its country name as a label. The visualization loads its data from a CSV file using d3.csv and renders as SVG. Interactive tooltips appear on hover, displaying the country and profit values via D3 event handlers and HTML tooltip elements.

Hhquazza@gmail.com
81% match
Loading thumbnail…

Tidied Category grouped Bubble Chart

This chart visualizes sales data grouped by item type, with each bubble’s size representing total units sold and its color indicating the product category. Hovering over a bubble reveals a tooltip with the exact category and unit count. Built with React and D3 v7, the code rolls up the CSV data, applies an ordinal color scale, and uses `d3.pack()` to generate a circular treemap layout. All circles and labels are rendered as SVG elements, and a custom `wrap()` function formats the category names.

Hhquazza@gmail.com
81% match
Loading thumbnail…

Bubble Chart - Clustered with Saving

A clustered bubble chart displays the price of Big Macs in US dollars across various countries, using the d3.pack() layout to group the data points. Each circle represents a country, with its area proportional to the price, and labels overlaid in white text. Hovering over a circle triggers a tooltip showing the country name. The visualization loads data from a CSV file using d3.csv and renders as an SVG with basic animation, and a button allows downloading the chart as an SVG file.

GGabriel Ing
80% match