msi-bracket

100%

✓ Published0🌍 Public

Last edited May 17, 2017

Created on May 14, 2017

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.

AI-generated description

http://roadtolarissa.com/msi-group/

Similar vizzes

Loading thumbnail…

todo

A scrollytelling visualization maps every possible outcome of the final two days of the 2018 Mid-Season Invitational. The code renders a 64×64 grid per team on canvas using `d3.conventions` and `d3.graphScroll`, showing how each team’s advancement status varies by win/loss combinations. Clicking game toggles opacity to filter scenarios, while mouseover highlights matching cells and underlines relevant match labels. Data comes from `matches.tsv`, with tiebreaker scenarios precomputed in `calc-scenarios.js`.

11wheel

77% match

Loading thumbnail…

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.

11wheel

75% match

Loading thumbnail…

Bracket

This is a vertical tournament bracket visualization built with D3.js v4, showing match results and winners for teams like Hammarby and Malmö FF. The tree layout uses `d3.tree()` to arrange nodes hierarchically, with `d3.line()` and `d3.curveStep` drawing stepped connector paths between matches. Each node displays team names and scores in overlaid HTML labels positioned via absolute styling, while SVG renders the link lines. The code highlights winning teams with thicker strokes and includes a "spelas nu" (playing now) indicator, making the bracket’s progression clear.

PPatrick Wojda

71% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA

64% match

Loading thumbnail…

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

66264kusuma@gmail.com

63% match

Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu

62% match

Loading thumbnail…

Premier League Interactive

This interactive visualization presents Premier League standings with a focus on league tables and match data. Built with D3 v4, it renders an SVG-based table that displays team statistics such as position, points, goals for/against, and goal difference. Users can click on column headers to dynamically sort the table, triggering smooth transitions that reorder rows. The visualization also includes a league selector, allowing viewers to switch between the English Premier League, La Liga, Serie A, and the Bundesliga, with the table updating accordingly. Hover effects highlight menu items, and the design uses a clean, minimal aesthetic with subtle color scaling for numerical columns.

FFootyNumb3rs

62% match

Loading thumbnail…

bar chart champions league data

A grouped bar chart visualizes Champions League team statistics, comparing goals, matches played, and wins for each team. The chart aggregates the CSV dataset using d3.rollup, then renders three color-coded bars per team with d3.scaleBand and d3.scaleLinear. SVG axes, rotated tick labels, and a legend clarify the data. The visualization is built with React, D3 v7, and plain SVG rendering.

BBALAJI MANDAVA

61% match