D3.js author driven viz

100%

D3.js author driven viz

✓ Published0🌍 Public

Last edited Feb 9, 2017

Created on Feb 9, 2017

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.

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

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…

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…

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

77% match

Loading thumbnail…

Untitled

This interactive visualization uses D3.js v7 to display World Cup team statistics from a CSV file as circles arranged in a row, with team names labeled beneath each circle. A control panel presents buttons for different data attributes such as wins, losses, points, and goals, and clicking a button uses `d3.scaleLinear` to map that attribute’s value to the circle radius via `.attr("r", ...)`. The circles initially render at a fixed size, then resize dynamically based on the selected metric, with CSS classes styling active and inactive states.

Nnicolekevans

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

76% match

Loading thumbnail…

D3.js in action - Section 1 - Ch 3

This example visualizes World Cup team statistics across multiple metrics, with each team represented as a circle positioned along a horizontal axis. Clicking a button adjusts the circle radii and fill colors to reflect the selected attribute, while hovering highlights teams from the same confederation. The visualization uses D3.js v6 with SVG transitions to animate changes, and employs scales such as `d3.scaleQuantize` and `d3.scaleLinear` to map data values to colors and sizes, with color interpolation via `d3.interpolateHsl`. Data comes from a CSV file containing team performance records.

AAlbert

76% match