Beeswarm + maintain x-position of nodes

100%

Beeswarm + maintain x-position of nodes

✓ Published0🌍 Public

Last edited Jul 21, 2016

Created on May 4, 2016

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.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/d4a745960538e937dcde13f61e9893f1'>block</a> is a continuation of a <a href='http://bl.ocks.org/Kcnarf/91c5e84bed1ba6b1541deaa5d5f4f258'>previous one</a>. The main difference resides in the version of D3 (eg. v3.5 VS v4-beta).

I was not totally satisfied of my previous block because nodes could overlap, making hovering of individual nodes possibly tedious. With the new/future release of D3 v4, this can be handled easily with the colision detection feature embeded in the new version of the force layout.

By the way, there is still some overlapping. Playing with forces' strength and/or radius/distance may help ...

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v4-beta)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
This <a href='http://bl.ocks.org/Kcnarf/d4a745960538e937dcde13f61e9893f1'>block</a> is a continuation of a <a href='http://bl.ocks.org/Kcnarf/91c5e84bed1ba6b1541deaa5d5f4f258'>previous one</a>

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

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

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

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

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

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

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

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

82% match