Skip to main content
100%

Gist 868257676e5e82f0fdd1bebcca1960c4

✓ Published0🌍 Public
Aannanimara
Last edited Jun 28, 2017
Created on Jun 28, 2017

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.

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/rinziv/'>rinziv</a>'s block: <a href='http://bl.ocks.org/rinziv/21152e547dbbd1e6d27a4f5519592931'></a>

mit Licensed

Similar vizzes

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
95% match
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
92% match
Loading thumbnail…

Bubble Chart

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.

Aannanimara
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
77% 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
72% 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
71% match
Loading thumbnail…

Bubble Chart

A bubble chart displays the Flare class hierarchy, encoding each class’s count as the area of a circle. Circles are packed tightly with d3.pack, colored by package using d3.scaleOrdinal and d3.schemeCategory20c, and labeled with clipped text. The code loads CSV data via d3.csv, builds a hierarchy with d3.hierarchy, and renders SVG circles, clipPaths, and titles. It follows an implementation by Jeff Heer and is forked from mbostock’s block.

Aanaeliaovalle
69% match