World Cup

Personal Project

2024

An interactive global map visualizing FIFA World Cup data from 1930 to 2014 using D3.js and GeoJSON.

World Cup Hero

Company: Personal Project

Date: 2024

Tech: D3.js, GeoJSON, SVG, JavaScript

Roles: Data Visual Engineer

Highlights: Built with vanilla JS and D3, SVG viewBox for responsive maps, Smooth transitions between tournament years

Methods: D3 rollups & nesting, D3 transitions & scales, GeoJSON map rendering, Interactive tooltips

Global Map with Match Highlights

Global Map with Match Highlights

The app renders a full world map using GeoJSON and overlays match locations with animated circles. Country colors change dynamically based on tournament winners.

Animated Data Exploration

Animated Data Exploration

Each year is selectable, triggering D3 transitions that update map visuals. Match attendance influences circle sizes. Transitions are powered by D3 scales and SVG updates.

Responsive & Interactive

Responsive & Interactive

SVG containers scale gracefully using viewBox and preserveAspectRatio. Tooltips provide data insights on hover, and users can explore via year filters or match clusters.