Fork of Tidied up Bubble Chart

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.

93% match

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.

92% match

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.

92% match

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.

90% match

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.

90% match

Tidied up Bubble Chart - CGPT Add on

This example shows a bubble chart that aggregates total profit by region from a sales records CSV, with each bubble sized by accumulated profit and colored by region. The visualization uses D3 v7’s `d3.csv`, `d3.group`, `d3.pack`, and `d3.hierarchy` to structure and layout the data as packed circles, rendered as SVG. Interactive tooltips display country and profit details via HTML `div` elements, while labels appear inside each bubble. The chart is built in a plain JavaScript environment with a CSS-styled tooltip and hover opacity effects.

88% match

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.

87% match

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.