Gist bb029c09395354ca97a42a1583947d0b

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.

91% match

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.

74% match

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.

71% match

Untitled

A reactive bubble chart visualizes January Medium articles, encoding each post's category by color and its view count by circle radius. Hovering a bubble reveals a tooltip with the article title, category, and number of hearts. The chart relies on `d3.forceSimulation` for layout, `d3.scaleOrdinal` with `schemeCategory10` for colors, and a `d3.scaleLinear` for radius. Data loads from a CSV file via `d3.csv`, and the reusable chart pattern exposes setters for width, height, and column mappings.

Ssergiofco

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

Exploración1

This example visualizes a dataset of yearly counts as a circular bubble chart, where each circle’s size encodes a numeric value and its color represents a category derived from the data’s ID. The visualization uses D3.js v5 to load a CSV file with `d3.csv`, then applies the `d3.pack` layout to compute circle positions and radii, with `d3.hierarchy` structuring the data. Each leaf node is drawn as an SVG `<circle>` with a fill color from `d3.scaleOrdinal(d3.schemeCategory20c)`, and text labels are added with clipping paths to keep them inside the circles. The chart also includes tooltips via `<title>` elements showing the exact value for each circle.

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