Skip to main content
SimilarExport ZIP
100%

bubble chart activity 7

✓ Published0🌍 Public
LLakshmanRangisetti
Last edited Jun 28, 2023
Created on Jun 28, 2023
Forked from Hello VizHub

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.

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 with d3.js

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.

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

Project Main

This example demonstrates data visualization through multiple chart types, including a bubble map, circular packing, line chart, and rose chart, all embedded within a single web page. The project loads D3.js v5 via UNPKG and uses ES6 modules, such as `myMessage.js`, to display a title. D3's `select` function manipulates the DOM to set message text. The visualizations leverage D3's core APIs for creating and rendering various chart layouts, with styles defined in a separate CSS file.

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

Bubble chart

Six unlabeled circles of varying radii float on a blank SVG canvas, with each bubble’s fill color mapped from its radius via a custom `colourPicker` function. The code uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `circle` elements, positioning them with fixed `cx` and inverted `cy` values from a hardcoded dataset. The y-axis is flipped by subtracting each `cy` from the chart height. Rendering is pure SVG, with no axes, transitions, or interactivity.

Rremyapk
76% 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
75% 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
75% 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
74% match