In this project, the NBA Players' state in 2020~2021 season is visualized. The original data is collected from the NBA official website. In the project, the dataset is visualized in scatter plot, bar chart, spider chart and pie chart. The visualizations are implemented with d3.js and react.js on VizHub.
The following tasks and questions drive the visualization and interaction decisions for this project:
- Who are the players that have high scoring/assists/blocks efficiency?
- What is the score/skill distribution in each team?
- Who are the players that are good at field goals/ 3 score field goals?
- NBA players' Efficiency Scatter Plot: In this scatter plot, the representation of y-axis can be changed by te selection box, and darker color shows higher efficiency.
- LAL NBA Player Scoring Bar Chart: In this chart, the scores are sorted in descending order. The horizontal line depicts the mean score of the team.
The data is visualized in scatter plot. In the picture, each point represents a player. The red and blue color represents Western and Eastern Team respectively. All the points are interactable, when hovering on the point, the name of the player will come out.
This plot helps answer the first question. The slope of the point represents the efficiency. There is an orange line in the plot showing the mean efficiency.
This visualization shows each player's skills. The pie chart shows the losses and wins. All the points and areas are interactable. When hovering on the point/win loss area, the points come out.
This plot helps answer the second question. In the spider plot, the points that are further to the center represent the stronger skill. From this chart, the players strength and weakness can be read easily.
These two visualizations shows the team status. The bar chart shows the players skill in the team. There is a red horizontal line showing the mean value of the team. The pie charts shows the wins and losses for each player. The size of the whole circle shows the total games that the player played. The larger the more games the player has played.
The bar chart helps answer the second and third question. The player that has the largest bar has the strongest skill in the team.
- Visualization 1: Players' efficiency scatter plot. (Oct 15)
- Create the scatter plot
- Use differect hue to represent Eastern team and Western team
- Drop down menu for y axis
- Create a line for mean efficiency.
- Visualization 2: Player's skill plot. (Nov 24)
- Create a spider plot for skill analyzation (2 days)
- Create a bar chart to depict losses and wins (1 day)
- Drop down menu for Team and Player (1 day)
- Visualization 3: Team analyzation bar chart. (Oct 29)
- Create the bar chart
- Drop down menu for Team and y axis. (1 day)
- Bar chart for Rebounds (3 day)
- Visualization 4: Team analyzation pie chart. (Oct 15)
- Create multiple pie charts in one page. (3 days)
- Drop down menu for Team (1 day)
In this scatter plot, the efficiency of all the players are depicted. In the plot, each dot represents a player in the league. The hover effect is applied to all the dots. The name of the player pops out when the mouse cursor is on the dot. The drop down menu enables users to choose the representation of the x-axis and y-axis. I used the different color hue to show the efficiency. When the x-axis is set as the average time that the player played in each game, the darker the color shows the higher efficiency.
This iteration describes the players' wins/losses in the team. Instead of using the pie chart as I originally designed in sketches, I used the bar chart to show the total games that the player played and use different color indexes to show the number of wins and losses. The dropdown menu can be used to change the team. The players are ordered decently by the total games they've played during the season.
In this bar chart, the X-axis Represents the player's name. Users can use the drop down menu to choose the team and filter the data. There is also a dropdown menu for the Y-axis representation. For the rebounds data, the bar is separeated into Offensive Rebounds and Defensive Rebounds. The hover effect is applied to all the bars in the chart. The accurate value will pop out when hovering on the bar. There is also a horizontal line in the chart, showing the mean value of the team.
There are two plots in this iteration. The left one is a spider chart, which describes the players' performances in gaining points, rebounds, turnovers, blocks, steals and assists. The right one is a pie chart describing the players' total wins and losses during the season. The drop down menu can help quickly filter the players by team. The hover interaction is added to all the dots in the spider chart. When the mouse cursor is on, the accurate number will show up.
The interactable visualizations I created in this project enables the readers to intuitively view and compare the NBA player's state data from three dimensions: the league, the team and the player himself. In the scatter plot, the state data of all the players in the league are represented. By changing the representation of x and y axis, the first question: Who are the players that have high scoring/assists/blocks efficiency? can be answered. The two bar charts shows the players' state within the team. From these two charts, we can easily answer the second question: What is the score/skill distribution in each team? and the third question: Who are the players that are good at field goals/ 3 score field goals?. The spider chart shows the detailed data for each player. From this chart, we can know about the strength and weakness of each player.
For the future work, some interactions can be added to link all these charts.