Skip to main content
SimilarExport ZIP
100%

Bubble chart

✓ Published0🌍 Public
Rremyapk
Last edited Mar 10, 2020
Created on Mar 6, 2020
Forked from Untitled

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Circles with D3

A D3.js visualization renders seven semi-transparent circles on an SVG canvas, each positioned by x/y coordinates with varying radii and bright fill colors against a pale green background. The code demonstrates the General Update Pattern by joining data to SVG circle elements, setting attributes for position, size, and fill via chained `.attr()` methods. It uses `select` from D3 to handle the container element, measuring its dimensions with `clientWidth` and `clientHeight` to size the responsive SVG, while the `opacity` attribute creates an overlapping effect between the colorful bubbles.

SStephen HC Lin
78% match
Loading thumbnail…

refactorBubble

A bubble game renders concentric, ray-defined circles within a grid of animated tiles. The D3 v5 code uses `select`, `range`, and `transition` to grow rectangles and multiple colored circles with differing radii, creating a layered effect. The SVG background is dark, and circles change fill color on hover via CSS. The visualization is driven by specified data arrays for levels, columns, and ball counts, with zoom support via `d3.zoom`.

LLudovicGouverneur
76% match
Loading thumbnail…

Circles

A static collection of six colored circles sits on a light green background, each with a distinct position, radius, and fill color. The visualization demonstrates basic D3.js shape rendering within a Svelte component using the `select` API to create an SVG canvas. Data is stored as an array of objects containing `x`, `y`, `r`, and `fill` properties, which are bound to `<circle>` elements via `attr` calls. The circles use a uniform opacity value of 0.708, creating a subtle translucency across all shapes.

Rrichard.adamson@hotmail.com
76% 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
76% match
Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com
76% match
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
76% match
Loading thumbnail…

Circles with D3

Six translucent circles in contrasting colors—gold, pink, cyan, purple, green, and magenta—overlap on a pale green background. Each circle’s position, radius, and fill are hard-coded in an array of objects. The example uses D3 v7’s `select`, `selectAll`, and `join` to bind this data to SVG `circle` elements, setting `cx`, `cy`, `r`, `fill`, and a fixed opacity of 0.708. The visualization demonstrates basic data-join and SVG rendering with d3.

SSubhendu Karmakar
75% match