Custom Beeswarm IV (handle unsorted data)

100%

Custom Beeswarm IV (handle unsorted data)

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jun 2, 2016

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.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/f76794f5590563a2a4347a324ac7c099'>block</a> is a continuation of a <a href='http://bl.ocks.org/Kcnarf/921b2f038327dd0ca55213e4ce8bcdb1'>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/921b2f038327dd0ca55213e4ce8bcdb1'>previous block</a>:

this algorithm no longer requires the circles to draw to be x-based sorted. The main 'drawBeeswarm' function draws each circle one after each other, as they are listed in its input array.
this algorithm is ~4 times slower because finding x-based possible colliders is more expensive (previously, gathering x-based possible colliders was easier because circles were arranged in a certain order)

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

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

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

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

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

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

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

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

78% match