Beeswarm Chart

100%

Beeswarm Chart

✓ Published0🌍 Public

Last edited Jul 25, 2021

Created on May 20, 2021

This beeswarm chart visualizes global suicide statistics, with each circle representing a country positioned along a horizontal axis based on either total deaths or per-capita deaths. Users can toggle between linear and logarithmic scales, filter continents via checkboxes, and hover over points to view tooltips with detailed values. The visualization uses D3 v5's `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to arrange the circles, and loads data from a CSV file. Color encoding distinguishes continents, with animated transitions between different measurement views.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Beeswarm Chart

This beeswarm chart visualizes WHO suicide statistics, showing each country as a circle positioned along a horizontal axis by either total deaths or per-capita deaths, with color encoding continent. Interactive buttons switch between linear and logarithmic scales, while checkboxes toggle continent visibility. The visualization uses d3.forceSimulation with forceX, forceY, and forceCollide to arrange circles into clusters, and d3.axisBottom renders the x-axis. The React-built interface animates transitions between chart states, with tooltips appearing on hover.

Mmaxthamt

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

78% match

Loading thumbnail…

Fork of beeswarm

This visualization displays a beeswarm plot of honey bee colony loss percentages across different U.S. states in 2015, with each circle representing a reported cause of loss positioned along a logarithmic x-axis. The chart uses d3.forceSimulation with forceX and forceCollide to arrange the data points, while d3.voronoi polygons provide hover detection and interactive highlighting. The code uses d3.csv to load data_2015.csv and renders the results as an SVG with a logarithmic scale axis.

Rryan-dirajlal

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

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

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

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

74% match

Loading thumbnail…

Beeswarm v2

This example visualizes 377 Fondecyt-funded sociology and information science projects in Chile between 2010 and 2020 as a beeswarm plot. Each circle represents a project, with its horizontal position indicating the year and color encoding the year via a color scale; hovering reveals the project title and year. The layout is computed using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, while SVG circles and axes are rendered with D3 v7. Data is loaded from a remote CSV and JSON source.

Mmaxthamt

73% match