D3 Scatter Plot - FIFA Dataset - Sitanshu Rupani

100%

D3 Scatter Plot - FIFA Dataset - Sitanshu Rupani

✓ Published1🌍 Public

Last edited Sep 29, 2021

Created on Sep 15, 2021

This visualization shows a D3.js scatter plot comparing FIFA 19 player potential against their current overall rating, using data from a public gist of the FIFA19 English Premier League dataset. Each circle represents a player, plotted with potential on the x-axis and overall on the y-axis. The code uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the axes. The SVG-based chart fills the full browser window and applies a fixed radius of five pixels to all data points.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot.
This viz. displays a scatter plot between a players potential vs his current overall rating.

The Source for this FIFA19 Player Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Address Project Feedback - Sitanshu Rupani

This scatterplot visualizes the relationship between FIFA 19 players’ overall ratings and their weekly wages, using D3.js v4 with SVG rendering. It plots each player as a circle, with data sourced from a CSV of English Premier League players. Users can brush over the plot to highlight specific players, which triggers a table below showing their name, club, nationality, and potential. The visualization uses `d3.brush()` for selection, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleLinear` for positioning, dynamically updating the table via `d3.selectAll('.brushed')`.

SSitanshu Rupani

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

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

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

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

80% match

Loading thumbnail…

Make Something with Brushing - Sitanshu Rupani

This visualization uses a scatterplot to show the relationship between Overall and Potential ratings for FIFA 19 English Premier League players. Users can brush an area of the plot with d3.brush, which highlights selected circles in pink while dimming others, and upon releasing the brush, a table appears listing the player names, Overall, and Potential values for the brushed points. The plot is rendered with SVG, using d3.csv to load the dataset and d3.scaleLinear for axes.

SSitanshu Rupani

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

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

75% match