Make Something with Brushing - Sitanshu Rupani

100%

Make Something with Brushing - Sitanshu Rupani

✓ Published1🌍 Public

Last edited Oct 20, 2021

Created on Oct 20, 2021

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.

AI-generated description

This viz is a use case for brushing.
This is pretty close to how I would like this viz to appear in my final project.
Using brushing, the user can select an area of interest and a table of the relevant players can be seen acompanying the selection. This allows the user to see some additional data along with the inferences being drawn from the graph.

Inspiration taken from here

The data for this viz can be found here: FIFA 19 Players 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

83% match

Loading thumbnail…

D3 Scatter Plot - FIFA Dataset - Sitanshu Rupani

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.

SSitanshu Rupani

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

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

76% match

Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ

73% match

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9

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

71% match