Bubble Chart with D3.js

100%

Bubble Chart with D3.js

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This example shows a bubble chart that visualizes product performance using Revenue to size each circle and Profit to influence color, with bubbles randomly positioned across the SVG canvas. Built with D3.js v5 and React, it loads data from a CSV file using `d3.csv` and renders circles and labels through SVG selections. The code uses `d3.scaleLinear` for mapping Revenue and Profit to radii, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and adds tooltips via SVG `title` elements. Axes labels for Revenue and Profit are manually positioned as text elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Bubble Chart with D3.js

This example presents a bubble chart that visualizes product data from a CSV file, mapping Revenue to bubble radius and Profit to a secondary size influence, with colors assigned by category index. It uses D3.js v5 with an SVG rendering approach, reading data via `d3.csv()`, scaling values with `d3.scaleLinear()` and `d3.scaleOrdinal()`, and randomly positioning bubbles within the chart area. Each bubble includes a text label and a tooltip via appended `title` elements, while axis names for Revenue and Profit are added manually.

NNukaShravanKumar

95% match

Loading thumbnail…

Bubble Chart with D3.js

This example visualizes a static bubble chart of fruit data, mapping each fruit’s x and y coordinates to scaled positions and its radius to a scaled circle size. It renders circles as steel-blue SVG elements with white fruit labels overlaid at each point’s center. The chart includes linear scales (`d3.scaleLinear`) for positioning and sizing, along with a title, axis labels, and `d3.axisBottom` and `d3.axisLeft` for the axes. The code uses D3.js v7 to append SVG circles and text directly to the DOM.

Ssaikrishnabussa

81% match

Loading thumbnail…

Bubble Chart Example

This example visualizes a small dataset of points with x, y, and size attributes as a bubble chart, where each circle's horizontal and vertical positions map to the x and y values, and its radius corresponds to the size value. The chart is rendered as an SVG element using the d3.v6 library, including linear scales for both axes, axis ticks and labels, and steelblue filled bubbles. The code demonstrates the use of d3.select, d3.max, d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

BBhavanaGIrni

78% match

Loading thumbnail…

React V16 + D3 + Force

This example shows a force-directed bubble chart built with React 16 and D3 v3, where each bubble’s position and size update as the simulation runs. The code uses `d3.layout.force` to calculate physics-based movement, with a negative charge proportional to each circle’s radius, and drives re-renders via React state updates in the `DataSeries` component. The visualization renders as SVG circles, and `requestAnimationFrame` in the force’s tick handler triggers continuous re-rendering, while the final `force.on("end")` logs total time, render time, and tick count to the console. Data is randomly generated as 1,000 points with radii between 2 and 10.

FFasani

77% match

Loading thumbnail…

Fork of Bubbles with Json Data

This visualization displays a bubble chart built from JSON data, with each circle representing a person and sized according to a numeric value. The bubbles are labeled with truncated names and monetary amounts, and clicking one triggers a process load. The code uses d3.pack for hierarchical layout, d3.hierarchy for data structuring, and D3 selections to append SVG circles and text. The visualization is rendered in a React framework with SVG, using the d3.v5 library.

Yyeeet0421

77% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes website traffic data from a CSV file, mapping impression counts to bubble size and click rates to vertical positioning, with color indicating content categories. The visualization uses D3 v5’s `csv` method to load the dataset and renders bubbles as SVG circles within a fixed 960×500 viewport. The code imports `select` and `csv` from D3, though the current implementation only logs the parsed data to the console, leaving the chart rendering incomplete. The page structure includes an SVG element styled with CSS, with the final visualization intended to use D3’s data binding and scaling methods.

Aases1996

77% match

Loading thumbnail…

Bar Chart with D3 and React

This example displays product ratings by subcategory in a horizontal bar chart. Each rectangle’s length corresponds to a product’s numeric rating, with axes labeled using D3’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` functions. Built with React and D3 v5, the chart loads data from a CSV file via `d3.csv`, then renders the SVG directly through React’s `rect` elements. The code uses D3’s `select` and `call` methods to apply axis generators, while React manages state and the rendering lifecycle.

Aavvarijayakrishna99@gmail.com

77% match

Loading thumbnail…

Bubble Chart with Different Colors

This example shows a bubble chart of school and student metrics across categories, encoding schools per 1000 on the x-axis, students per 1000 on the y-axis, earnings as bubble radius, and category as color. It loads CSV data from a GitHub gist and renders an SVG using d3.csv, d3.scaleLinear, d3.scaleSqrt, d3.scaleOrdinal with d3.schemeCategory10, d3.axisBottom, and d3.axisLeft to produce axes, labels, and a color legend.

HHarshithaAmbilpur

77% match