I am currently trying to recreate a radial bracket for the 2023 NHL playoffs, the final design would look something like this NHL Radial Bracket.
I currently have the outermost ring completed for this but am unsure and currently unable to figure out a way to implement more radial rings past the first one I’ve made.
The code so far:
<!DOCTYPE html>
<html lang = "en">
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.wedge:hover {
stroke-width: 15;
}
</style>
</head>
<body>
<script>
//creating the size of SVG area
var svg = d3.select("body")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.style("border", "1px solid black");
//moving svg area to center of page
d3.select("svg")
.append("g")
.attr("transform", "translate(500,350)");
//creating segments for the annulus/pie graph
var playoffRoundOne = d3.pie()
.startAngle(Math.PI / 4)
.endAngle(Math.PI * 3)
.padAngle(.03)
.value((d) => d.wins)
.sort(function (a, b) {
return b.value > a.value;
});
//dataset for playoff team, includes team name, team wins, and team logo
var data = playoffRoundOne([{...}]);
var colorScaleFill = d3.scaleOrdinal()
.domain(["avalanche", "kraken", "stars", "wild", "knights",
"jets", "oilers", "kings", "bruins", "panthers",
"leafs", "lightning", "canes", "islanders", "devils",
"rangers",])
.range(["#6F263D", "#99D9D9", "#006847", "#154734", "#B4975A",
"#041E42", "#FF4C00", "#A2AAAD", "#FFB81C", "#B9975B",
"#00205B", "#FFFFFF", "#CE1126", "#F47D30", "#CE1126", "#0038A8"]);
//creating circles
var arcGen = d3.arc()
.innerRadius(242)
.outerRadius(300);
//colors
d3.select("svg g")
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", arcGen)
.attr("stroke", (d) => colorScaleFill((d)))
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("fill", (d) => colorScaleFill((d)))
.attr("class","wedge");
//logos
var imgs = svg.selectAll("image").data(data);
imgs.enter()
.append("image")
.attr("xlink:href", (d)=>(d.data.logo))
.attr("width", "30")
.attr("height", "40")
.attr("x", d => d3.pointRadial((d.startAngle + d.endAngle - 0.02)/2 , (270))[0])
.attr("y", d => d3.pointRadial((d.startAngle + d.endAngle - 0.02)/2 , (540)/2)[1])
.attr("transform","translate(488,330) rotate(1.2)");
</script>
</body>
</html>