Skip to main content
SimilarExport ZIP
100%

Beeswarm Chart

✓ Published0🌍 Public
Mmaxthamt
Last edited Jul 22, 2022
Created on Jul 22, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Beeswarm Chart

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.

Ddanish-nix
95% 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
77% 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
77% 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…

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
76% match
Loading thumbnail…

Worldwide Suicide Map Multi-views

This interactive visualization combines a world bubble map with a bar chart to explore global suicide statistics from 1979 to 2016. Users can select a year and country through dropdown menus, which updates the map to highlight the chosen nation while filtering the bar chart to show the top 15 countries by suicide count. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering landmasses, while bubble sizes correspond to suicide numbers via a square-root scale. The bar chart employs d3.scaleBand and d3.scaleLinear, with all elements rendered as SVG within a React framework using D3 v5.

XXinting Yao
75% match
Loading thumbnail…

Worldwide Suicide Map Multi-views

This interactive visualization combines a world bubble map and a horizontal bar chart to explore global suicide rates from 1979 to 2016. Users select a year and country via dropdown menus, which highlights the chosen country on the map while the bar chart updates to show the top 15 countries with the highest suicide numbers for that year. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, with circles sized via `d3.scaleSqrt`. The bar chart is rendered with React and `d3.scaleBand`, both featuring tooltips for detailed data. The visualization sources suicide data from a CSV and country boundaries from the World Atlas TopoJSON.

CChen Ding
74% 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
74% match