Viz_9

100%

✓ Published0🌍 Public

Last edited May 7, 2023

Created on May 7, 2023

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.

AI-generated description

A scatter plot with menus of The fifa Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays football player statistics across six attributes (ARG, BRA, ESP, FRA, GER, ITA) from a FIFA dataset. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with react state managing the selection. The code uses d3.scaleLinear for scales, d3.extent for domains, and d3.csv to load data, rendering circles as SVG marks with tooltips via the title element. Axis components generate ticks with tick formatting using d3.format.

NNikithakatta30

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

81% match

Loading thumbnail…

Spider Chart_FIFAPlayer

This interactive spider chart compares two FIFA soccer players across six selected attributes, with a supplementary data grid displaying additional player details. Users select players and attributes from dropdown menus, while hovering over data points reveals tooltips with exact values. The visualization is built with React and D3 v7, using `d3.line` for path generation and `d3.csv` for data loading. The chart is rendered as SVG, featuring radial axes, grid lines, and semi-transparent filled areas for each player.

Sstephanie0215

79% match

Loading thumbnail…

Test2

This interactive scatter plot visualizes player attributes from the FIFA19 English Premier League dataset, allowing users to compare quantitative metrics like Potential, Overall, Dribbling, and Acceleration via dropdown menus for both x and y axes. Built with D3 v6, it uses `scaleLinear` for quantitative axes and `scalePoint` for categorical positions, rendering circles with SVG and animating transitions using the `transition` API. The visualization updates smoothly with a 1000-millisecond duration, using data fetched from a GitHub gist.

SSitanshu Rupani

78% match

Loading thumbnail…

Adding Interaction for Scatter Plot - FIFA19 Players Dataset - Sitanshu Rupani

This interactive scatter plot visualizes player attributes from the FIFA19 English Premier League dataset, allowing users to dynamically select which quantitative or categorical attributes appear on the x- and y-axes via dropdown menus. The D3 v6 code uses `scaleLinear` and `scalePoint` for numeric and categorical mappings, with axes rendered through `axisLeft` and `axisBottom`. Data points are drawn as SVG circles with opacity, and transitions animate position changes and circle growth over 1000 milliseconds when axes change. The dataset is loaded as CSV from a GitHub Gist.

SSitanshu Rupani

77% match

Loading thumbnail…

Testing D3 V 3.2

A scatterplot displays FIFA player attributes such as age, overall rating, and wage from a CSV dataset. The visualization uses D3 v5 with an SVG rendering approach. It employs `d3.csv` to load the data and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` to render the scales. Circles positioned via `d3.forceSimulation` show player distribution, though the layout appears partially constrained.

PpramodK

76% match

Loading thumbnail…

Ch 3

A React and D3.js visualization presents soccer team statistics from a CSV file as a scatterplot-style chart. Each team is represented by a circle, with the team name labeled beneath it. D3 loads the data and binds it to SVG circle elements, while a control panel generates buttons for each numeric column. Clicking a button uses `d3.scaleLinear` to remap the circle radius based on that stat, such as wins or points, allowing dynamic comparison across teams.

YYasara Peiris

76% match

Loading thumbnail…

Project Momentum - Sitanshu Rupani

This interactive scatterplot explores player attributes from a FIFA 19 English Premier League dataset. Users select X and Y axes from metrics like Potential, Overall, Dribbling, and Acceleration, and filter data by Preferred Foot, Nationality, or Club. The visualization uses React with d3.scaleLinear for axes and d3.scaleOrdinal for coloring, rendering marks as SVG circles. A color legend highlights specific filter categories on hover, fading other points to emphasize the selection.

SSitanshu Rupani

75% match