Players by Country

100%

Players by Country

✓ Published0🌍 Public

Last edited May 7, 2024

Created on May 6, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

79% match

Loading thumbnail…

Fork of Dashboard - Final Project - FIFA 19 Dataset

This dashboard visualizes the FIFA 19 dataset, showing player distribution across countries and clubs. A world map displays the number of players per nationality using circles sized with `d3.scaleSqrt`, with zoom and brushing interactions. A Sankey diagram connects nationalities to clubs, using `d3.sankey` with draggable nodes and tooltips. The visualization uses React, D3 v4, and TopoJSON, rendering as SVG.

PPriscylla Silva

79% match

Loading thumbnail…

Dashboard - Final Project - FIFA 19 Dataset

This dashboard explores the FIFA 19 dataset, integrating a world map with bubble markers, a Sankey diagram, and a scatterplot to reveal player distributions. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with topojson data, scaling circle radii by player count. The Sankey chart, built with the `d3.sankey` layout, visualizes flows from nationality to club. The scatterplot displays player overall rating against wage, supporting brush-based selection to highlight individual players.

SSitanshu Rupani

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

76% match

Loading thumbnail…

Data viz of 2018 football top scorers

This interactive scatter plot visualizes data on the top football scorers of 2018, comparing the number of goals scored against matches played. The data is filtered to show only players from La Liga, Serie A, and Bundesliga. Player names are revealed on hover, while the color of each point indicates the league, and the point size encodes the average shots per match. Built with React and D3 v5, the visualization uses D3's `scaleLinear` for the axes, `scaleSqrt` for sizing, and `scaleOrdinal` with `schemeCategory10` for the categorical color legend.

NNwaegerue Chinemerem

75% match

Loading thumbnail…

Viz_9

This interactive scatter plot displays FIFA player statistics across six national teams (ARG, BRA, ESP, FRA, GER, ITA), letting users compare any two attributes via dropdown menus. The visualization uses React with D3 v5 scales (d3.scaleLinear) to map data to SVG circles, with tooltips showing x-values. Data loads from a CSV via d3.csv. Users can dynamically switch axes, and the plot renders with custom axis components and formatted tick labels using d3.format.

NNikithakatta30

74% match

Loading thumbnail…

Spider Chart _ FIFA

This interactive visualization compares FIFA player statistics between two national teams using a spider chart and a side-by-side data grid. Users select countries and attributes via dropdown menus, with the radar path and grid values updating accordingly. Hovering over data points reveals a tooltip with exact values. The visualization uses D3 scales and line generators, React state management, and renders all marks as SVG elements. The dataset aggregates player attributes like overall rating, potential, and specific skills.

Sstephanie0215

74% match

Loading thumbnail…

WC Data Viz

This visualization presents World Cup goal totals for national teams, combining a brief bar chart preview of the top nine countries with a compact table listing all remaining teams. The bar chart uses a simple SVG rectangle appended to the page, while the table groups countries with identical goal counts into single rows. Built with React and D3 v6, the code uses `d3.select` to manipulate the SVG and table elements, and the data is sourced from a local `data.js` file. The table displays goals and country names, with hover effects enlarging rows via CSS.

GGavin Sykes

74% match