Y

Yichen Li

@yichenlilyc·19 public vizzes

Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot

The scatter plot visualizes NBA player statistics, displaying player efficiency with darker dots representing higher points-per-minute ratios. The x-axis shows minutes played, while the y-axis can be switched between points, rebounds, assists, steals, and blocks. Built with D3 v6 using SVG, the visualization includes dropdown menus for axis selection and hover tooltips revealing player names. The code uses d3.scaleLinear, d3.scaleSequential with the interpolatePuRd color scale, d3.axisLeft, and d3.axisBottom, with animated transitions updating circle positions and colors when the selected statistic changes.

Loading thumbnail…

NBA Player Games Played Bar Chart

This interactive bar chart displays the number of games played by NBA players across different teams, with a dropdown menu to filter by team and color-coded bars for wins and losses. Built with React and D3 v5, it uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, SVG rendering for marks, and a custom legend to show the win/loss color mapping. The data comes from a CSV file containing player statistics for the 2020-2021 season.

Loading thumbnail…

Fork of NBA Players' Skills Chart

This interactive dashboard visualizes NBA player statistics from the 2020-2021 season, showing a spider chart of six skills (points, rebounds, assists, steals, blocks, turnovers) for a selected player on a chosen team, alongside a pie chart of team wins and losses. Built with React and D3 v5, it uses `scaleLinear` for the radial axes and `scaleOrdinal` for the win/loss color legend. Users can switch teams and players via dropdown menus, and tooltips display exact values for each skill metric. The data is loaded from a remote CSV file.

Loading thumbnail…

NBA Players State Bar Chart

This interactive bar chart visualizes NBA player statistics across all 30 teams, with dropdown menus to select a team and a statistical category such as points, rebounds, or assists. For rebounds, bars are stacked by color to distinguish offensive and defensive rebounds. The chart uses React with D3 v5 scales for positioning, renders as SVG, and displays a horizontal line at the mean value for the selected metric. Data comes from a GitHub-hosted CSV of the 2020-2021 season.

Loading thumbnail…

NBA Player Efficiency Scatter Plot with Brush

This interactive visualization displays NBA player scoring efficiency using two coordinated scatter plots. Each dot represents a player, positioned by minutes played on the x-axis and points scored on the y-axis, with darker colors indicating higher efficiency. A brushable mini time-series chart allows users to select a range of minutes, filtering the main scatter plot to show only players within that selection. Built with React and D3 v5, the example uses `d3.brushX` for the interactive brushing and `d3.scaleSequential` with the `interpolatePuRd` color scale for efficiency encoding. The dataset is loaded from a GitHub-hosted CSV file.

Loading thumbnail…

NBA Players' Skills Chart

This example presents a spider chart and a pie chart examining NBA player statistics for the 2020-2021 season. The spider chart displays six per-game skill metrics—points, rebounds, assists, steals, blocks, and turnovers—for a selected player, with dropdowns to choose a team and player. The pie chart visualizes the player’s win-loss record. Built with React and D3 v5, the SVG renderings use `scaleLinear` for radial axes, `scaleOrdinal` for colors, and `pie` and `arc` for the pie chart, reading data from a CSV via `csv`.

Loading thumbnail…

NBA Player Skill Spider Chart

Interactive NBA player statistics from the 2020-2021 season are displayed in a spider chart, comparing six per-game skills (points, rebounds, assists, steals, blocks, and turnovers) for a selected player. Users choose a team and player via React dropdown menus, triggering an animated update of the polygon and data points. The visualization is rendered as SVG using D3 v5 scales and custom React components for axes and marks, with data loaded from a CSV file.

Loading thumbnail…

NBA Player Scoring Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency by plotting minutes played on the x-axis against total points on the y-axis. Each dot represents a player, with darker red-to-purple colors indicating higher scoring efficiency, calculated as points per minute. The visualization uses d3.csv to load data from a GitHub Gist, d3.scaleLinear for the axes, and d3.scaleSequential with the interpolatePuRd color scheme to encode efficiency. Hovering over any dot reveals the player’s name and point total via an SVG title tooltip.

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This interactive radar chart visualizes NBA player performance statistics—points, rebounds, assists, steals, blocks, and turnovers—for a selected team and player from a CSV dataset. Built with React and D3 v5, it uses d3.scaleLinear for each metric axis, positioned radially using trigonometric calculations, and renders SVG circles and paths with animation. Users select a team from a dropdown, then choose a player to display their statistical profile as a polygon overlay on the radar grid.

Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency using a dataset from a GitHub gist. It plots minutes played on the x-axis against a selectable y-axis metric—points, rebounds, assists, steals, or blocks—with each dot representing a player. Dot color indicates efficiency (points per minute), with Western Conference teams shown in reds and Eastern Conference teams in blues, differentiated through `d3.scaleSequential` with `interpolateReds` and `interpolateBlues`. The visualization uses D3 v6 with SVG rendering, including animated transitions via `transition().duration(600)`, interactive hover opacity, a dropdown menu built with a custom `menu` module, and a color legend for conference identification.

