Public
Edited
Mar 14, 2023
{
let w = 600;
let h = 400;
let margin = 60;
let game_height = 30;
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 g = svg.append("g");
let scale = d3
.scaleLinear()
.domain([0, w])
.range([w - margin, margin]);
let root = d3.hierarchy(d3.stratify()(links));
d3.tree().size([h, w])(root);
let link_display = g.append("g").attr("id", "links");
link_display
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", function (o) {
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);
let game_containers = div
.selectAll("div.game")
.data(root.descendants())
.enter()
.append(function (d) {
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,
game_data: games ? games.get(d.data.data.id) : null
});
});
return div.node();
}
<style>
.playin {
border: solid 3px green !important;
}
.playin > .team {
background-color: #8f8;
}
</style>
games = new Map([
[
"16a-16b",
{
top_team: "UNCA",
bot_team: "TX Southern",
top_score: 92,
bot_score: 84,
class_name: "playin"
}
],
[
"1-16a",
{
top_team: "Texas",
bot_team: "UNCA",
top_score: 82,
bot_score: 61
}
],
[
"8-9",
{
top_team: "LSU",
bot_team: "Purdue",
top_score: 56,
bot_score: 80
}
],
[
"4-13",
{
top_team: "Stanford",
bot_team: "San Diego",
top_score: 77,
bot_score: 69
}
],
[
"5-12",
{
top_team: "U Conn",
bot_team: "BYU",
top_score: 58,
bot_score: 53
}
],
[
"1-8",
{
top_team: "Texas",
bot_team: "Purdue",
top_score: 77,
bot_score: 67
}
],
[
"4-5",
{
top_team: "Stanford",
bot_team: "U Conn",
top_score: 74,
bot_score: 85
}
],
[
"1-4",
{
top_team: "Texas",
bot_team: "U Conn",
top_score: 85,
bot_score: 76,
top_champion: true
}
]
])
links = [
{ id: "1-4" },
{ id: "1-8", parentId: "1-4" },
{ id: "4-5", parentId: "1-4" },
{ id: "1-16a", parentId: "1-8" },
{ id: "8-9", parentId: "1-8" },
{ id: "4-13", parentId: "4-5" },
{ id: "5-12", parentId: "4-5" },
{ id: "16a-16b", parentId: "1-16a" }
]
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.
