Skip to main content
SimilarExport ZIP
100%

Bubble charts - bottom y axis alignment

✓ Published1🌍 Public
Hhquazza@gmail.com
Last edited Jan 28, 2025
Created on Jan 28, 2025
Forked from Gubs Intro course

This example displays a bubble chart with four circles representing groups A through D, positioned horizontally with their bottoms aligned along the lower edge of the SVG canvas. Circle size encodes the `total` value using a square root scale, while opacity reflects the same metric. The visualization uses D3 v7’s selection, data join, and scaleSqrt APIs to bind dummy data to SVG circle and text elements, with labels placed at each bubble’s center.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart - Clustered

Four clusters of proportional circles, each labeled with a group letter (A–D), fill the entire SVG canvas without overlapping. The bubble sizes correspond to each group’s `percentResponse` value, while the cluster layout is computed using `d3.pack()` on a `d3.hierarchy()` root. Rendered with `d3.v7` in a React framework, the circles and labels are appended as SVG elements with `d3.select` and `join()`. The data source is hardcoded dummy data, with no axes or tooltips.

Hhquazza@gmail.com
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
80% 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
79% 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
77% match
Loading thumbnail…

Pseudo Bubble Chart

This pseudo bubble chart demonstrates a scatterplot-style visualization where circles of varying sizes represent data points along x and y axes. The visualization uses React to render an SVG scene containing multiple gray circles and one prominent purple circle, with axis labels and grid lines provided by plain SVG elements. The code utilizes standard SVG primitives such as `<circle>`, `<line>`, and `<rect>` within a fixed viewBox, while CSS styling controls the text appearance for axis tick labels.

Hhquazza@gmail.com
76% match
Loading thumbnail…

d3 | reusable circle legend

This example shows a reusable circle legend for bubble charts, displaying three concentric circles sized by a square-root scale to represent data values like 8%, 34%, and 89%. Each circle is paired with a dashed tick line and a text label, making the mapping from numeric value to area immediately readable. The code defines a `circleLegend` function that builds SVG elements via `d3.scaleSqrt`, `selection.append`, and chained data joins. Users configure the legend through methods like `.domain()`, `.range()`, and `.values()`, then call `.render()` to draw it, with all defaults adjustable for colors, padding, and suffixes.

EEndNight95
75% match
Loading thumbnail…

psuedo-bubblechart

This example displays a single red circle with a dashed stroke and the text "AG(50)" beside it. The visualization is constructed using JavaScript with the D3 library, which appends SVG elements to an HTML page. The circle is centered within a 600 by 600 pixel canvas, using a stroke-dasharray to create a pseudo-bubblechart effect. The code directly manipulates SVG attributes like `cx`, `cy`, `r`, and `stroke-width` to define the graphic, with the text element positioned and styled via D3's selection and chaining methods.

GGabriel Ing
75% match
Loading thumbnail…

d3 | reusable circle legend

This example demonstrates a reusable circle legend for bubble charts, using nested concentric circles to represent proportional values such as 8%, 34%, and 89%. The legend renders in SVG via d3 v4, with `d3.scaleSqrt()` mapping the domain to circle radii, and includes dashed guide lines and text labels for each value. The code exposes a configurable API for setting domain, range, values, dimensions, colors, and suffixes, making the legend adaptable to different datasets.

EEndNight95
74% match