Bubble Chart

100%

✓ Published0🌍 Public

Last edited Mar 8, 2019

Created on Nov 13, 2012

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.

AI-generated description

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the hierarchical Flare class structure, encoding each class as a circle whose area represents a numeric value. The graphic packs all leaves into a compact, non-overlapping layout, with colors distinguishing top-level package categories. The implementation uses D3 v4’s `d3.pack` layout on an SVG canvas, reading data from a CSV file via `d3.csv`. Each circle is drawn with an SVG `circle` element, and labels are added using `clipPath` and `tspan` elements to fit text within the bubble. The underlying data comes from the Flare visualization toolkit’s class hierarchy.

HHugoberry

92% match

Loading thumbnail…

Bubble Chart

This bubble chart encodes the Flare class hierarchy in circle areas, packing hundreds of values into a compact space. It shows the relative size of each class by area, with colors distinguishing top-level packages and labels clipped within each bubble. The visualization uses d3.pack for the circle-packing layout, d3.hierarchy to structure the CSV data, and d3.scaleOrdinal with a category color scheme. Text labels are placed as tspans within clip paths, with hover tooltips showing full IDs and formatted values.

FFrissAnalytics

92% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the hierarchical structure of the Flare class library, encoding each class’s value as the area of a circle. The visualization packs all leaf nodes into a square canvas, with circles colored by the top-level package and labeled with truncated class names. The code uses d3.pack for layout, d3.hierarchy for data binding, and d3.scaleOrdinal with schemeCategory20c for color assignment. It loads data from a CSV file and renders the result as SVG elements, with tooltips showing exact values.

663anp3ca

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

90% match

Loading thumbnail…

Circle-Packing II

This visualization displays a hierarchical bubble chart of the Flare dataset, where each circle’s area encodes a numeric value and its color reflects the data’s grouping structure. Built with D3 v4, the chart uses `d3.pack` to compute non-overlapping circle positions within a fixed canvas, with each node labeled by its class name and tooltip showing the raw value. The SVG rendering applies a clip-path to each node so text remains contained within its circle, and hovering highlights the selected bubble.

Mmbostock

88% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes file sizes from a Flare class hierarchy, using the area of each circle to represent the relative value of hierarchical data. The visualization employs D3’s pack layout to position non-overlapping circles, with colors assigned by the first character of the leaf ID and stroked with dashed black outlines for emphasis. Data is loaded from a CSV file, with numeric values extracted and summed along the hierarchy. Text labels clipped to each circle show class names, while hover tooltips display the full ID and numeric value. The chart packs hundreds of entries into a compact space, trading perceptual accuracy for density.

CCBasis

87% match

Loading thumbnail…

Circle Packing

This example visualizes the Flare class hierarchy as an enclosure diagram, using nested circles to represent the structure and size of each node. The visualization uses a circle-packing layout, where each circle’s area is proportional to the numeric value of its corresponding data item, and parent circles enclose their children to reveal the hierarchy. The implementation relies on `d3.pack()` for layout, `d3.hierarchy()` for data aggregation, and renders the result as an SVG with styled circles and labels. The color scheme distinguishes leaf nodes as orange with full opacity, while non-leaf circles are blue and semi-transparent.

Mmbostock

83% match

Loading thumbnail…

Circle-Packing

This example visualizes the hierarchical structure of the Flare dataset using circle packing. Each node is represented as a circle, with leaf nodes sized by their value and grouped by their parent categories. The visualization uses D3 v4’s `d3.stratify` to build a hierarchy from the CSV and `d3.pack` to compute the circular layout. SVG circles are colored with a sequential magma scale based on depth, and hovering highlights the ancestors of a node via a CSS class and the `d3.selectAll` method.

Mmbostock

82% match