Bracket

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 d3noob's block: Simple vertical tree diagram using v4

forked from anonymous's block: Simple vertical tree diagram using v4

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    font: 14px sans-serif; 
    letter-spacing: 1px;
    background-color: #FDE3E6;
  }
  
  .link {
    fill: none;
    stroke: #a0a0a0;
    stroke-width: 1px;
  }
  
  .win {
    stroke-width: 3px !important;
  }
  
  #container {
    position: relative;
  }
  
  #labels .table {
    position: absolute;
    background-color: #FEEBEE;
   	padding: 5px 7px 3px;
    line-height: 2;
    min-width: 185px;
    box-shadow: 0px 2px 2px 1px rgba(34, 34, 34, 0.1);
    color: #222222;
    border: 0px solid rgba(34, 34, 34, 0.1);
  }
  
  #labels .played {
    --border-width: 0px;
  }
  
  #labels .thirdplace .title {
    color: #222222;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  #labels .thirdplace .content {
    color: #222222;
    font-size: 15px;
    padding: 5px 3px 3px;
    text-transform: uppercase;
    background-color: #FEEBEE;
    min-width: 185px;
    line-height: 1.2;
    border: 1px solid rgba(34, 34, 34, 0.1);
  }
  
  #labels .row  {
    display: table-row;
    }

#labels .cell {
    padding-left: 10px;
    display: table-cell;
    text-transform: uppercase;
  }
  
  .winner {
    font-weight: bold;
  }
  
  .cell.score {
    border-left: 1px solid rgba(34, 34, 34, 0.1);
  }
  
  .cell.name {
    min-width: 140px;
    padding-right: 10px;
  }
</style>
<body>
  
  <div id="container">
    <svg></svg>
  	<div id="labels"></div>
  </div
  
    	
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
  
<script>
  // set the dimensions and margins of the diagram
  var margin = {top: 40, right: 90, bottom: 50, left: 150},
      width = 900 - margin.left - margin.right,
      height = 650 - margin.top - margin.bottom,
      separationConstant = 1;
  
  var treeData = 
      {
        a: '&nbsp;',
        b: "Hammarby",
        score: "spelas nu",
        children: [
          { 
            a: '&nbsp;',
           	b: '&nbsp;',
            win: false,
            children: [
              { 
                a: '&nbsp;',
                b: '&nbsp;',
                win: false,
                children: [
              { 
                a: 'Halmstads BK',
                b: 'Hammarby',
                ascore: 3,
                bscore: 1,
                win: false,
              },
              { 
                a: 'IFK Norrköping',
                b: 'Östersunds FK',
                win: false,
              },      
            ]
              },
              { 
                a: '&nbsp;',
                b: 'Malmö FF',
                win: false,
                children: [
              { 
                a: 'Halmstads BK',
                b: 'Hammarby',
                win: false,
              },
              { 
                a: 'Malmö FF',
                b: 'Östersunds FK',
                ascore: 1,
                bscore: 0,
                win: true,
              },      
            ]
              },      
            ]
          },
          { 
            a: 'Halmstads BK',
            b: 'Hammarby',
            ascore: 0,
        		bscore: 1,
            win: true,
            children: [
              { 
                a: 'Halmstads BK',
                b: 'Östersunds FK',
                ascore: 3,
                bscore: 1,
                win: true,
                children: [
              { 
                a: 'Halmstads BK',
                b: 'Hammarby',
                ascore: 1,
                bscore: 0,
                win: true,
              },
              { 
                a: 'IFK Norrköping',
                b: 'Östersunds FK',
                ascore: 2,
                bscore: 3,
                win: true,
              },      
            ]
              },
              { 
                a: 'IFK Norrköping',
                b: 'Hammarby',
                ascore: 2,
                bscore: 3,
                win: true,
                children: [
              { 
                a: 'Halmstads BK',
                b: 'IFK Norrköping',
                ascore: 0,
                bscore: 1,
                win: true,
              },
              { 
                a: 'IFK Norrköping',
                b: 'Hammarby',
                ascore: 1,
                bscore: 2,
                win: true,
              },      
            ]
              },      
            ]
          }
        ]
      };
  
  // line connector between nodes
  var line = d3.line()
    .x(d => width - d.y)
    .y(d => d.x)
  	.curve(d3.curveStep);

// declares a tree layout and assigns the size
  var treemap = d3.tree()
      .size([height, width])  
  		.separation((a,b) =>a.parent == b.parent ? 1 : separationConstant);

//  assigns the data to a hierarchy using parent-child relationships
  var nodes = d3.hierarchy(treeData);

// maps the node data to the tree layout
  nodes = treemap(nodes);

var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left  + "," + margin.top + ")");

// adds the links between the nodes
  var link = g.selectAll(".link")
      .data(nodes.descendants().slice(1))
      .enter().append("path")
        .attr("class", "link")
        .attr("d", d => line([d, d.parent ]))
  			.classed("win", d => d.data.win)
                        
  // adds labels to the nodes
  function gameTemplate(d) {
    return '' +
      "<div class='row" + (d.data.ascore > d.data.bscore ? ' winner' : '') + "'>" +
      	"<span class='cell name'>" + d.data.a + "</span>" + 
      	"<span class='cell score'>" + (d.data.ascore >= 0 ? d.data.ascore : '') + "</span>" +  
      "</div>" + 
      
      "<div class='row" + (d.data.bscore > d.data.ascore ? ' winner' : '') + "'>" +
      	"<span class='cell name'>" + (d.data.b || '') + "</span>" + 
      	"<span class='cell score'>" + (d.data.bscore >= 0 ? d.data.bscore : '') + "</span>" +  
      "</div>";
  }

var labels = d3.select('#labels')
    .selectAll('div')
    .data(nodes.descendants())
    .enter()
      .append("div")
  		.classed("table", true)
  		.classed("played", d => (d.data.ascore || d.data.bscore)) 
 
      .style('left', d => (width - d.y + margin.left - 100) + 'px')
      .style('top', d => (d.x + (!d.data.b ? 12 : 0) + (!d.data.children ? - 4 : 0) + 10) + 'px')
      .html(d => gameTemplate(d))

// third place
  var thrdData = {data: { 
    a: '&nbsp;',
  	b: 'Halmstad BK',
  }};
  
  var thrd = d3.select('#labels').append("div")
  	.classed("thirdplace", true)
  	.style('position', 'absolute')
  	.style('left', width - 175 + 'px')
    .style('top', (height)/2 + margin.top - 48 + 'px')
  
  thrd
    .append("div")
      .classed("title", true)
      .html('Tredjeplats');
  
  thrd
  	.append("div")
  		.classed("content", true)
      .html(d => gameTemplate(thrdData));
  
  
</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-path.v1.min.js

https://d3js.org/d3-shape.v1.min.js