Fork of beeswarm

100%

Fork of beeswarm

✓ Published0🌍 Public

Last edited Apr 27, 2022

Created on Apr 27, 2022

Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

87% match

Loading thumbnail…

Fork of beeswarm

This example visualizes heart disease data with a beeswarm plot, where each circle represents a patient positioned along a logarithmic scale based on their maximum heart rate. The circles are colored by chest pain type, with a legend identifying the categories. The layout is computed using d3.forceSimulation with forceX, forceY, and forceCollide, while d3.voronoi creates hover regions around each point. SVG rendering and the d3-legend library display the color scale.

AAishwarya Manjunath

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

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

82% match

Loading thumbnail…

Fork of Parallel Coordinate for 2018

This example visualizes honeybee colony data across U.S. states for 2018 using an interactive parallel coordinate plot rendered as SVG. The chart displays multiple quantitative dimensions—colony counts, losses, additions, and renovations—as vertical axes, with each state’s data connected as a green path. Users can brush along any axis to filter the foreground lines and highlight states whose values fall within the selected ranges. The code uses D3 v3’s `d3.csv`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.svg.brush` to build the axes, draw the polylines, and implement brushing interactions.

Rryan-dirajlal

82% match

Loading thumbnail…

Fork of Percent Bee Colony Loss by State and Year

A square for each state-year pair encodes the percentage of bee colony loss using a red color scale, with states sorted by their worst recorded loss. The visualization reveals no clear geographic or temporal trends, suggesting colony losses are randomly distributed across the US. Built with the vega-lite-api, the chart uses `markRect()` for the tiles, `fieldN` for categorization, and a custom tooltip to display state, year, and loss values. Data comes from the Bee Colony Loss3.csv file, with appearance customized via a separate config file.

Sstanemurhula

81% match

Loading thumbnail…

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes bee colony loss percentages across years, with each circle representing a state and color encoding the state name. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for the color mapping, and React components for rendering SVG axes, marks, and a color legend. Data is loaded as CSV via d3.csv from a GitHub gist, with tooltips showing loss values on hover through SVG title elements.

Bbootshine2

80% match