uptownnickbrown/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## graph.csv

          
            source
            target

            
              TBD1
              TBD2

            
              TBD1
              TBD3

            
              TBD2
              TBD4

            
              TBD2
              TBD5

            
              TBD3
              TBD6

            
              TBD3
              TBD7

            
              TBD4
              TBD8

            
              TBD4
              TBD9

            
              TBD5
              TBD10

            
              TBD5
              TBD11

            
              TBD6
              TBD12

            
              TBD6
              TBD13

            
              TBD7
              TBD14

            
              TBD7
              TBD15

            
              TBD8
              1 Wiener

            
              TBD8
              TBD17

            
              TBD9
              8 Garren

            
              TBD9
              9 Krater

            
              TBD10
              5 Reid

            
              TBD10
              12 Pfeiffer

            
              TBD11
              4 Garland

            
              TBD11
              13 Yi

            
              TBD12
              6 Charles

            
              TBD12
              11 Middleton

            
              TBD13
              3 Kem

            
              TBD13
              TBD27

            
              TBD14
              7 Roberts

            
              TBD14
              10 J. Schneider

            
              TBD15
              2 Lynch

            
              TBD15
              TBD31

            
              TBD17
              Lamb

            
              TBD17
              Lauritsen

            
              TBD27
              Tao

            
              TBD27
              Dovidio

            
              TBD31
              Becker

            
              TBD31
              Schuricht

## index.html
<!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 http://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...http://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 http://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>
	source	target
	TBD1	TBD2
	TBD1	TBD3
	TBD2	TBD4
	TBD2	TBD5
	TBD3	TBD6
	TBD3	TBD7
	TBD4	TBD8
	TBD4	TBD9
	TBD5	TBD10
	TBD5	TBD11
	TBD6	TBD12
	TBD6	TBD13
	TBD7	TBD14
	TBD7	TBD15
	TBD8	1 Wiener
	TBD8	TBD17
	TBD9	8 Garren
	TBD9	9 Krater
	TBD10	5 Reid
	TBD10	12 Pfeiffer
	TBD11	4 Garland
	TBD11	13 Yi
	TBD12	6 Charles
	TBD12	11 Middleton
	TBD13	3 Kem
	TBD13	TBD27
	TBD14	7 Roberts
	TBD14	10 J. Schneider
	TBD15	2 Lynch
	TBD15	TBD31
	TBD17	Lamb
	TBD17	Lauritsen
	TBD27	Tao
	TBD27	Dovidio
	TBD31	Becker
	TBD31	Schuricht
	<!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 http://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...http://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 http://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>