Skip to main content
100%

D3.js author driven viz

✓ Published0🌍 Public
Aadry34160
Last edited Feb 9, 2017
Created on Feb 9, 2017

This visualization plots World Cup match attendance from 1934 onward as a scatterplot, with date on the x-axis and attendance on the y-axis. Each circle represents a match, with red and enlarged circles indicating games where the host nation was one of the competing teams, while blue smaller circles represent all other matches. The chart includes a legend distinguishing home-team games from others, along with labeled axes. Data is loaded from a TSV file and rendered using D3.js for the SVG layout and scales, while dimple.js is loaded but not used for the chart construction. The visualization highlights attendance patterns over time and emphasizes matches involving the host country.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3.js author driven viz

This visualization plots World Cup match attendance over time, with each match represented as a circle positioned by date on the x-axis and attendance on the y-axis. Red, larger circles indicate matches involving the host country’s team, while blue circles represent all other matches. A legend distinguishes home-team matches from others. The chart uses D3.js to load and parse a TSV dataset and to render the SVG axes and circles, with a custom D3 time scale and linear scale mapping dates and attendance values.

Aadry34160
96% match
Loading thumbnail…

Mercator Map with Bubbles

A world map rendered as a light blue Mercator projection with black country borders, overlaid with orange bubbles that summarize attendance at World Cup matches by year. Each bubble is positioned at the average coordinates of the matches in that year, and its size encodes the total attendance using a square-root scale. The visualization uses D3 v3 to load GeoJSON country boundaries and a TSV dataset of match locations, aggregates attendance by year via nested rollups, and plots the resulting bubbles on an SVG map.

Aadry34160
79% match
Loading thumbnail…

Mercator Map with Bubbles

This visualization displays World Cup match attendance on a Mercator projection world map. The geographic outlines are rendered as SVG paths from a GeoJSON file, with each country filled in light blue. Attendance data from a TSV file is grouped by year, and for each year, the geographic coordinates of host cities are averaged to determine a central point. The total attendance for that year is then represented as an orange bubble, with its radius scaled using a square-root scale proportional to attendance. Bubbles are semi-transparent with black strokes, allowing viewers to compare attendance across World Cup years at a glance. The visualization uses a fixed map scale and translates the projection to center the map within the SVG canvas. Data is loaded asynchronously using D3 v3, with geographic boundaries drawn from a GeoJSON world map and attendance values parsed from a tab-separated file. The bubble positions are calculated as the mean projected coordinates of the host cities for each tournament year.Mercator Map with Bubbles is an SVG-based D3 visualization that combines a light-blue Mercator world map with orange, semi-transparent bubbles. Each bubble represents total attendance for a World Cup tournament year, positioned at the average coordinates of the host cities. Bubble size is scaled by the square root of attendance, allowing quick comparison of relative magnitudes across tournaments. The map is rendered using D3 v3 and data from a GeoJSON world map and a TSV of World Cup attendance.

Aadry34160
79% 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
78% 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
78% match
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
77% 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
77% 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
76% match