Custom Beeswarm & ForceLayout

100%

Custom Beeswarm & ForceLayout

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on May 24, 2016

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.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/17e82d3a3afe4a8606e48a3bff8fa50e'>block</a> is a continuation of a <a href='http://bl.ocks.org/Kcnarf/c13da7160e8d8f64d467df8988043d1f'>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

<hr/>

This block produces a beeswarm in 2 stages:

define a first arrangement using a custom algorythm (cf. <a href='http://bl.ocks.org/Kcnarf/c13da7160e8d8f64d467df8988043d1f'>previous block</a>)
then, use the ForceLayout in order to group extreme accumulations, or constraint the arrangement to a certain size

The ForceLayout is used only few times (5 iterations by default) in order to handle computation time. For comparison, with 600 points:

~1200 ms <== Force only with ~300 iterations
~ 100 ms <== custom only | extreme acc., no overlap, fast
~ 150 ms <== custom (100ms) + force with 5 iterations (50ms) |some overlap, no extreme acc., fast
~ 150ms <== Force only with ~20 iterations | cons: not so beautiful, some overlap, no extreme acc., fast

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

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

90% match

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

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

85% 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…

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

Loading thumbnail…

Beeswarm

This beeswarm plot displays the hierarchical structure of the Flare data set, encoding each node’s value as a logarithmically positioned point along the horizontal axis. The visualization employs a force-directed layout via `d3.forceSimulation`, using `d3.forceX` and `d3.forceY` to align points, while `d3.forceCollide` prevents overlap, creating a dense, non-overlapping distribution. To support hover interactions, it overlays a Voronoi diagram (constructed with `d3.voronoi`), rendering transparent cell paths that highlight the nearest circle in red on mouseover. The SVG output includes a logarithmic axis and tooltips showing each item’s name and value.

Mmbostock

78% match