Skip to main content
SimilarExport ZIP
100%

worlds-bracket

✓ Published0🌍 Public
11wheel
Last edited Nov 14, 2016
Created on Oct 4, 2016

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.

AI-generated description

completed: http://roadtolarissa.com/worlds-group/

Similar vizzes

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
80% match
Loading thumbnail…

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.

11wheel
75% match
Loading thumbnail…

Untitled

This interactive visualization uses D3.js v7 to display World Cup team statistics from a CSV file as circles arranged in a row, with team names labeled beneath each circle. A control panel presents buttons for different data attributes such as wins, losses, points, and goals, and clicking a button uses `d3.scaleLinear` to map that attribute’s value to the circle radius via `.attr("r", ...)`. The circles initially render at a fixed size, then resize dynamically based on the selected metric, with CSS classes styling active and inactive states.

Nnicolekevans
68% match
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
67% match
Loading thumbnail…

D3.js in action - Section 1 - Ch 3

This example visualizes World Cup team statistics across multiple metrics, with each team represented as a circle positioned along a horizontal axis. Clicking a button adjusts the circle radii and fill colors to reflect the selected attribute, while hovering highlights teams from the same confederation. The visualization uses D3.js v6 with SVG transitions to animate changes, and employs scales such as `d3.scaleQuantize` and `d3.scaleLinear` to map data values to colors and sizes, with color interpolation via `d3.interpolateHsl`. Data comes from a CSV file containing team performance records.

AAlbert
66% 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
65% match
Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

MMbrownshoes
65% 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
65% match