Custom Beeswarm III (perf. enhancement)

100%

Custom Beeswarm III (perf. enhancement)

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on May 27, 2016

This example visualizes the distribution of word frequencies from a CSV dataset using a beeswarm plot, where each word is positioned along the x-axis by its rank and vertically adjusted to avoid overlaps. The code uses D3.js v3 and a custom doubly-linked list (implemented in `already_arranged_data.js`) to efficiently check collisions only among nearby circles. Hovering reveals tooltips with details, and the animation updates placements dynamically as the user adjusts parameters via the dat.gui interface.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/921b2f038327dd0ca55213e4ce8bcdb1'>block</a> is a continuation of a <a href='http://bl.ocks.org/Kcnarf/9a4ef4e88343202ddaca640e23968067'>previous one</a>.

This sequel experiments a way to vizualise the distribution of things (whatever it is) in a horizontal way (ie. along the x-axis), where constraints/objectives are:

to maintain the exact position of each datum (represented by a circle) along the x-axis
to be able to hover each circle to show related datum (handle overlapping)

<hr/>

Compared to the <a href='http://bl.ocks.org/Kcnarf/9a4ef4e88343202ddaca640e23968067'>previous block</a>, this algorithm is faster, because of:

less collision checks (use a direct-access doubly-linked list of possible already arranged colliding circles, so that collision checks are restricted to a small area (square with side of 2*radius))

The more data to arrange, the more it is faster. The more circles are big (more possible collisions), the more it is faster.

The algorithm is:

(hyp) circles to draw are ordered (from right to left in this example)
(hyp) datum must have an identifier named 'id' (used for direct-access in the doubly-linked list)
(init) cf. function 'initArrangement'
loop1 - for each new circle to place Ci:
find already drawn circles susceptible to overlap (close enought to Ci, distance from Ci <= 2*r)
if AAC is empty
- place Ci on the x-axis (Ci.y = 0), push Ci in AAC, continue loop1
loop2 - for each Ca in AAC:
- place Ci above Ca
- if Ci is a better placement than the already tested (best = closest to x-axis, consider absolute value)
  - if Ci does not overlap others circles in AAC
    - retain y-position as the best till now
- place Ci below Ca
- if Ci is a better placement than the already tested
  - if Ci does not overlap others circles in AAC
    - retain y-position as the best till now
place Ci at best y-position, add Ci to AAC

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v3.5.5)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='http://workshop.chromeexperiments.com/'>dat.gui</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Custom Beeswarm II (perf. enhancement)

This interactive beeswarm chart visualizes the distribution of 150 French word stems along a horizontal axis, with the y-position optimized to avoid overlapping circles while preserving exact x-coordinates. The D3.js v3 and SVG implementation animates circle placement using an efficient collision-detection algorithm that estimates candidate positions against already-placed neighbors, skipping checks when a better placement is found. Circles are colored along a lightgreen-to-pink scale by rank, and hovering reveals tooltips with stem, rank, and trend data from an external CSV. The code includes dat.gui controls to adjust point density and radius.

KKcnarf

91% match

Loading thumbnail…

Custom Beeswarm

A custom beeswarm layout arranges 150 French word stems along a horizontal axis by their sentiment trend values, using colored circles from light green to pink based on rank. The D3 v3 code implements a deterministic collision-avoidance algorithm, positioning each circle above or below previously placed neighbors to maintain exact x-coordinates while minimizing vertical displacement. Hovering a circle reveals a tooltip showing the stem, rank, and trend value, with the dataset loaded from a CSV file and rendered as SVG.

KKcnarf

87% match

Loading thumbnail…

Custom Beeswarm & ForceLayout

This beeswarm chart visualizes the rank and trend of 150 French words from customer feedback, plotting each word as a circle along the x-axis while preserving its exact position. A custom placement algorithm initially arranges the circles to avoid overlap, then a force-directed layout is applied for a few iterations to reduce extreme accumulations, balancing precision with fast computation. The visualization uses d3.v3 with SVG rendering and supports hover interactions to reveal each word’s data. The code accesses the csv data through the D3 library and includes a dat.gui control panel for adjusting parameters like radius and iteration count.

KKcnarf

86% match

Loading thumbnail…

Custom Beeswarm IV (handle unsorted data)

This interactive beeswarm chart displays the distribution of 150 French adjectives from customer reviews, ranked by frequency along the x-axis while preserving each item’s exact position. The D3.js (v3) visualization uses a custom beeswarm algorithm that handles unsorted data, placing circles to avoid overlaps while allowing hover tooltips to reveal each term. The example includes a dat.GUI control panel for adjusting circle radius and re-sorting data, with animated transitions between arrangements and SVG-based rendering.

KKcnarf

86% match

Loading thumbnail…

Beeswarm

A beeswarm plot displays the distribution of numeric values from a CSV dataset, with each circle representing a data point positioned along a logarithmic x-axis. The circles are arranged using d3.forceSimulation with forceX, forceY, and forceCollide to prevent overlap. A Voronoi overlay via d3.voronoi improves hover interaction: hovering over any cell highlights the corresponding circle in red, and a tooltip shows the data point’s ID and value. The visualization renders in SVG with an axis label and tick formatting.

FFrissAnalytics

85% match

Loading thumbnail…

Beeswarm + maintain x-position of nodes

A beeswarm chart displays French word stems ranked by frequency and trend score, with each circle colored by rank from light green to pink. The visualization uses D3 v4's `d3.forceSimulation` to separate overlapping nodes while maintaining each circle’s original x-position based on its trend value. To achieve this, the tick function resets x coordinates each frame while progressively increasing the `d3.forceCollide` radius to reduce jitter. Hovering reveals a tooltip showing the stem, rank, and trend value.

KKcnarf

84% match

Loading thumbnail…

d3-beeswarm plugin

This example demonstrates the d3-beeswarm plugin, which arranges one-dimensional scatter plots into closely-packed, non-overlapping points. It uses a dedicated one-pass algorithm rather than d3.force layout to avoid disrupting data ordering or requiring iterative equilibrium. The visualization shows word-stem trends from a CSV dataset, rendered as SVG circles with color encoding by rank, and includes interactive controls for sorting, orientation, radius, and extreme-value handling strategies. The plugin’s `d3.beeswarm()` API distributes points along an axis while freeing the perpendicular coordinate to meet the non-overlapping constraint.

KKcnarf

83% match

Loading thumbnail…

Beeswarm plot

A beeswarm plot visualizes the distribution of 300 sampled values by arranging circles along a horizontal axis, with vertical positions reflecting each value. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to position the circles, while d3.scaleOrdinal assigns categorical colors. The simulation updates circle coordinates via a tick handler, rendering the final layout as SVG elements.

PPragyagarg

82% match