Beeswarm (Most Broken)

100%

Beeswarm (Most Broken)

✓ Published0🌍 Public

Last edited Sep 17, 2016

Created on Sep 17, 2016

A beeswarm plot visualizes the date each bumblebee was spotted in a dataset from BeeSpotter, with each bee represented as a small emoji icon. The icons are positioned along a time axis, using d3.forceSimulation with forceX and forceCollide to arrange points without overlap. A Voronoi overlay, generated via d3.voronoi, improves hover interaction by expanding the clickable area around each icon, displaying identifying information in a tooltip. The visualization is rendered as SVG with D3 v4.

AI-generated description

A static beeswarm plot implemented using d3-force’s collision constraint. A Voronoi overlay improves hover interaction.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320'>Beeswarm</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/55811a4111d5d1fad25937fb51436671'>Beeswarm (Broken)</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/d5ac5608467c9cea983018fda46a39f0'>Beeswarm (Less Broken)</a>

gpl-3.0 Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Beeswarm (Broken)

This example visualizes the hierarchical structure of the Flare data set as a beeswarm plot. It uses a custom emoji, a honeybee, to represent each data point, with a voronoi overlay that highlights the nearest bee in red when hovered. The visualization is built with D3 v4, employing `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to position the points, and `d3.voronoi` to generate the interactive cells. The x-axis uses a log scale to display the data values from the provided CSV file.

BBBischof

88% match

Loading thumbnail…

30.Beeswarm

A beeswarm plot distributes circular marks along a logarithmic x-axis to show the distribution of file sizes from the flare dataset, with a force simulation stacking points vertically to prevent overlap. A Voronoi overlay expands the hover target for each point, displaying a tooltip with the file’s ID and value. The visualization uses d3.forceSimulation with d3.forceX, d3.forceY, and d3.forceCollide, rendered as SVG, with a d3.axisBottom log scale and d3.voronoi polygons for interaction.

深深度碎片

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

84% match

Loading thumbnail…

Fork 2 of beeswarm

A beeswarm plot uses a force-directed layout to visualize the distribution of honey bee colony loss percentages across U.S. states in 2015. Each circle represents a data point, positioned along a logarithmic x-axis according to its value, with a Voronoi tessellation overlay for interactive hover detection. The visualization employs d3.forceSimulation with forceX, forceY, and forceCollide to arrange points, and d3.voronoi for cell boundaries. Data originates from data_2015.csv, rendered as SVG with React and d3.v4.

Rryan-dirajlal

83% 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 visualizes the percentage of honeybee colonies affected by various stressors across U.S. states in 2015. Each circle represents a state’s reported value for a stressor category, colored by type (e.g., Varroa mites, pesticides) using a color scale. The horizontal axis uses a logarithmic scale. The layout is computed with `d3.forceSimulation`, applying forceX, forceY, and forceCollide to arrange points, while `d3.voronoi` adds hover regions. Data comes from a CSV file, rendered as SVG.

Aamrubal

81% match