Skip to main content
SimilarExport ZIP
100%

International football results

✓ Published0🌍 Public
Llynz09
Last edited Sep 27, 2020
Created on Sep 27, 2020
Forked from Hello VizHub

The visualization shows the number of international football matches per year from 2010 to 2020, with lines colored by tournament type. It uses Vega-Lite’s `markLine` to aggregate and count matches over time, encoding the date field on the x-axis and the count of games on the y-axis. The data is loaded via `d3.csv` from a gist containing international football results. The chart is rendered with Vega-Lite’s API and Vega’s renderer, while a custom config adjusts axis and label styling for readability.

AI-generated description

The line chart shows the number of different types of competitions from 2010 to 2020. Data:International football results.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sketch2 of football results

This visualization shows the frequency of international football matches by year, broken down by tournament type, using a stacked bar chart. The bars reveal that events like the AFC Asian Cup occur more often in non-World Cup years, while other competitions vary by season. The visualization is built with d3.v5 and Vega-Lite, loading data from a CSV file via d3.csv, and renders the chart using Vega’s SVG renderer. The tooltip handler provides interactive details, and the chart is configured with custom fonts and colors from a shared config file.

Llynz09
81% match
Loading thumbnail…

Sketch2 of football results

This visualization shows the frequency of international football matches by year, broken down by tournament type, using a stacked bar chart. The bars reveal that events like the AFC Asian Cup occur more often in non-World Cup years, while other competitions vary by season. The visualization is built with d3.v5 and Vega-Lite, loading data from a CSV file via d3.csv, and renders the chart using Vega’s SVG renderer. The tooltip handler provides interactive details, and the chart is configured with custom fonts and colors from a shared config file.

Llynz09
81% match
Loading thumbnail…

International football games with selectable countries

This map visualizes international football games from 2010 to 2020, with countries colored by the number of matches played. Users can pan and zoom using d3.zoom, and click on individual countries to highlight them or dim the rest of the map. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render world boundaries from TopoJSON data, while match counts come from a Kaggle CSV dataset. A color legend with d3.scaleSqrt and scaleLinear controls the color encoding, though hovering to display exact counts remains incomplete.

Llynz09
76% match
Loading thumbnail…

Number of football games with an Interactive Color Legend

This scatterplot shows the number of football games per tournament type between 2010 and 2020, with each circle representing a game and color encoding tournament category. An interactive color legend lets users hover over a tournament type to highlight only its games while fading others. The visualization uses React with D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `csv` for data loading. International football results data are rendered as SVG circles with axes and a responsive legend.

Llynz09
74% match
Loading thumbnail…

International football games around the world

This example visualizes cities that hosted international football games between 2010 and 2020 on a world map. It shows the geographic distribution of match locations using red circles, with the map rendered as a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries come from World Atlas TopoJSON, with graticules and a light blue sphere for context. City data is loaded from a CSV file listing coordinates and match counts, while circle sizing uses d3.scaleSqrt. The visualization is built with React and D3 v5, rendering to SVG.

Llynz09
74% match
Loading thumbnail…

International Football Games Across the World

A world map displays circles marking cities that hosted international football games between 2010 and 2020, with circle size proportional to the square root of the game count per city. Data comes from a Kaggle-derived CSV. The visualization uses D3 with a `d3.geo.equirectangular` projection and `d3.geo.path` for rendering country boundaries from TopoJSON. Pan and zoom are implemented via `d3.behavior.zoom`. Hovering over a circle reveals a tooltip with the country, city, and total games.

Llynz09
72% match
Loading thumbnail…

Vega-Lite FLights by Country

This visualization shows the number of flights per country as a bar chart, with each bar colored by country and sized proportionally to the flight count. It uses the Vega-Lite API to encode the data, with country on the x-axis and an aggregated count of flights on the y-axis, displayed as bars with a fixed size and full opacity. The data is loaded asynchronously via d3.csv from a raw GitHub dataset, and the chart is rendered to SVG using the Vega-Lite runtime with a custom config for axis styling and tooltip support.

Mm1k3yp
69% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

AAtharvap2000
69% match