Beeswarm -pruebas update-botones

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.

91% match

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.

87% match

Clase 02 - Parte 2 - D3 Fernando Becerra

This example visualizes the temporal distribution of sociological research in Chile, plotting each study as a circular mark along a time axis from its publication year, colored by research group. The visualization uses D3 v7 with a force-directed simulation (`d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide`) to position overlapping points, while a time scale (`d3.scaleTime`) and band scale (`d3.scaleBand`) map the data. Data is loaded from remote JSON and CSV sources via `d3.json` and `d3.csv`, with rendered output as SVG circles that include hover tooltips.

74% match

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

66% match

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

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.

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

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.

深深度碎片