Skip to main content
SimilarExport ZIP
100%

Bubble Plot D3

✓ Published0🌍 Public
SShazil Taqi
Last edited Feb 27, 2024
Created on Feb 26, 2024
Forked from HTML Starter

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`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task4-Bubble chart

This bubble chart visualizes FIFA World Cup data from 1930 to 2014, plotting each host country as a circle whose position reflects the tournament year and total attendance, while the radius encodes the number of goals scored. The chart uses d3.csv to load the data, d3.scaleSqrt for the radius mapping, and d3.scaleOrdinal with d3.schemeCategory10 for circle colors. SVG circles and text labels are rendered via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft. The visualization includes country labels positioned above each bubble.

Sshanmukhivasa@my.unt.edu
85% 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
84% 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
83% 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
82% match
Loading thumbnail…

Task4

This bubble chart visualizes the correlation between the number of goals scored, the year, and attendance for FIFA World Cup tournaments from 1930 to 2014. Each circle represents a tournament, with its x-position indicating the year, y-position showing the average goals scored, and radius scaling with attendance. The chart uses D3.js v7 with SVG rendering, employing `scaleLinear` for axes and bubble size, `scaleOrdinal` for color mapping, and `interpolateTurbo` for the color palette. Interactive tooltips display the country name on hover, with animated transitions for showing and hiding the tooltip. The visualization includes a legend for attendance values and color-coded country labels.

Sshanmukhivasa@my.unt.edu
81% match
Loading thumbnail…

A7 SteamGraph

This visualization presents a streamgraph of FIFA World Cup data, showing how metrics like goals scored, team count, games played, and attendance (in millions) shift across tournament years. The stacked area chart uses the d3.stack() layout with a wiggle offset to vary the baseline, making each layer’s fluctuations visible. Color-coded layers correspond to a legend on the right. The code loads CSV data via d3.csv, computes the stacked series, and renders the result as SVG paths using d3.area(). Axes, a color scale from d3.schemeTableau10, and interactive tooltips are also implemented.

SShazil Taqi
81% match
Loading thumbnail…

A7 Multi Line Chart

This multi-line chart visualizes FIFA World Cup goals scored across different tournament years, with each line representing a distinct number of teams participating. The chart uses SVG rendering with D3.js v7 to draw lines and circle markers for individual data points, while a color legend distinguishes team counts. Built with React, the visualization reads from a CSV dataset and includes interactive tooltips on hover. Axes are labeled for year and goals scored, with the legend oriented horizontally at the bottom. The implementation leverages D3 scales, line generators, and the d3-legend library for the color key.

SShazil Taqi
79% match
Loading thumbnail…

A6 BAR CHART

This D3.v7 bar chart visualizes total goals scored in each World Cup year, using a sequential blue color scale where darker bars indicate higher goal counts. The chart loads its data from a CSV file hosted on GitHub, and renders bars as SVG rectangles with rotated x-axis labels for year readability. A legend on the right includes a linear gradient swatch with tick labels, while the color scale is defined via `d3.scaleSequential` and `d3.interpolateBlues`. The code also employs `d3.scaleBand`, `d3.scaleLinear`, and standard axes through `d3.axisBottom` and `d3.axisLeft`.

SShazil Taqi
76% match