week 8 final project

100%

week 8 final project

✓ Published0🌍 Public

Last edited Mar 16, 2023

Created on Feb 27, 2023

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`.

AI-generated description

A scatter plot of history WinRate of NBA team Celtics. Xaxis is year and Yaxis is Win Rate

there is a icon on the first page, and after click the icon you will see the line chart of this team Data source form https://gist.github.com/wqygod/37e57c271546fe5b40759eeda8a20042

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

84% match

Loading thumbnail…

Line graph

This line graph displays the historical win rate of the Boston Celtics NBA team from 1978 to 2018, with the x-axis representing the season year and the y-axis showing the winning percentage. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data from a CSV file, which includes attributes such as Season and W/L% from a public gist source. The chart is rendered with `d3.line` to create the path, along with `d3.axisBottom` and `d3.axisLeft` for the axes, and includes custom labels for clarity.

QQingyang Wang Profolio

83% match

Loading thumbnail…

Final Project

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`.

QQingyang Wang Profolio

82% match

Loading thumbnail…

Fork of Line graph

This visualization displays a scatter plot of the Boston Celtics' historical win rate by season, with the x-axis representing years and the y-axis representing the winning percentage. After clicking a team logo icon, the view transitions to a line chart. The chart uses D3's `scaleTime`, `scaleLinear`, and `line` generators to render data parsed via `csvParse` from a local CSV file. Axes and labels are created with custom `axisLeft` and `axisBottom` functions.

QQingyang Wang Profolio

80% match

Loading thumbnail…

Axes & Labels graph

A scatter plot displays the historical win rate of the NBA team Celtics from 1978 to 2017, with the x-axis representing the year and the y-axis the winning percentage. The visualization, built with D3 v7, uses `scaleLinear` and `extent` to map data, while the custom `axis` function leverages `axisLeft` and `axisBottom` for labeled axes. Clicking a red circle triggers data loading from a CSV file and renders the plot using the `scatterPlot` module.

QQingyang Wang Profolio

79% match

Loading thumbnail…

First Viz

A scatter plot displays the historical win rate of the Boston Celtics NBA team per season, with the x-axis representing the year and the y-axis the win percentage. The visualization loads data from a local CSV file and parses it using `d3.csvParse`. It renders circular marks via `d3.select().join()` in a customized scatter plot. The code leverages `d3.scaleLinear` and `d3.extent` for scaling the axes, and states are managed with a simple `setState` mechanism.

QQingyang Wang Profolio

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

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

74% match