International Football Games Across the World

100%

International Football Games Across the World

✓ Published0🌍 Public

Last edited Oct 29, 2020

Created on Oct 23, 2020

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.

AI-generated description

A visualization constructed here shows the international football games between 2010 to 2020.

The data from Kaggle: International football games.

I have finished these functions : Zoom in/out, Tooltips, Hover over the data point for additional data.

MIT Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

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.

Llynz09

72% match

Loading thumbnail…

Cities on a Globe

An interactive globe displays pink circles for cities with populations over 100,000, sized by population and hoverable for tooltips. Users can drag to rotate the globe via `d3.drag` and zoom with `d3.zoom`, which adjusts an orthographic projection’s scale. The visualization draws country boundaries from TopoJSON `world-110m` and `world-50m` files, using `d3.geoPath` to project shapes and city coordinates, while switching resolution during rotation. City data comes from preprocessed GeoNames CSV, and tooltips are generated with `d3-tip`.

KKusum Naithani

72% match

Loading thumbnail…

circles on the map

This visualization displays a world map with countries colored green or red based on data from a CSV file, indicating a binary attribute for the year 2020. The map uses the D3.js library with a `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features. TopoJSON data from the visionscarto-world-atlas is merged with the CSV data, and an SVG path is generated for each country. Zoom functionality is enabled via `d3.zoom`.

Nntech9613

71% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, using a natural Earth projection with circles sized by population at each country’s centroid. Countries with missing data appear in light red, while mapped regions are gray and populating circles use a teal fill. The map supports zooming via d3.zoom, and the code employs d3.geoPath for rendering country boundaries, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for the color legend. Data comes from a CSV file joined to TopoJSON world geometries, with both size and color legends implemented as reusable D3 modules.

Ffbudwill

71% match

Loading thumbnail…

Points on a World MAP

This visualization displays the world’s cities as small circles positioned on an equal Earth projection, with country boundaries drawn from TopoJSON and a plain gray sphere backdrop. The map itself is rendered using D3’s `geoEqualEarth` and `geoPath`, while city coordinates are projected into screen space and drawn as SVG circles. The data comes from a CSV of world cities, and the example intentionally mixes a polished geographic base with minimalist, unlabeled point marks.

Zzyniax

71% match

Loading thumbnail…

Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 using circles sized by population. Users can pan and zoom the orthographic projection. The visualization renders country borders from world-atlas TopoJSON data and city coordinates from a Geonames CSV file. It leverages d3.geoOrthographic, d3.geoPath, d3.scaleSqrt, and d3-tip for tooltips, with d3.drag and d3.zoom handling interaction.

CCurran Kelleher

71% match