Skip to content

Instantly share code, notes, and snippets.

@uptownnickbrown
Last active Apr 23, 2016
Embed
What would you like to do?
exploring-trees
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment