Old school D3 from simpler times

All examples By author By category About

uptownnickbrown

Full window Github gist

exploring-trees

Built with blockbuilder.org

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

.link {
  fill: none;
  stroke: #000;
}

.node {
  stroke: #fff;
}
  
  .nodelabel {
    font-family:sans-serif;
    font-size:14px;
  }

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}
  
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 40, right: 40, bottom: 40, left: 40};
var projectionWidth = 800;
  	projectionHeight = 800;
  
var numRounds = 6;
var widthPerRound = projectionWidth / numRounds;
var champNode = projectionWidth - widthPerRound;
  console.log(champNode);
  
// BracketDiagonal derived from https://bl.ocks.org/kueda/1036776

d3.svg.bracketDiagonal = function() {
    var projection = function(d) { return [projectionWidth - widthPerRound - d.y, d.x]; } // 1000 - y = right-to-left

var path = function(pathData) {
      var pathString = "M" + pathData[0] + ' ' + pathData[1] + " " + pathData[2];
      return pathString;
    }

function diagonal(diagonalPath, i) {
      var source = diagonalPath.source,
          target = diagonalPath.target,
          // remember x = HEIGHT, w = WIDTH, argh, Mike, why?
          // makes a little more sense now...https://bl.ocks.org/mbostock/3184089
          pathData = [{x: source.x, y: source.y}, 
                      {x: target.x, y: source.y},
                      {x: target.x, y: target.y}];
      // d="M0,210 220,210 220,105 880,105"
      //console.log(pathData);
      pathData = pathData.map(projection);
      return path(pathData)
    }
    
    diagonal.projection = function(x) {
      if (!arguments.length) return projection;
      projection = x;
      return diagonal;
    };
    
    diagonal.path = function(x) {
      if (!arguments.length) return path;
      path = x;
      
      return diagonal;
    };
    
    return diagonal;
  }
  
var diagonal = d3.svg.bracketDiagonal();
  
// responsive pleaze https://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
  
var svg = d3
	.select("body")
	.append("div")
 .classed("svg-container", true) //container class to make it responsive
  .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
  	.attr("preserveAspectRatio", "xMinYMin meet")
   	.attr("viewBox", "0 0 " + projectionWidth + " " + projectionHeight)
   //class to make it responsive
 .classed("svg-content-responsive", true)
  .append("g");

d3.csv("graph.csv", function(error, links) {
  if (error) throw error;

var nodesByName = {};

// Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

var tree = d3.layout.tree().size([projectionHeight, projectionWidth - widthPerRound]);
  
  // Extract the root node and compute the layout.
  var nodes = tree.nodes(links[0].source);
  
  //Create the link lines.
  svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);
 
var champNodeString = "M" + champNode + "," + nodes[0].x + " " + projectionWidth + "," + nodes[0].x;
  
	svg.append("path")
		.attr("class","link")
		.attr("d",champNodeString);
  
   svg.selectAll(".node")
      .data(nodes)
    .enter().append("text")
      .attr("class", "nodelabel")
    	.attr("x", function(d) { return projectionWidth - widthPerRound - d.y; }) // 1000 - y = right-to-left
      .attr("y", function(d) { return d.x - 12; })
      .attr("dx", 6)
      .attr("dy", ".5em")
      .text(function(d) {
     		if (d.name.indexOf("TBD") > -1) {
          return "";
        } else {
     			return d.name;          
        }
   		});

function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

</script>

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