Skip to main content
Log in
Z

Ziyang Gao

@bbbbrianna·18 public vizzes

Loading thumbnail…

Top 15 Pop Singer 2010-2019

This interactive bar chart visualizes the popularity scores of the top 15 pop singers in the U.S. from 2010 to 2019, allowing users to slide through years to compare rankings. Scores are computed by summing weighted rank scores from a CSV file loaded via `d3.csv`. Built with React and rendered as an SVG using D3's `scaleBand` and `scaleLinear`, each bar's tooltip reveals the exact score.

Nov 5, 2020
Loading thumbnail…

Music Signature Change of the Hit Songs

This visualization tracks the average audio features of the top 10 Spotify tracks per year from 2010 to 2019, showing how musical characteristics like danceability, energy, and valence evolve over time. Each line represents a different feature, with the circle size encoding the standard deviation, indicating variability across the hit songs. Hovering over a line highlights it, bolding the stroke and displaying the exact average value for each year. Built with the Vega-Lite API, it leverages `vl.markLine`, `vl.markCircle`, and interactive selection via `vl.selectSingle` with `mouseover` events, pulling data from a pre-computed CSV of yearly means and standard deviations.

Nov 5, 2020
Loading thumbnail…

Yearly Top Genre Trend and Artist with Music Signature

This interactive scatter plot explores how the top 20 Spotify songs in the U.S. vary by year from 2010–2019. A slider selects the year, while dropdown menus choose which musical features (Tempo, Energy, Loudness, etc.) map to the x- and y-axes and whether points are colored by top genre or artist. Users can hover over the color legend to highlight a specific category or hover over a point to see its song details. The visualization is built with React and D3 v5, using SVG scales like `scaleLinear` and `scaleOrdinal` and components for axes, marks, and dropdowns. Data comes from a CSV hosted on GitHub.

Nov 4, 2020
Loading thumbnail…

Total Number of Most Popular Songs Genre

This stacked bar chart visualizes the distribution of top genres among the most popular songs across different years, with Dance pop consistently dominating as the most frequent genre. Built using Vega-Lite API and D3.js v5, the visualization groups and counts songs by artist and genre, encoding these aggregates as stacked bars on an ordinal x-axis and quantitative y-axis. The data comes from a CSV file fetched via D3’s `csv` function from a GitHub gist containing yearly music trends. Tooltips display the count, genre, and artist for each segment.

Nov 4, 2020
Loading thumbnail…

NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes NBA 2018-2019 playoff statistics, with each circle representing a player's performance metrics. The visualization uses React dropdown menus to dynamically select which attribute appears on the x-axis and y-axis, enabling exploration of relationships between statistics like assists, rebounds, and points. The chart renders as an SVG using D3.js v5 scales and axes, with React managing state for the selected attributes. Data comes from a CSV file loaded via d3.csv, and the tooltip displays formatted values on hover.

Oct 29, 2020
Loading thumbnail…

Yearly Music Trend Signature

This visualization shows yearly music trends from 2010 to 2019, plotting the average scores of top Spotify tracks across different musical signature types. Circles encode the standard deviation of each category through size, while lines connect yearly means to reveal temporal patterns. Built with vega-lite-api and d3.v5, the chart uses mouseover selection to dynamically highlight points, display tooltips, and show value labels. Data originates from preprocessed averages and standard deviations of Spotify’s top 10 tracks per year, sourced from Observable, with a custom config for dark-themed readability.

Oct 22, 2020
Loading thumbnail…

Yearly Music Trend Signature

This visualization displays yearly music trends from 2010 to 2019, showing the average scores for different musical components (such as energy or danceability) as colored lines, with circle sizes encoding standard deviation. Using the vega-lite-api library with d3.csv for data loading, the view layers line and circle marks, adds interactivity through mouseover selections that filter data points and display tooltips, and renders axis labels with custom styling via a config object.

Oct 22, 2020
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.

Oct 14, 2020
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.

Oct 14, 2020
Loading thumbnail…

NBA 2018-2019 Playoffs

