Swarm Plot

100%

✓ Published0🌍 Public

Last edited Aug 23, 2021

Created on Aug 18, 2021

A swarm plot visualizes the transfer fees of football players, grouped by their position on the pitch. The data, sourced from a CSV file, shows each player as a circle colored by position, with the vertical axis mapping the fee in millions. This implementation uses D3 v5 to load the data and render SVG circles, with an ordinal scale for horizontal positioning and a linear scale for the vertical fee axis. The code assigns colors using `d3.scaleOrdinal` with the `schemePaired` color palette.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock

69% match

Loading thumbnail…

Scatter Plot

This example displays a scatter plot of 2018 football player data, comparing goals against shots taken. Each data point is a circle colored by the player’s league, with league-specific colors like blue for the Premier League and red for the Bundesliga. The visualization uses D3’s `scaleLinear` and `extent` to map the numeric axes, along with custom axis label rendering from the `@curran/axis-labels` library. A light gray `rect` fills the plot’s inner region, while circles are drawn with configurable radius and opacity, based on data from the `@eschuman20/footballscorers` package.

Pprint("Ayush")

68% match

Loading thumbnail…

D3: A simple packed Bubble Chart

This D3 v4 bubble chart visualizes the market values of 2018 World Cup teams, with each bubble sized by a player’s transfer value and colored by playing position. The data, loaded from a CSV via PapaParse, drives a packed layout where bubble area encodes monetary value. The visualization includes a sidebar listing players, hover and click interactions to reveal relative player values, and a title block with source notes. Built with SVG rendering, it uses ordinal color scales for positions and compresses values for display.

FFootyNumb3rs

67% match

Loading thumbnail…

CHAMPIONS LEAGUE DATA.HTML

This visualization displays the distribution of goals scored across Champions League matches, using a swarm plot to reveal clusters and outliers. It loads match data and renders circles representing individual goals, with positioning influenced by goal counts. The implementation combines D3.js force simulation for layout and D3 scales for mapping statistics to visual attributes.

BBALAJI MANDAVA

67% match

Loading thumbnail…

Gist 9e7f962de44840b48f6f27bcbe4d8cd8

This scatterplot-like visualization maps player names, positions, and scores from a team.csv dataset, encoding score on the y-axis and position on the x-axis. It uses d3.forceSimulation to position overlapping labels and nodes, with a d3.scalePoint for categorical positioning and d3.select to bind data. Each player is represented by a circle colored by position, with a text label showing their name and score. The chart renders in SVG via d3, with axes generated by d3.axisLeft and d3.axisBottom. The visualization highlights scoring distribution across positions, such as high-scoring back-rowers and fly-halves, without additional interactivity.

CConorAspell

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

67% match

Loading thumbnail…

Swarmalator

A swarm of colored circles self-organizes into dynamic patterns, with each particle's hue representing its internal phase. The simulation uses `d3.forceSimulation` to integrate pairwise interactions that combine spatial attraction with phase coupling, controlled by adjustable parameters J and K. Colors transition smoothly via an HSL mapping, while an optional temperature mode recolorings particles based on their kinetic energy using an Inferno colormap. The visualization runs on a Canvas element, rendered in real time as the swarm evolves and responds to mouse interaction.

FFrissAnalytics

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

66% match