todo

msi-bracket

The visualization displays the 64 possible outcomes for the final day of the League of Legends Mid-Season Invitational group stage, with each scenario colored by team advancement (green for qualified, orange for tie-breaker, red for eliminated). It shows how each of the six remaining games affects the standings, with animated team dots arranged in a bracket-style grid. Built with D3.js, it uses `d3.csvParse` to load match data, a scroll-driven narrative with the `graphScroll` library, and SVG animations to transition between match outcomes.

77% match

wl-treemap

This visualization shows the win rates for each team in the 2016 Summer NALCS regular season, broken down by game number and previous match outcomes. It uses two complementary treemap layouts: one with nested rectangles showing the percentage of games won and the conditional win rates in subsequent games, and another with a stacked bar-like "ice" layout. The code leverages the custom `d3+_.js` library, which extends d3 with methods like `d3.select`, `d3.append`, and `d3.nestBy`, to process the game data and render SVG paths. A tooltip is attached to each colored rectangle, revealing details on hover, with an animated transition revealing the treemap cells sequentially.

68% match

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees

68% match

worlds-bracket

This interactive bracket visualization displays a sports tournament-style knockout bracket, rendered as an SVG with smooth animations. The page shows matchups between teams, with each game rendered as a styled box; hovering or clicking highlights the active game and its competitors while dimming others. Tooltips provide additional match details. The bracket updates dynamically, using D3.js for data binding and transitions, and includes a compact horizontal layout of games with win indicators (underlined bold text) and team names. The visualization emphasizes interactivity, letting users explore match results and see connected paths through the bracket.

67% match

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

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

Gist 9e7f962de44840b48f6f27bcbe4d8cd8

This scatterplot-like visualization maps player names, positions, and scores from a team.csv dataset, encoding score on the y-axis and position on the x-axis. It uses d3.forceSimulation to position overlapping labels and nodes, with a d3.scalePoint for categorical positioning and d3.select to bind data. Each player is represented by a circle colored by position, with a text label showing their name and score. The chart renders in SVG via d3, with axes generated by d3.axisLeft and d3.axisBottom. The visualization highlights scoring distribution across positions, such as high-scoring back-rowers and fly-halves, without additional interactivity.

CConorAspell

Gist fd36310058f0b9965318

The graphic displays the score differential for every NBA game in 2015, charting the home team’s lead (positive) or deficit (negative) at each minute of play. Each team is shown in its own small multiples panel, with colored circles representing each game’s trajectory and a line highlighting a selected match. Built with `d3.js`, `d3-jetpack`, and `d3-starterkit`, the visualization uses a threshold color scale to encode the point difference, and interactive hover effects reveal game details such as date, opponent, and final score. The data originates from a JSON file containing minute-by-minute scores for games on a specific date.