Skip to main content
SimilarExport ZIP
100%

Beeswarm v2

✓ Published2🌍 Public
Mmaxthamt
Last edited Jul 29, 2022
Created on Jul 29, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Beeswarm -pruebas update

A beeswarm chart displays 377 Chilean sociology and information science research projects funded by Fondecyt from 2010 to 2020, with circles colored by university. Hovering reveals project title, year, university, and lead researcher. The visualization uses d3.forceSimulation for collision-based layout, d3.scaleTime for the x-axis, and d3.scaleOrdinal for color encoding, rendering as SVG with data loaded from CSV and JSON sources.

Mmaxthamt
90% match
Loading thumbnail…

Beeswarm -pruebas update-botones

This visualization displays 377 research projects funded by Fondecyt in Chile, grouped by sociology and information sciences, with each circle representing a project positioned along a time axis from 2010 to 2020. Interactive buttons filter projects by Fondecyt Regular, Iniciación, or all types, while hovering over circles reveals details about the year, university, lead researcher, and project title. The chart uses d3.forceSimulation with forceX and forceCollide to arrange overlapping circles, d3.scaleOrdinal for color encoding by university, and d3.scaleTime for the horizontal axis. Data comes from ANID via GitHub-hosted JSON and CSV files, rendered as SVG with a custom tooltip and legend.

Mmaxthamt
87% 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
83% 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
80% 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
79% 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.

深深度碎片
79% 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
79% 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
78% match