Old school D3 from simpler times

All examples By author By category About

willzjc

Full window Github gist

d3 src tree

A visualization of files in the src directory of the d3 repository, based on Reingold-Tilford Tree.

Data Collection

Use git to clone a repository, then du to create a tsv with the directory contents.

git clone git://github.com/mbostock/d3.git
(echo -n 'size\tfile\n'; du -a d3) > d3.tsv

Burrow - recursive nesting

Branches may go to an arbitrary depth. burrow() creates this data structure from a JSON table. It's still getting tweaked, an example will go here when it's ready.

forked from syntagmatic's block: d3 src tree

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v2.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<script src="burrow.js"></script>

<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 2px;
}

.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
</body>
<script>
d3.tsv("d3.v3.tsv", function(files) {
  files.forEach(function(d) {
    d.size = parseInt(d.size);
    d.keys = d.file.replace(".js","").split("/");
    d.keys.forEach(function(sect,i) {
      d["section" + i] = sect;
    });
  });

var nested = burrow(files);

treemap(nested.children[11]);
});

/* Reingold-Tilford Tree */

var diameter = 960;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

function treemap(root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

node.append("circle")
      .attr("r", 2.5);

node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });
};

d3.select(self.frameElement).style("height", diameter + "px");
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v2.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<script src="burrow.js"></script>
​
<style>
​
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 2px;
}
​
.node {
  font: 12px sans-serif;
}
​
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
​
</style>
<body>
</body>
<script>
d3.tsv("d3.v3.tsv", function(files) {
  files.forEach(function(d) {
    d.size = parseInt(d.size);
    d.keys = d.file.replace(".js","").split("/");
    d.keys.forEach(function(sect,i) {
      d["section" + i] = sect;
    });
  });
​
  var nested = burrow(files);
​
  treemap(nested.children[11]);
});
​
/* Reingold-Tilford Tree */
​
var diameter = 960;
​
var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
​
var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
​
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
​
function treemap(root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);
​
  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);
​
  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
​
  node.append("circle")
      .attr("r", 2.5);
​
  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });
};
​
d3.select(self.frameElement).style("height", diameter + "px");
</script>
    

Modified http://d3js.org/d3.v2.js to a secure url

Modified http://underscorejs.org/underscore.js to a secure url

https://d3js.org/d3.v2.js

https://underscorejs.org/underscore.js