Skip to main content
100%

comments for our World Cup API!

✓ Published0🌍 Public
Aachalvs
Last edited Jul 6, 2018
Created on Jul 6, 2018

This visualization displays the daily status of FIFA World Cup 2018 matches, including scores, winners, and scheduled local times for upcoming games. It uses a custom JavaScript API endpoint that takes an optional US phone number for schedule alerts and handles validation errors. The rendering relies on d3.forceSimulation for node positioning and d3.geoPath for geographic mapping, with Canvas getImageData for pixel-level interactions. The data source is a gist by achalvs, and the code demonstrates how API responses drive the visual representation of match outcomes and time-zone-aware scheduling.

AI-generated description

Similar vizzes

Loading thumbnail…

our final API!

This example displays the daily schedule of FIFA World Cup 2018 matches, showing each game’s status (SOON, LIVE, or FINAL), the local time in GMT, and the scores for both teams, including penalty shootout results and the match outcome. It retrieves data from the worldcup.sfg.io API, processes the JSON response using JavaScript, and formats timestamps with the Moment.js library. The code uses the Request module for HTTP calls and the StdLib API to optionally send the schedule as a text message via a phone number.

Aachalvs
81% match
Loading thumbnail…

snippet of data from https://worldcup.sfg.io/matches/today

A snippet of live World Cup match data from the `worldcup.sfg.io` API displays a completed quarter-final between Uruguay and France, listing venue, weather, attendance, and final score. The visualization uses d3.forceSimulation to position team nodes and d3.geoPath to render a simple map backdrop, with match details shown as text labels. The code highlights France as the winner with a distinct color and includes a timeline of the match’s status.

Aachalvs
70% match
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
70% match
Loading thumbnail…

Goals at the 2010 World Cup

The visualization displays all goals scored during the 2010 World Cup, showing each goal as a record with the scoring team, scorer, receiving team, minute, and date. It uses a custom configuration with summaries positioned in left, right, middle, and bottom panels, and a record display that lists scorers sorted by date. The code loads data from a Google Spreadsheet via a gdocId and uses a force-directed layout through `d3.forceSimulation` to position the records, with an interactive zoom on details.

Aadilyalcin
68% match
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
68% match
Loading thumbnail…

Fifa World Cup Data

This example displays the raw contents of a Fifa World Cup 2022 matches dataset as formatted JSON text in a `<pre>` element. The visualization initially fetches the CSV file from a GitHub gist, parses it using `d3.csvParse`, and then renders the resulting array of objects. It uses D3 v7's `select` and `join` methods to manage the display. The dataset includes match statistics such as assists, possession, crosses, cards, passes, and fouls, sourced from Kaggle.

MMartha Cash
67% 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
66% match
Loading thumbnail…

WC Data Viz

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.

GGavin Sykes
65% match