This scatter plot visualizes NBA playoff player performance during the 2018-2019 season, plotting field goals made against assists. Each circle represents an individual player, colored by their team, with a legend identifying the 16 teams. The visualization highlights a standout scorer on Toronto (TOR) and a notably assist-heavy player on Golden State (GSW). Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` for axes and color encoding, rendering as an SVG with interactive tooltips via the `title` element. Data is loaded from a CSV hosted on GitHub Gist.

Oct 1, 2020
Loading thumbnail…

Yearly Music Trend Signature

This visualization tracks the average values of musical attributes, such as energy or danceability, across the top 10 Spotify songs each year from 2010 to 2019. A multi-line chart displays these trends, using color to distinguish each musical signature, with tooltips revealing the standard deviation of each attribute. The visualization is built with D3.js, Vega-Lite, and the Vega-Lite API, pulling pre-calculated mean and standard deviation data from a CSV file on GitHub.

Sep 30, 2020
Loading thumbnail…

Loading and Parsing CSV Data National Park Trails

This example demonstrates loading and parsing a CSV dataset of U.S. National Park Trails, displaying basic file statistics: size in kilobytes, row count, and column count. It uses D3.js v5’s `d3.csv` method to fetch and parse the remote CSV file asynchronously, then formats the result with `d3.csvFormat` and calculates metadata. The code also includes commented alternatives using the Fetch API with `async`/`await` and a nested `fetch` callback approach, illustrating different parsing strategies. The visualization itself is purely text-based, rendered inside a large `<pre>` element.

Sep 24, 2020
Loading thumbnail…

Loading and Parsing CSV Data the top 50 music of the U.S. in Spotify since 2010.

This example demonstrates how to load and summarize CSV data from the top 50 U.S. Spotify songs since 2010, displaying the file size, row count, and column count in large text. The code uses `d3.csv` to fetch and parse the remote CSV file, then `d3.csvFormat` measures the raw data size, while `data.length` and `data.columns.length` report rows and columns. An alternative commented-out approach shows `fetch`, `async/await`, and `d3.csvParse` for the same task. The visualization is minimal, focusing on parsing mechanics rather than graphical output.

Sep 24, 2020
Loading thumbnail…

Loading and Parsing CSV Data Top50 songs in 2019 of different countries

This example demonstrates loading and parsing a CSV dataset of the top 50 Spotify songs in 2019 across different countries, then displaying basic file statistics. It shows the computed data size in kilobytes, row count, and column count in a large text element. The code uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV file from a GitHub gist, and then accesses the parsed array’s `length` and `columns` properties. The visualization is minimal, focusing on the parsing workflow rather than any graphical representation of the music data.

Sep 24, 2020
Loading thumbnail…

National Park Trail Scatter Plot

This scatter plot shows the surface types of trails across national parks. Dot opacity represents the quantity of trails in a class, while dot size indicates the trail’s development level, from class 1 barely developed to class 5 fully developed. The visualization uses vega-lite-api to render the chart, with D3’s `csv` function loading data from a GitHub gist. Marks are colored by seasonal access and positioned by park unit and trail surface, with the view fitted to the window using `autosize`.

Sep 24, 2020
Loading thumbnail…

Total Number of Most Popular Songs Genre

This stacked bar chart displays the distribution of top genres among the most popular songs for each year, showing that dance pop consistently dominates. The visualization uses vega-lite-api to encode year on the x-axis and song counts on the y-axis, with genre as color. Data is loaded via D3’s `csv` function from a GitHub gist, and a grouped aggregate transform counts songs per year and genre.

Sep 24, 2020
Loading thumbnail…

Worldwide Music Preference

This visualization shows worldwide music preference by plotting the top genre against the country where people play those songs on Spotify. Darker colored spots represent more frequent listening, while spot size indicates the song's release year. Constructed using the vega-lite-api library, the scatter plot encodes genre on the x-axis and country on the y-axis, with color and size channels mapping frequency and year. Data is loaded asynchronously via d3.csv from the bbbrianna gist Top50music_by_country dataset, and tooltips display artist information on hover.

Sep 24, 2020
Loading thumbnail…

Smiley Cute Panda

This is a smiling panda face rendered as a single responsive SVG using React, displayed across the full browser window. The panda’s eyes are animated with layered ellipses and circles to create shiny, lively eyeballs with white highlights, while a red tongue sticks out playfully from its mouth. The code uses React’s `ReactDOM.render` to draw primitive shapes—ellipses, circles, rects, and an SVG path—all positioned relative to the viewport center. The face is composed entirely of geometric elements with black strokes, white fills, and a red accent, emphasizing a clean, vector-based illustration style.

Sep 24, 2020