Custom Beeswarm

100%

Custom Beeswarm

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on May 23, 2016

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.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/c13da7160e8d8f64d467df8988043d1f'>block</a> 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)

In previous blocks (<a href='http://bl.ocks.org/Kcnarf/91c5e84bed1ba6b1541deaa5d5f4f258'>1</a>, <a href='http://bl.ocks.org/Kcnarf/d4a745960538e937dcde13f61e9893f12'>2</a>), I tried the Force Layout.

Now I try to implement my own arrangement algorithm (with the secret objective that it will be faster than using the Force O_° ... and, hopefully, it is).

The resulting arrangement can be used as-is (shown in this example), or can be a good starting point before applying the Force. In this later case, final arrangement with the Force will be obtained faster than with the random default arrangment.

The algorithm is:

(hyp) circles to draw are ordered (from right to left in this example)
(init) already arranged circles AAC = [], used for (windowed) collision detection
loop1 - for each new circle to place Ci:
retain in AAC only 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 does not overlap others circles in AAC, retain y-position if it is the best till now(best = closest to x-axis, consider absolute value)
- place Ci below Ca
- if Ci does not overlap others circles in AAC, retain y-position if it is 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>

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

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

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

89% match

Loading thumbnail…

Custom Beeswarm III (perf. enhancement)

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.

KKcnarf

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

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

80% match

Loading thumbnail…

Beeswarm (With Flying Bees)

A beeswarm chart plots the Flare data set's hierarchical node values on a logarithmic x-axis. The visualization uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to arrange individual points. Each point is rendered as a bee emoji via an SVG `image` element, and after a delay, the bees animate to a new position. A Voronoi overlay, created with `d3.voronoi`, improves hover interaction by expanding the clickable area for tooltips that show the node's ID and value.

BBBischof

79% match