Anne Lin

@anqilin11·3 public vizzes

Untitled

This interactive bar chart displays games played by NBA players for a selected team, with a dropdown menu to switch between all 30 teams. Each bar represents a player, colored lightgreen, and the y-axis shows games played while the x-axis lists abbreviated player names. The visualization is built with React and rendered as SVG, using d3.scaleBand and d3.scaleLinear for scales, d3.csv for data loading, and ReactDropdown for team selection. Data comes from the NBA Player State Dataset, with player names shortened to first initial and last name initial format.

Dec 13, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatterplot visualizes the relationship between fuel efficiency (mpg) and horsepower for vehicles from the UCI Auto MPG dataset, with point size encoding weight and color encoding origin. Built with the Vega-Lite API (vl.markCircle, vl.x, vl.y) and rendered through D3.js, it uses vega-tooltip for hover details and a custom config to style axes and labels. The chart spans the full viewport and updates dynamically on resize, demonstrating the Vega-Lite API’s programmatic chart construction within a D3 framework.

Dec 13, 2021

Loading thumbnail…

Fork of Shot Distance Bar Plot

This interactive bar chart displays the number of earthquake deaths across regions, with buttons that filter the data by 20-year periods. The chart initially shows all data, and clicking a button triggers a smooth transition that rescales the axes and repositions the bars, which are sorted by death toll. Built with D3 v7, the visualization uses `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for axes, and the `.join()` method to update the SVG rectangles, with transitions animated over one second. The data comes from a GitHub-hosted CSV file depicting earthquakes from 1900 to 2000.

Dec 13, 2021