WC Data Viz

100%

✓ Published0🌍 Public

Last edited Apr 9, 2021

Created on Apr 8, 2021

This visualization presents World Cup goal totals for national teams, combining a brief bar chart preview of the top nine countries with a compact table listing all remaining teams. The bar chart uses a simple SVG rectangle appended to the page, while the table groups countries with identical goal counts into single rows. Built with React and D3 v6, the code uses `d3.select` to manipulate the SVG and table elements, and the data is sourced from a local `data.js` file. The table displays goals and country names, with hover effects enlarging rows via CSS.

AI-generated description

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

Similar vizzes

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

78% 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…

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

75% match

Loading thumbnail…

A7 Small Multiples

This visualization uses small multiples to compare four World Cup metrics—goals scored, teams, games, and attendance—as line charts over time. Each metric gets its own SVG chart with shared axes, making trends easy to scan. The code loads data from a CSV via `d3.csv`, parses numeric fields, and uses `d3.line` with linear scales for each chart. A color-coded legend, created with `d3.legendColor`, maps the four categories, while titles label each small multiple. The layout relies on D3 v7’s axis generators and a fixed SVG structure for consistent comparison.

SShazil Taqi

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

75% match

Loading thumbnail…

viz_2

This visualization displays the top 10 most populous countries as a bar chart, though it lacks axes and labels, making the data difficult to interpret. The bars are rendered as SVG rectangles using React’s declarative component structure, with D3’s `scaleBand` and `scaleLinear` handling the positional and length scaling. The dataset is loaded asynchronously via D3’s `csv` from a remote URL, and the chart updates once the data arrives. The code uses D3 v5 and React 16.9, with the visualization outputting directly to an SVG canvas.

HHuldahMerlinKolli

73% match

Loading thumbnail…

Dataviz 6 - Styling the bar chart

A horizontally oriented bar chart displays the ten most populous countries in 2020, with bars colored teal and axes labeled in muted gray. The visualization uses React components to render SVG elements, with `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. D3’s `csv` loader fetches the UN World Population Prospects 2019 dataset, and tick labels are formatted with `d3.format` to abbreviate values like “1.3B”. A tooltip via SVG `<title>` elements shows exact population figures on hover.

RRyAlpha

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

73% match