International football games around the world

100%

International football games around the world

✓ Published0🌍 Public

Last edited Oct 22, 2020

Created on Oct 22, 2020

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.

AI-generated description

A world map showing cities that held the international football games between 2010 to 2020. International football games.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

World Map

This visualization displays a world map with city locations overlaid as semi-transparent dots. The map uses the Natural Earth projection via `d3.geoNaturalEarth1`, with graticules, land polygons, and country boundaries rendered through `d3.geoPath` and TopoJSON data from the world-atlas package. City coordinates from a CSV file are projected and drawn as SVG circles. The React component manages data loading with custom hooks, while D3 v5 handles geo and CSV parsing.

BBhavanaGIrni

77% match

Loading thumbnail…

Cities on the World Map

This visualization displays cities as semi-transparent circles on a natural Earth projection, with circle size encoding population using a square-root scale. It renders world land masses, graticules, and country interiors via `geoPath` and `geoNaturalEarth1`, while city positions are projected from latitude and longitude coordinates. Data comes from a CSV of world cities loaded with `d3.csv`, and the world atlas TopoJSON is parsed using `feature` and `mesh` from topojson. React manages the component state, with D3 version 7 providing all geographic and scaling utilities.

KKolezhannochka

76% match

Loading thumbnail…

world map w/ cities

This example presents a world map visualization of cities with populations exceeding 50,000. It uses a React framework with SVG rendering, employing d3-geo-projection’s geoNaturalEarth1 projection and d3-geo’s geoPath to draw landmasses, country boundaries, graticules, and geographic lines. City locations are plotted as circles from Simplemaps’ World Cities Database, while country and land data come from World Atlas TopoJSON. The visualization includes hover tooltips showing country names, with styling applied through CSS.

Zzach b.

76% match

Loading thumbnail…

Cities of the World

Cities of the World uses a natural Earth projection to display global population data as proportional circles. D3’s geoNaturalEarth1 and geoPath render landmasses, graticules, and sphere outlines, while a sqrt scale maps city populations to circle radii. The visualization loads world atlas topology from world-atlas and city CSV data, overlaying semi-transparent dots atop a muted map. React manages the SVG rendering, with d3.v5 providing the underlying geospatial and scaling utilities.

Sstevensmithj

76% match

Loading thumbnail…

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

76% match

Loading thumbnail…

World city population

This visualization displays a world map with dots representing cities, sized by population. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country borders rendered as SVG paths from TopoJSON data. City coordinates are projected using the same projection function, and each city is drawn as a small semi-transparent circle. The data comes from a CSV file loaded with `d3.csv` in React, and the visualization is built with React components, D3 v5, and SVG, styled with a clean, minimalist aesthetic.

Jjabowen2020@gmail.com

76% match