Fork of Bubble Chart in D3

100%

Fork of Bubble Chart in D3

✓ Published0🌍 Public

Last edited Feb 23, 2024

Created on Feb 23, 2024

This bubble chart compares Lionel Messi’s goals and assists across seasons from 2004 to 2022, with each circle sized by the square root of goals and colored by year. It uses d3.csv to load the data, d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal for color mapping. The SVG rendering includes axis labels and hover effects that alter circle strokes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Plot: Messi vs Messi

This bubble plot compares Lionel Messi’s goals and assists across seasons, with each bubble representing a year. Bubble size encodes the same metric as the Y-axis, while color represents the season. The chart uses D3 v4 with an SVG renderer, a linear scale for axes, a square-root scale for bubble radius, and a categorical color scale. Hovering reveals a tooltip with year details, and hovering a bubble dims all others to highlight the selected season.

SSimon Hackbert

87% match

Loading thumbnail…

Bubble Plot D3

A bubble chart displays FIFA World Cup data, mapping tournament years on the x-axis, the number of participating teams on the y-axis, and bubble size to total attendance. Bubble color encodes the number of games played, using a viridis sequential color scale. The D3 v7 code creates an SVG with linear and band scales, square-root scaling for radii, and includes axes, titles, and legends. Data is loaded from a remote CSV file via `d3.csv`.

SShazil Taqi

75% match

Loading thumbnail…

Dot Plot: Goals: MessiVRonaldo

This dot plot compares Lionel Messi and Cristiano Ronaldo’s goal totals by season, with each year on the y-axis and a grey line connecting the two players’ goal counts. The visualization overlays the plot on a football pitch diagram, using SVG rectangles and lines for field markings. Built with D3 v4, it uses `d3.scaleLinear` and `d3.scaleBand` for axes, while circles are colored green for Messi and purple for Ronaldo. Clicking the player labels toggles the corresponding data points’ opacity via `d3.selectAll` and `.transition()`. Data is loaded from a CSV via `d3.csv`.

SSimon Hackbert

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

72% match

Loading thumbnail…

D3: A simple packed Bubble Chart

This packed bubble chart visualizes the market values of 2018 World Cup teams, with each bubble sized proportionally to a player's transfer value and colored by playing position. The D3 v4 visualization, built with SVG, uses a bubble layout to pack player circles by value, while an interactive sidebar highlights countries. A large title and total squad value provide context, and clicking is enabled for further exploration.

FFootyNumb3rs

72% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA

72% match

Loading thumbnail…

Fork of bubblechart

This interactive bubble chart allows users to explore a multivariate dataset by selecting which numeric columns to map to the x-axis, y-axis, and bubble radius, and which categorical column to use for color encoding. The visualization updates dynamically, using D3.js v7 scales and SVG circles to render the data. Dropdown menus filter numeric and categorical columns from the loaded CSV file, which is fetched from a GitHub repository. The chart employs `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

LLayaMyadam@my.unt.edu

71% match

Loading thumbnail…

D3: A simple packed Bubble Chart

This example builds a packed bubble chart from player valuation data for 2018 World Cup teams. D3’s `d3.pack()` layout positions circles (bubbles) sized by player value, colored by playing position via ordinal scales. The visualization includes an interactive sidebar: clicking a country filters the dataset and displays a ranked bar breakdown of that country’s player values. Hovering and clicking are enabled through pointer events on the main graphic. The SVG rendering uses a clean background, large typography for the title and total value, and a muted color palette to emphasize the hierarchical structure of team worth. The code loads data from an external JS file and uses PapaParse and RequireJS to prepare the dataset.

FFootyNumb3rs

71% match