Bubble Chart with Different Colors

100%

Bubble Chart with Different Colors

✓ Published0🌍 Public

Last edited Jul 20, 2023

Created on Jul 20, 2023

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.

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 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

79% 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

77% match

Loading thumbnail…

Bubble Chart Creation

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis against ratings on the y-axis, with bubble size encoding calories and color distinguishing beverage types. The visualization uses D3 v7 to load CSV data, apply linear scales for axes and bubble radius, and an ordinal color scale with `d3.schemeSet1`. SVG circles are rendered with opacity and red strokes, accompanied by legends for calorie size and brand colors.

SSwapna1915

76% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the relationship between the number of women and men at various universities, with bubble size representing the gender gap. The visualization uses a scatter plot layout where each school is positioned by their female and male student counts, and the radius of each bubble scales with the gap between these values. The chart is built using D3 v6, employing linear scales for the x and y axes, a square-root scale for bubble radius, and an ordinal color scale to distinguish schools. Data is loaded from an external JSON file, and the visualization includes a color-coded legend rendered as SVG.

HHarshithaAmbilpur

76% match

Loading thumbnail…

Bubble Chart

A bubble chart encodes hierarchical data as a packed circle layout, with each circle’s area proportional to a numeric value and color representing its top-level package. The visualization uses D3 v4’s `d3.pack` and `d3.hierarchy` to compute the layout, then renders SVG circles and clipped text labels. Data comes from the Flare class hierarchy stored in a CSV file. Hovering reveals the full class name and formatted value via SVG `<title>` elements.

Mmbostock

76% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the relationship between average grades, study hours, and extracurricular activities for 50 students. The x-axis represents study hours, the y-axis shows average grades, and each bubble’s size encodes the number of extracurricular activities. The visualization uses D3 v7 with SVG rendering and animation. Data is loaded from a CSV file, and bubbles are rendered with d3.forceSimulation for positioning. Hovering highlights individual students, while axis labels and a title provide context for interpreting the educational data.

Bbogasamudramvamsikrishnareddy

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

75% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the Flare class hierarchy, packing hundreds of circles into a square space where each circle’s area encodes a numeric value. The D3 v4 code uses the `d3.pack()` layout, an ordinal color scheme (`d3.scaleOrdinal` with `schemeCategory20c`), and SVG rendering. Text labels, clipped to their circles, split class names across multiple lines. Data is loaded from a CSV file via `d3.csv()`.

FFrissAnalytics

75% match