Loading thumbnail…

NBA Player Efficiency Scatter Plot

This interactive scatter plot visualizes NBA player statistics from a CSV dataset, showing minutes played on the x-axis while the y-axis can be switched between points, rebounds, assists, steals, and blocks via a dropdown menu. Each dot represents a player, colored using d3.scaleSequential with an interpolatePuRd interpolator based on scoring efficiency (y-value divided by x-value). The visualization uses D3 v6 with SVG rendering, featuring hover interactions that reveal player names via appended titles, and smooth transitions when updating the y-axis selection.

Loading thumbnail…

Iteration of LAL NBA Player Scoring Bar Chart

This bar chart visualizes the points per game for Los Angeles Lakers players in the 2020-2021 NBA season, sorted in descending order with a red horizontal line marking the team mean. The visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the continuous y-axis, with d3.csv loading player statistics from a GitHub Gist. Each bar includes a hover tooltip via SVG title elements, while d3.line generates the mean reference line. The chart rotates x-axis labels to prevent overlap and colors bars with a steelblue fill, rendered as SVG in D3 v6.

Loading thumbnail…

SVG Fundamentals: Kirby

A stylized Kirby character is drawn entirely with scalable vector graphics, using primitive shapes to form a complete figure. The code defines the body as an overlapping circle, while hands, feet, and mouth are constructed with SVG path elements and quadratic or cubic Bézier curves. Ellipse elements create the eyes, cheeks, and detailed eye highlights, and line elements form the eyebrows. All shapes include stroke and fill attributes for a cartoon-like outline, rendering directly to the page without additional libraries.

Loading thumbnail…

Loading and Parsing PS4 Games Sales CSV Data

This example demonstrates loading and parsing the PS4 Game Sales Dataset, displaying file size, row count, and column count on a black background. It uses d3.csv to fetch the CSV from a GitHub gist, then d3.csvFormat to calculate the data size in kilobytes. The code also includes commented alternatives using fetch, async/await, and d3.csvParse, alongside a nested Promise example, illustrating different asynchronous parsing approaches in D3 v5.

Loading thumbnail…

Loading and Parsing NBA Player State CSV Data

This example demonstrates how to load and parse a CSV file containing NBA player statistics. It displays the file’s size in kilobytes, the number of data rows, and the number of columns within a large text element on a black background. Using the `d3.csv` method from the D3 v5 library, the program fetches the dataset from a remote URL and then applies `d3.csvFormat` to calculate the byte size. The interface provides a minimal, textual summary of the structured data source.

Loading thumbnail…

Loading and Parsing IMDb Top 250 CSV Data

This example demonstrates loading and parsing the IMDb Top 250 dataset, displaying the file size in kilobytes, row count, and column count in large text. The visualization uses d3.csv to fetch and parse a remote CSV file from a GitHub gist, then applies d3.csvFormat and data.length to compute summary metrics. The code also includes commented alternatives using fetch, async/await, and d3.csvParse, as well as a nested Promise-based “pyramid of doom” approach. No graphical chart is rendered; the output is purely textual summary statistics.

Loading thumbnail…

PS4 Game Sales Scatter Plot

This scatter plot uses a PS4 game sales dataset from a GitHub gist to compare regional sales from 2013 to 2018. The x-axis maps the year of release, while the y-axis shows sales in millions. Each dot represents a game, with black, red, and blue circles distinguishing global, North American, and Japanese sales, respectively. Built with D3 v6, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circles rendered via `selectAll` and `join` to overlay the three sales categories.

Loading thumbnail…

IMDB Top 250 Scatter Plot

This scatter plot visualizes the IMDb Top 250 dataset, showing each movie as a dot positioned by its release year on the x-axis and its rating on the y-axis. The dot radius encodes the number of votes a movie received, allowing viewers to compare the popularity and critical reception of these top-rated films. The visualization is built with d3.v6, using scaleLinear for all axes and the radius encoding, with data loaded via d3.csv. The SVG rendering includes axisBottom and axisLeft components, while circles are colored darksalmon with a fill-opacity of 0.3.

Loading thumbnail…

LAL NBA Player Scoring Bar Chart

This bar chart displays the average points per game for Los Angeles Lakers players during the 2020-2021 NBA season, using data from a CSV file loaded via d3.csv. Each player’s name is mapped to the x-axis with d3.scaleBand, while their score appears on the y-axis via d3.scaleLinear. The chart renders as SVG rectangles with fixed widths and cornflower blue fills, accompanied by axis labels for “player” and “score.” The visualization uses D3 v6, including scaleSequential and interpolatePuRd for potential color encoding, though the current bars use a static color.