Skip to main content
SimilarExport ZIP
100%

Mutliple connected beeswarm plots

✓ Published0🌍 Public
TThanaporn-sk
Last edited Aug 2, 2017
Created on Aug 2, 2017

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

AI-generated description

An example of how to link multiple beeswarm plots, which could be used to instead of parallel plots if the distribution across each category is important. This implementation hides the connections until a unique series is chosen, but it could be set show the connections (with some opacity) if there are trends worth showing. Uses voronoi follow click events. Based on http://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/e1f2a325793bc9e76fbfaa58ea6a6d15'>Mutliple connected beeswarm plots </a>

mit Licensed

Similar vizzes

Loading thumbnail…

Mutliple connected beeswarm plots

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

TThanaporn-sk
100% match
Loading thumbnail…

Mutliple connected beeswarm plots

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

TThanaporn-sk
100% 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
75% match
Loading thumbnail…

Beeswarm plot

A beeswarm plot visualizes the distribution of 300 sampled values by arranging circles along a horizontal axis, with vertical positions reflecting each value. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to position the circles, while d3.scaleOrdinal assigns categorical colors. The simulation updates circle coordinates via a tick handler, rendering the final layout as SVG elements.

PPragyagarg
75% 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
73% 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
73% 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
73% 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
73% match