Public
Edited
Apr 14, 2023
bracket = {
let games = games_by_year.get(season);
let structure = make_links(games.size + 1);
let w = 800;
let h = 400;
let margin = 80;
let game_height = 40;
let team_width = 120;
let div = d3
.create("div")
.style("width", `${w}px`)
.attr("height", `${h}px`)
.style("position", "relative");
let svg = div
.append("svg")
.attr("width", w)
.attr("height", h)
.style("overflow", "visible");
let scale = d3
.scaleLinear()
.domain([0, w])
.range([w - margin, margin]);
let root = d3.hierarchy(d3.stratify()(structure));
d3.tree().size([h, w])(root);
// Set up the connectors between the games.
// The arc links we used before are groovy but
// not typical of what we expect in a bracket.
// Thus, this implements a custom connector
svg
.append("g")
.attr("id", "links")
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", function (o) {
// Here's the custom connector
let x1 = scale(o.source.y);
let y1 = o.source.x;
let x2 = scale(o.target.y);
let y2 = o.target.x;
let line = d3.line()([
[x1, y1],
[x1, y2],
[x2, y2]
]);
return line;
})
.attr("fill", "none")
.attr("stroke", "#222")
.attr("stroke-width", 1.5);
// The games
div
.selectAll("div.game")
.data(root.descendants())
.enter()
.append(function (d) {
// Attach left and top info based on d3.hierarchie's
// computations and some of our own
d.left = scale(d.y) - team_width / 2 + "px";
d.top = d.x - game_height / 2 + "px";
return game_container(d, {
game_height,
team_width,
// Get the game_data from the game Map, assuming it's defined
game_data: games.get(d.data.data.id)
});
});
return div.node();
}
function make_links(n) {
let d = Math.ceil(Math.log2(n));
return make_powerTwo_links(d).filter(function (link) {
let [s1, s2] = link.id.split("-").map((s) => parseInt(s));
return s1 <= n && s2 <= n;
});
}
function make_powerTwo_links(depth) {
let root = { id: [1, 2] };
let output = [root];
let next_round = output;
for (let d = 1; d < depth; d++) {
next_round = next_round.map(make_next_links).flat();
output = output.concat(next_round);
}
output.forEach(function (o) {
o.id = o.id.join("-");
if (o.parentId) {
o.parentId = o.parentId.join("-");
}
});
return output;
function children([top, bot]) {
let exp = Math.log2(top + bot - 1);
let sum = 2 ** (exp + 1) + 1;
return [
[top, sum - top],
[bot, sum - bot]
];
}
function make_next_links(game) {
return children(game.id).map((a) => ({
id: a,
parentId: game.id
}));
}
}
games_by_year = d3.rollup(
game_data,
(a) => a[0],
(g) => g.year,
(g) => g.seeds
)
game_data = FileAttachment("games@2.csv").csv({ typed: true })
bracket_style = styles
import { game_container, styles } from "690c6934394e5f86"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
