Skip to main content
SimilarExport ZIP
100%

Bubble Chart with d3.js

✓ Published0🌍 Public
Aakshayvenishetty1437
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

This example shows a bubble chart built with d3.v6, plotting five data points on x and y axes with bubble sizes encoding a third quantitative value. The chart renders as an SVG, using d3.scaleLinear to map data ranges for position and radius, and d3.axisBottom/axisLeft to draw labeled axes. It also demonstrates importing local ES6 modules and loading D3 via UNPKG in VizHub.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

bubble chart activity 7

This example demonstrates a bubble chart rendered with D3.js, showing data points as circles with scaled radii. The visualization is built using D3 v5, loaded via UNPKG, and the code imports API functions like `select` to manipulate the DOM. It also showcases local ES6 module imports, with a separate message module controlling text in the page. The chart’s styling is handled through a linked CSS file. The core behavior is minimal, focusing on integrating D3 with modular JavaScript rather than interactive simulation.

LLakshmanRangisetti
84% 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
83% match
Loading thumbnail…

Scatter Plot with d3.js

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

Aakshayvenishetty1437
80% match
Loading thumbnail…

Bubble Chart

This bubble chart displays three data points as red circles, with each bubble’s horizontal position, vertical position, and radius mapped from the `a`, `b`, and `c` fields of the data array via `d3.scaleLinear` ranges. The SVG rendering uses D3 v7’s selection API (`d3.select`, `.enter().append()`) to create the circles, while `d3.axisBottom` and `d3.axisLeft` add labeled x- and y-axes with explicit pixel translations. The static example demonstrates basic D3 scales, SVG circle generation, and axis construction without interaction or animation.

Ssaipaidipalli
79% 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
77% match
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
76% match
Loading thumbnail…

Simple Bar Chart with d3.js

This example displays a simple bar chart visualizing five categorical values using D3 v6. The chart renders as an SVG with labeled axes, a title, and styled rectangles representing the dataset. The code loads D3 from UNPKG and uses core APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to map data to visual elements. Although the project includes an ES6 module example, the main chart logic resides in a separate script file and renders entirely in the browser.

Aakshayvenishetty1437
76% match
Loading thumbnail…

Bubble Chart with D3.js

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.

Hharsha
76% match