Skip to main content
SimilarExport ZIP
100%

Bracket

✓ Published0🌍 Public
PPatrick Wojda
Last edited Mar 9, 2017
Created on Mar 6, 2017

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.

AI-generated description

This is a simple vertical tree diagram written with d3.js v4.

This is designed to be used as a starting point for further development as part of documenting an update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/b024fcce8b4b9264011a1c3e7c7d70dc'>Simple vertical tree diagram using v4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/d5583e0415ee9a0819804e255178592e'>Simple vertical tree diagram using v4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/0c6d5dd1904b459481cb0a90fe4d1dff'>Simple vertical tree diagram using v4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9ded4c611a85ff4abb89d640e34d5ea8'>Simple vertical tree diagram using v4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c0c9a986a66bf24be4f8d0263d293c77'>Simple vertical tree diagram using v4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9c1c28f2f865b8d616448eb12ad51e06'>Simple vertical tree diagram using v4</a>

mit Licensed

Similar vizzes

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
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
71% 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
69% 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
68% match
Loading thumbnail…

Digital & Data Literacy Task 4

This interactive data visualization uses a D3.js v3 force-directed tree layout to display a hierarchical breakdown of a fictional football league’s results. The tree shows team statistics, including total points, win/draw/loss counts, goal difference, and games played, with data sourced from a JSON file. Users can click on parent nodes to expand or collapse branches, revealing child details. The rendering relies on SVG paths and circles, with the visualization overlaid on a football pitch background image. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and `transition` methods to animate node position changes smoothly.

GGravyGames
67% match
Loading thumbnail…

Squad Selector

This interactive tree visualization displays a hierarchical squad selection structure, starting with a club and branching into goalkeeper positions. The code uses d3.js v5 with a React framework, rendering an SVG that can be zoomed via `d3.zoom`. Data is loaded from a JSON file and transformed using `d3.hierarchy` and `d3.tree`, with horizontal links drawn via `d3.linkHorizontal`. Node labels are styled with Playfair Display font and text shadows.

Nnj889
67% match
Loading thumbnail…

d3js workshop - bar chart

This example shows a horizontal bar chart of English Premier League standings, with each bar’s length representing a team’s total points and its color encoding the number of wins. The chart is rendered as SVG using D3 v3, reading team data from a CSV file via `d3.csv`. A linear `d3.scale.linear` maps points to bar widths and a second linear scale maps wins to a blue-to-red color range. Each bar is a `<rect>` inside a `<g>` group, with a text label showing the points value and a `<title>` element for hover tooltips.

BBillyBHWong
65% match
Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays Premier League football teams' total points, with each bar's length proportional to the team's PTS value and an overlaid text label showing the exact number. Built with D3.js v3, the chart reads team statistics from a CSV file and renders as SVG rectangles, using a linear scale (d3.scale.linear) mapped to the bar widths and groups positioned vertically via translation transforms. The example demonstrates basic data loading, scaling, and SVG shape creation for workshop purposes.

LLelandCurtis
65% match