Gist a594fcf8e7e33ed97a89da92f5e48492

100%

Gist a594fcf8e7e33ed97a89da92f5e48492

✓ Published0🌍 Public

Last edited Sep 20, 2018

Created on Sep 20, 2018

This visualization uses a bubble chart to show the frequency and emotional association of Italian verbs from the 1950s, based on the Flare class hierarchy dataset. Circles are sized by count and colored by emotion category (e.g., joy, fear, trust). The chart is rendered in SVG using D3 v4, with a dropdown menu to select a decade. Implementation is based on Jeff Heer's bubble chart and displays each verb's value and emotion via color-coded, packed circles.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063269'>Bubble Chart</a>

forked from <a href='http://bl.ocks.org/annanimara/'>annanimara</a>'s block: <a href='http://bl.ocks.org/annanimara/f6a26140fd2e69e7ab2851086f07033c'>Bubble Chart</a>

forked from <a href='http://bl.ocks.org/salvob41/'>salvob41</a>'s block: <a href='http://bl.ocks.org/salvob41/84b910169cc2c288319aa78686c69a6d'></a>

forked from <a href='http://bl.ocks.org/63anp3ca/'>63anp3ca</a>'s block: <a href='http://bl.ocks.org/63anp3ca/bb029c09395354ca97a42a1583947d0b'></a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Gist bb029c09395354ca97a42a1583947d0b

A bubble chart displays the frequency of common Italian verbs across different decades, with circle size encoding frequency and color encoding one of seven emotion categories. A dropdown menu selects the decade, updating the visualization. The implementation uses D3 v4’s `d3.pack` layout to position circles within a hierarchical layout, with data loaded from CSV files.

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

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

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

72% match

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

71% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the Flare class hierarchy, encoding each class’s value in the area of a circle. The visualization uses a treemap layout to pack over a hundred bubbles into a compact space, with bubble color mapped to impact. Built with D3 v4, the code leverages `d3.hierarchy`, `d3.pack`, and `d3.scaleOrdinal` to compute and render the circles as SVG elements. Labels are clipped inside each bubble, and full class names appear on hover via the `title` element.

LLauraCortes

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

71% match

Loading thumbnail…

Exploración1

This example visualizes a dataset of yearly counts (from 1896 to 2005) as a circular bubble chart, where each bubble represents a year and its size encodes the associated value. The visualization uses D3.js v4’s `d3.pack` layout to compute the circle positions and radii, with `d3.scaleOrdinal` and `d3.schemeCategory20c` coloring bubbles by year. The SVG elements are generated via `d3.hierarchy` and data binding, with text labels and tooltips added using `append("text")` and `append("title")`. The source data comes from the CSV file `flare.csv`, and the chart is rendered entirely in SVG.

663anp3ca

70% match