Skip to main content
SimilarExport ZIP
100%

Fork of Tidied Category grouped Bubble Chart

✓ Published0🌍 Public
GGabriel Ing
Last edited Feb 14, 2025
Created on Feb 14, 2025

This example shows grouped bubble charts with a categorical color variable that alternates between Item Type and Region every 200 seconds. Built with React and d3.v7, it loads CSV sales data via d3.csv, aggregates units sold with d3.rollup, then applies d3.pack and d3.hierarchy to position bubbles. Interactive tooltips appear on mouseover, and SVG text labels wrap using a custom function. Animation occurs through the setInterval-driven color and data updates.

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…

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
90% match
Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales record data loaded from a CSV file via `d3.csv`, grouping transactions by region and sizing circles by total profit. Each circle is color-coded using `d3.scaleOrdinal` and positioned with the `d3.pack` layout, which applies a hierarchical clustering algorithm to arrange the bubbles. Interactive tooltips appear on mouseover, displaying region and profit details in an HTML div. The visualization renders with SVG, styled through CSS hover effects, and includes region labels inside each circle.

Hhquazza@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Tidied up Bubble Chart

This example creates a bubble chart using D3.js v7's `d3.pack` cluster layout and `d3.rollup` to aggregate total profit by region from a CSV sales dataset. The visualization renders SVG circles with `d3.scaleOrdinal` color mapping based on region, while the bubble radius is determined by the summed profit values. Labels inside each bubble wrap text with a custom `wrap` function, and a tooltip div provides hourly profit details on mouseover. The chart updates hover opacity and tooltip position based on pointer events, with data loaded via `d3.csv` and rendered in a React-free HTML page.

GGabriel Ing
84% match
Loading thumbnail…

Fork of Tidied up Bubble Chart

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.

GGabriel Ing
82% match
Loading thumbnail…

Fork of Tidied up Bubble Chart

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.

GGabriel Ing
82% 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…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This visualization presents a clustered bubble chart where each circle represents a sales record, with the circle’s area encoding the total profit and its cluster determined by the country of sale. Built with D3 v7 and React, it loads a CSV dataset from a GitHub gist, then uses `d3.pack()` with a hierarchy and sum operation to arrange the circles into a packed layout. Interactive tooltips appear on hover, displaying the country and profit via the `mouseover` event, updating an HTML `#tooltip` element with absolute positioning. The circles and country labels are rendered as SVG elements, with circle size scaled by profit to reveal regional sales patterns.

GGabriel Ing
80% match
Loading thumbnail…

Category clustered Bubble Chart

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.

Hhquazza@gmail.com
79% match