Skip to main content
SimilarExport ZIP
100%

Rocket League Interactive Scatter Plot - CJKraenzle

✓ Published0🌍 Public
CCJKraenzle
Last edited Nov 9, 2017
Created on Nov 9, 2017

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.

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>

mit Licensed

Similar vizzes

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
77% match
Loading thumbnail…

Scatter Plot With Menus

This interactive scatter plot visualizes top football league scorers, with menus to select different metrics for the x-axis, y-axis, and year. The chart displays each player as a circle, colored by league, and uses a color legend to filter points by league. The visualization is built with D3.js, using `scaleLinear` for axes, `scaleOrdinal` for colors, and responsive axes. Users can hover over points to highlight them and see player names via tooltips, while the legend allows clicking to isolate a specific league.

Eeschuman20@gmail.com
74% match
Loading thumbnail…

Colorful Scatter Plot of NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes player statistics from the NBA 2018-2019 playoffs, with each circle representing an individual player’s performance across two selectable attributes. Dropdown menus let users switch between metrics like points, assists, and rebounds, while hovering over the team legend highlights players from that team and fades the rest. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for team colors, and SVG circles with hover tooltips to reveal player names. The data comes from a Kaggle dataset of basketball player stats per season.

ZZiyang Gao
73% 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
73% match
Loading thumbnail…

Rocket Ship

This example visualizes emotional states over time as a scatterplot, with time plotted on the x-axis (0–100) and emotion categories on the y-axis. It uses D3 v4 with an SVG rendering approach, drawing circles for each data point from a CSV file. The chart includes labeled axes for emotions and time, plus a title. The rendering is built using d3.csv to load the data, d3.scaleLinear for both scales, and d3.axisBottom/axisLeft for the axis components, all within an Angular component.

Jjpdlourenco98
72% match
Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000
72% 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
71% match
Loading thumbnail…

Scatter Plot with ReactiveModel

This interactive scatter plot visualizes major league baseball player statistics, mapping metrics like hits, home runs, and runs against each other for individual players across teams and leagues. The chart updates smoothly with animated transitions, as data points reposition when users change the variables being compared. Built with D3 v4 and the ReactiveModel library, the visualization uses declarative reactive programming to define chart components, including SVG rendering, responsive axes with tick marks, and linear scales that automatically compute domains from the underlying data. The Baseball.csv dataset drives the visualization, with each player represented as a point whose position reflects their performance statistics.

CCurran Kelleher
71% match