Skip to main content
100%

Test - Rocket League Interactive Scatter Plot

✓ Published0🌍 Public
Aapratt2003
Last edited Nov 8, 2017
Created on Nov 8, 2017

This interactive scatter plot visualizes Rocket League player statistics from the first three seasons of League Play, plotting win percentage against miscellaneous score per game. Users can select continuous statistics for the x and y axes, choose a nominal attribute for circle color, and adjust circle radius based on a continuous attribute. Built with D3 v4 and Redux (without React), the visualization uses d3-component for modular rendering, SVG for graphics, and includes animations for transitions and an interactive tooltip. The example demonstrates how to pair D3 directly with Redux, with menus controlling all visual encodings and smooth animated updates between states.

AI-generated description

** 10/25/17 - This block was updated with additional change over time interactions with the addition of changing radius (as well as X, Y, and Color) with a numeric attribute. **

This bl.ock's data describes Rocket League statistics generated by top players in the first three seasons of Rocket League's League Play (qualifiers to participate in each years Rocket League Champtionship Series). The original compiled data can be found at Parrallel.GG, and the processed CSV version on my Github.

The default scatter plot describes an individuals win percentage to their miscellaneous score per game (score which is aquired through objectives such as scoring, assiting, clearing the ball, saving the ball, etc.). The user may select the continuous statistics as either the x-axis or y-axis. One can also select a nominal attribute to color the corresponding circles as well as a continuous attribute to modify the radius of the circles.

This example demonstrates usage of a new library called d3-component and Redux to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/685fa8300650c4324d571c6b0ecc55de'>Spinner with d3-component</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/8c131a74b85d0bb0246233de2cff3f52'>Scatter Plot with Menus</a>

forked from <a href='http://bl.ocks.org/dennisjunior111/'>dennisjunior111</a>'s block: <a href='http://bl.ocks.org/dennisjunior111/4ecb6acbf63135fbd1cc499edbbd9939'>RKL Test - Scatter Plot with Menus</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c1eb9248a60ba770931c9abccc1e5e2a'>2 RKL Test - Scatter Plot with Menus</a>

forked from <a href='http://bl.ocks.org/dennisjunior111/'>dennisjunior111</a>'s block: <a href='http://bl.ocks.org/dennisjunior111/92bf6064cd1d5810be1bd17f67deb95b'>Rocket League Interactive Scatter Plot</a>

forked from <a href='http://bl.ocks.org/dennisjunior111/'>dennisjunior111</a>'s block: <a href='http://bl.ocks.org/dennisjunior111/1827ab0335776631757b303841682bef'>Test - Rocket League Interactive Scatter Plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Rocket League Interactive Scatter Plot - CJKraenzle

This interactive scatter plot visualizes Rocket League statistics from top players across the first three competitive seasons, plotting win percentage against miscellaneous score per game. Users can select continuous statistics for the x-axis, y-axis, and circle radius, as well as a nominal attribute for color, via dropdown menus. The visualization is built with D3 v4, Redux, and d3-component, using SVG with smooth transitions and animations for an engaging exploration of player performance data.

CCJKraenzle
94% match
Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes top football league scorers using D3.js, letting users explore relationships between performance metrics like goals, shots, expected goals (xG), and minutes played. Three dropdown menus allow selection of the x-axis variable, y-axis variable, and season year (2016–2020). The chart renders circles colored by league, with player labels on hover and a color legend that supports filtering by league via click, with double-click to clear. All visual elements—including axes, scatter points, and legend—update in response to user input, creating a dynamic, animated exploration of the dataset. The visualization is built with D3 v7 and is responsive to container resizing.

Eeschuman20@gmail.com
78% match
Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay
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
75% match
Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot visualizes football statistics from the Top Football League Scorers dataset, allowing users to compare metrics like goals, shots, and xG across leagues and years via dropdown menus. The D3 v3 visualization encodes player data as colored circles, with a color legend enabling league filtering and hover interactions that highlight individual players or dim unrelated points. The visualization uses D3 scales (scaleLinear, scaleOrdinal), axes from @curran/responsive-axes, and a custom colorLegend module, while responding to container resizing through observeResize.

TTom Heffernan
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes cricket player statistics, comparing runs against strike rate or wickets against balls faced. Users toggle between the two views via buttons. Built with React and D3, the chart uses d3.csv to load remote data, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom/d3.axisLeft for axes. Circles are colored by match type (T20, ODI, Test) with hover tooltips, rendered as SVG with a legend.

Ssdarsi2404@gmail.com
75% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with D3 v4, Redux, and d3-component, visualizes the classic Auto MPG dataset from the UCI Machine Learning Repository. Users can select which attributes to plot on the X and Y axes, as well as which attribute determines the color of the points, via dropdown menus. The visualization animates transitions smoothly when the selection changes, demonstrating how Redux can manage state changes that drive D3 updates without a React layer.

HHawkinsJM
74% match
Loading thumbnail…

Interactive Highlighting Colorful Scatter Plot of NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes NBA 2018-19 playoff player statistics, where each circle represents a player and its position reflects selected attributes like games played or points. Users can switch between different statistical measures via dropdown menus and hover over the team legend to fade other teams, employing d3.scaleOrdinal for color mapping and d3.scaleLinear for axes. The plot uses React with D3 v5 for rendering SVG marks, and data comes from a Kaggle basketball dataset, filtered for playoff performance.

ZZiyang Gao
74% match