Final Project

100%

✓ Published0🌍 Public

Last edited Apr 27, 2023

Created on Apr 12, 2023

This interactive NBA visualization compares team winning percentages from 2010 to 2022 using two switchable chart types. A line chart displays seasonal win rates for all teams, highlighting a selected team in black, while a scatter plot shows the relationship between a team’s historical average win rate and its performance in a selected season using team logos as points. Users toggle between charts via buttons, select teams or seasons from dropdown menus, and hover over scatter plot logos for detailed tooltips. The visualization is built with D3 v7, using CSV data parsed and aggregated with `csvParse` and `flatRollup`.

AI-generated description

In this week, I add button to switch differnt kind of graph. With the button, users can choose what kind of graph they want to check.

MIT Licensed

Similar vizzes

Loading thumbnail…

Week 11 final project

This interactive NBA visualization plots team win rates for road and home games on a scatter plot, with team logos as the data points. A dropdown menu lets users switch between three seasons (2015–2017), updating the dataset and point positions. The visualization is built with D3 v7, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `selection.join` for declarative SVG updates. When a logo is clicked, the code references a separate scatter plot function, though that feature remains unfinished. Data is drawn from a hardcoded `dataSet` array containing win-rate percentages for nine teams.

QQingyang Wang Profolio

86% match

Loading thumbnail…

week 8 final project

This interactive dashboard presents the historical win rate of the Boston Celtics NBA team across seasons. The visualization begins with a static logo, and clicking it triggers a line chart that plots the winning percentage (W/L%) against the year, using D3's `scaleTime` and `scaleLinear` to map the data. The chart is rendered with `d3.line` and custom axes created via `axisLeft` and `axisBottom`. Data is loaded from a provided CSV file using `d3.csvParse`.

QQingyang Wang Profolio

82% match

Loading thumbnail…

Fork of Line graph

This interactive line graph visualizes the historical win rates of NBA teams from 2010-11 through 2021-22, with the x-axis representing the season year and the y-axis showing each team’s winning percentage. A dropdown menu lets the viewer highlight one of 30 teams, whose line is drawn in red while the others remain black. Built with D3 v7, the visualization uses `scaleTime` and `scaleLinear` for axes, `line` for path generation, and a `join` pattern for updating SVG elements on state changes. The data is loaded from a CSV file parsed with `csvParse`.

QQingyang Wang Profolio

81% match

Loading thumbnail…

Final project week 8

This scatterplot compares recent and historical season win rates for nine teams, with the x-axis showing recent win rate and the y-axis showing historical win rate. Each team appears as a colored circle using D3’s `schemeCategory10` palette, positioned via `d3.scaleLinear` scales. The visualization renders through `d3.select` and `.join()` to bind the hardcoded data array, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes that divide the plot into four performance quadrants.

QQingyang Wang Profolio

81% match

Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu

79% match

Loading thumbnail…

Transforming data of Historical NBA Performance

This example displays historical average winning percentages for NBA teams, computed from a CSV dataset and rendered as a JSON array. The visualization uses D3 v7’s `flatRollup` and `sum` functions to aggregate win percentages per team across all seasons. After fetching the data via a URL, `csvParse` converts the CSV string into objects. The computed results are output as formatted text inside a `<pre>` element, demonstrating a straightforward data-transformation pipeline without additional chart rendering.

QQingyang Wang Profolio

77% match

Loading thumbnail…

Data-Viz-Final-Project

This visualization uses scatter plots and line charts to explore NFL home field advantage from weather conditions, using data from the 2015-2023 seasons sourced from pro-football-reference.com. D3 v7 renders team logos as images positioned on scales for game attributes, with interactive radio buttons to switch between different data views. The chart includes labeled axes and transitions to animate between selections, showing trends in how weather impacts game outcomes for each franchise.

Hhmkyriacou

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

76% match