Bubble Chart

100%

✓ Published0🌍 Public

Last edited Jun 24, 2017

Created on Jun 24, 2017

This bubble chart visualizes the frequency and emotional associations of words from two different decades of Italian song lyrics, selectable via a dropdown menu. Each circle’s area encodes the word’s frequency, while its color maps to an emotion category (e.g., gioia, paura, tristezza) using a categorical color scale. The visualization uses a d3.pack layout to hierarchically cluster the words, with labels clipped inside each circle, and tooltips showing the exact value. The chart is rendered as an SVG using D3 v4, allowing hundreds of words to be compared at a glance in a compact space.

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>

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

84% match

Loading thumbnail…

Gist 868257676e5e82f0fdd1bebcca1960c4

This visualization uses a bubble chart to show the frequency of common Italian verbs from 1950, grouped by the emotion they evoke (such as joy, fear, trust, sadness, anger, and surprise). Each circle’s area encodes the verb’s frequency value, and its color represents the associated emotion category. The data is loaded from a CSV file and processed with d3.nest to create a hierarchical tree, then rendered as an SVG using d3.pack. A dropdown menu allows selection of a decade, though only the 1950 data is shown in this example. The implementation is based on Jeff Heer's Flare class hierarchy data.

Aannanimara

83% match

Loading thumbnail…

Gist a594fcf8e7e33ed97a89da92f5e48492

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.

663anp3ca

83% match

Loading thumbnail…

fresh block

The visualization displays changes in the frequency of eight emotion words—Gioia, Rabbia, Sorpresa, Disgusto, Paura, Tristezza, Fiducia, and Anticipazione—across decades from 1950 to 2010. Each emotion is represented by a colored line with a label at its final point. The data comes from a TSV file and is plotted using D3 v3's time scale, linear scale, and SVG line generator with basis interpolation. Axis and legend styling use standard D3 SVG elements.

Aannanimara

76% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes the frequency of seven emotions (Gioia, Rabbia, Sorpresa, Disgusto, Paura, Tristezza, Fiducia) from 1950 to 2010, with each emotion represented as a separate colored line. The data is loaded from a TSV file and parsed using d3.tsv, with dates parsed via d3.time.format. The visualization uses d3.time.scale for the x-axis, d3.scale.linear for the y-axis, and d3.scale.category10 for color encoding. Each emotion is rendered as a basis-interpolated line using d3.svg.line, with axis labels and legends positioned using conventional margins. The y-axis is labeled "Frequenza (tf-idf)".

Aannanimara

75% match

Loading thumbnail…

Exploración1

This visualization uses a packed bubble chart to display the frequency of values across years, with each bubble sized and colored according to its numeric value. The data comes from a CSV file listing years and corresponding counts. The code loads the data with d3.csv, processes it into a hierarchy, and applies d3.pack() to compute circle positions. Circles are rendered as SVG groups with fill colors from d3.scaleOrdinal and d3.schemeCategory20c. Text labels are clipped to each circle, and hover tooltips show the exact year and value. The layout uses a fixed width of 960 pixels with automatic height.

663anp3ca

67% match

Loading thumbnail…

Bubble Heatmap - Dummy Data

This bubble heatmap visualizes relationships between themes and drivers using color-coded circles, where size indicates importance and color encodes sentiment (positive, mixed, or negative). Built with D3 v7, the SVG chart includes interactive axis labels that filter and highlight related data points on click, while hover tooltips display descriptions. The visualization uses `d3.scalePoint`, `d3.scaleOrdinal`, and transitions for smooth opacity changes.

Hhquazza@gmail.com

67% match

Loading thumbnail…

Smile

This interactive bubble chart uses a force-directed layout to visualize a small dataset of six categories, such as "Reclamantes" and "Fases processuais," with each bubble's size proportional to its count. Built with D3.js, it employs `d3.forceSimulation` and `d3.forceCollide` to position the circles, while custom scales (`d3.scaleLinear`, `d3.scaleSqrt`) map counts to coordinates and radii. The SVG output labels each node with its truncated name and count, using a categorical color scheme.

RRenan Barbosa

66% match