International football games with selectable countries

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.

88% match

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.

87% match

Players by Country

This interactive dashboard combines a choropleth map with a scatter plot to visualize international football (soccer) players by country. The map colors nations by win percentage, while the scatter plot displays each country’s tournament appearances against wins, with point size encoding population and color indicating continent. Built with React and D3 v6, the visualization uses `d3.geoEqualEarth` for map projection, `d3.geoPath` for drawing country boundaries, and `d3.scaleLinear` and `d3.scaleOrdinal` for encoding data. An SVG-based tooltip provides additional detail on hover.

SStuart Sessions

79% match

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.

Map with Selectable Countries

This interactive map colors countries by economic classification using a spectral color scale. Users can click a country to highlight it while dimming all others, with the legend providing a color-coded key that is also clickable for filtering. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering, TopoJSON data from the World Atlas, and an SVG canvas. Zoom and pan functionality is implemented via D3's `zoom` event, with country coordinates sourced from TSV data.

Wwenleicao

Map with Selectable Countries

This interactive world map uses a choropleth encoding to visualize country-level data, tinting each nation dark blue based on values from the UN Population Estimates 2017 dataset. A click on any country triggers a smooth d3.zoom animation that magnifies the selection, while a color legend allows filtering of data categories. The visualization, rendered as SVG, is built with d3.geoPath and d3.geoNaturalEarth1 projections, all managed through the d3.selection API.

DDolbyref113

International football results

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.