Skip to main content
100%

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

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

comments for our World Cup API!

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.

Aachalvs
70% match
Loading thumbnail…

mod Pitch

This interactive visualization maps every shot taken during the 2018 FIFA World Cup final between France and Croatia onto a scaled soccer pitch. Each shot is represented by a circle and an arrowed line showing its start and end location, colored by team. Clicking a shot reveals a freeze frame of player positions on the pitch, while hovering over a legend entry filters shots by team. Built with D3 v5, it uses `scaleOrdinal`, SVG markers for arrows, and a custom color legend with interactive click and opacity filtering.

MMihir Sawant
67% 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…

mod Pitch2

The visualization shows shot locations and arrow trajectories for the 2018 FIFA World Cup final between France and Croatia on a scaled soccer pitch. Clicking a shot reveals its freeze-frame player positions. A slider filters shots by match minute, and clicking the legend toggles team visibility. Built with D3 v5, it uses SVG rendering, custom modules for pitch drawing and shot plotting, and drag interactions to filter data.

MMihir Sawant
66% 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
66% 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
65% match
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
64% 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
64% match