cdetrio/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A radix "trie" forked from http://bl.ocks.org/jdherg/6655943. Here, only showing names starting with A-H, and adjusted to be a smaller demo which fits the whole tree in a 900px container.

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

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

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

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

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 900;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 80])
    .separation(function(a, b) { return (a.parent == b.parent ? 2 : 4) / 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-200)
    .attr("height", diameter-100)
  .append("g")
    .attr("transform", "translate(" + (diameter-200)/2 + "," + (diameter-200)/2 + ")");
    //.attr("transform", "scale(0.5)");

d3.json("name_trie.json", function(error, 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", 4.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 - 150 + "px");

</script>

## name_trie.json
{"name": "XOXO","children":[
{"name": "A","children": [{"name": "a","children": [{"name": "nand"},{"name": "ron"}]},{"name": "d","children": [{"name": "am"},{"name": "i"}]},{"name": "gnes"},{"name": "l","children": [{"name": "e","children": [{"name": "c"},{"name": "xander"}]},{"name": "ison"},{"name": "lison"},{"name": "yse"}]},{"name": "m","children": [{"name": "anda"},{"name": "ber"},{"name": "it"},{"name": "y"}]},{"name": "n","children": [{"name": "d","children": [{"name": "r","children": [{"name": "ew"},{"name": "és"}]},{"name": "y"}]},{"name": "il"},{"name": "ja"},{"name": "na"},{"name": "thony"}]},{"name": "r","children": [{"name": "iel"},{"name": "kadiy"},{"name": "lie"},{"name": "ne"}]},{"name": "s","children": [{"name": "a"},{"name": "ha"}]},{"name": "u","children": [{"name": "drey"},{"name": "stin"}]}]},
{"name": "B","children": [{"name": "J"},{"name": "arbara"},{"name": "e","children": [{"name": "n","children": [{"name": "jamin"},{"name": "nett"}]},{"name": "rtrand"}]},{"name": "illy"},{"name": "laine"},{"name": "obby"},{"name": "r","children": [{"name": "a","children": [{"name": "d"},{"name": "n","children": [{"name": "don"},{"name": "gien"}]}]},{"name": "e","children": [{"name": "n","children": [{"name": "dan"},{"name": "t"}]},{"name": "tt"}]},{"name": "i","children": [{"name": "an"},{"name": "tta"}]},{"name": "y","children": [{"name": "an"},{"name": "ce"},{"name": "nn"}]}]},{"name": "yrne"}]},
{"name": "C","children": [{"name": "J"},{"name": "a","children": [{"name": "bel"},{"name": "itlin"},{"name": "l"},{"name": "meron"},{"name": "r","children": [{"name": "la"},{"name": "olina"}]},{"name": "sey"}]},{"name": "h","children": [{"name": "a","children": [{"name": "d"},{"name": "ll"},{"name": "rles"},{"name": "se"}]},{"name": "elsea"},{"name": "ip"},{"name": "loe"},{"name": "r","children": [{"name": "ist","children": [{"name": "a"},{"name": "i","children": [{"name": "e"},{"name": "na"}]},{"name": "opher"}]},{"name": "ys"}]}]},{"name": "laude"},{"name": "o","children": [{"name": "dy"},{"name": "l","children": [{"name": "by"},{"name": "in"},{"name": "l","children": [{"name": "een"},{"name": "in"}]}]},{"name": "oper"},{"name": "ry"}]},{"name": "r","children": [{"name": "aig"},{"name": "ystal"}]}]},
{"name": "D","children": [{"name": "."},{"name": "a","children": [{"name": "irien"},{"name": "l","children": [{"name": "as"},{"name": "ton"}]},{"name": "n","children": [{"name": "ielle"},{"name": "ny"}]},{"name": "r","children": [{"name": "i","children": [{"name": "ck"},{"name": "us"}]},{"name": "yl"}]},{"name": "v","children": [{"name": "e"},{"name": "id"}]},{"name": "wn"}]},{"name": "e","children": [{"name": "b"},{"name": "epak"},{"name": "rek"},{"name": "vin"}]},{"name": "i","children": [{"name": "ana"},{"name": "llon"}]},{"name": "ouglas"},{"name": "u","children": [{"name": "ane"},{"name": "ncan"}]},{"name": "ylan"}]},
{"name": "E","children": [{"name": "d","children": [{"name": "die"},{"name": "win"}]},{"name": "l","children": [{"name": "aine"},{"name": "ea"},{"name": "i","children": [{"name": "ot"},{"name": "z"}]},{"name": "len"}]},{"name": "mmet"},{"name": "r","children": [{"name": "i","children": [{"name": "ca"},{"name": "ka"},{"name": "n"}]},{"name": "nie"}]},{"name": "van"}]},{"name": "Fr","children": [{"name": "an","children": [{"name": "cisco"},{"name": "k"}]},{"name": "e","children": [{"name": "derick"},{"name": "ya"}]}]},
{"name": "G","children": [{"name": "a","children": [{"name": "b","children": [{"name": "e"},{"name": "riel"}]},{"name": "r","children": [{"name": "rett"},{"name": "y"}]}]},{"name": "eoff"},{"name": "inger"},{"name": "lenn"},{"name": "ordon"},{"name": "r","children": [{"name": "ant"},{"name": "eg"}]}]},
{"name": "H","children": [{"name": "a","children": [{"name": "ddie"},{"name": "lstead"},{"name": "o"},{"name": "rlo"},{"name": "yley"}]},{"name": "e","children": [{"name": "ather"},{"name": "lena"},{"name": "nry"}]},{"name": "u","children": [{"name": "gh"},{"name": "y"}]}]}
]}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

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

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

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var diameter = 900;

	var tree = d3.layout.tree()
	.size([360, diameter / 2 - 80])
	.separation(function(a, b) { return (a.parent == b.parent ? 2 : 4) / 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-200)
	.attr("height", diameter-100)
	.append("g")
	.attr("transform", "translate(" + (diameter-200)/2 + "," + (diameter-200)/2 + ")");
	//.attr("transform", "scale(0.5)");

	d3.json("name_trie.json", function(error, 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", 4.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 - 150 + "px");

	</script>
	{"name": "XOXO","children":[
	{"name": "A","children": [{"name": "a","children": [{"name": "nand"},{"name": "ron"}]},{"name": "d","children": [{"name": "am"},{"name": "i"}]},{"name": "gnes"},{"name": "l","children": [{"name": "e","children": [{"name": "c"},{"name": "xander"}]},{"name": "ison"},{"name": "lison"},{"name": "yse"}]},{"name": "m","children": [{"name": "anda"},{"name": "ber"},{"name": "it"},{"name": "y"}]},{"name": "n","children": [{"name": "d","children": [{"name": "r","children": [{"name": "ew"},{"name": "és"}]},{"name": "y"}]},{"name": "il"},{"name": "ja"},{"name": "na"},{"name": "thony"}]},{"name": "r","children": [{"name": "iel"},{"name": "kadiy"},{"name": "lie"},{"name": "ne"}]},{"name": "s","children": [{"name": "a"},{"name": "ha"}]},{"name": "u","children": [{"name": "drey"},{"name": "stin"}]}]},
	{"name": "B","children": [{"name": "J"},{"name": "arbara"},{"name": "e","children": [{"name": "n","children": [{"name": "jamin"},{"name": "nett"}]},{"name": "rtrand"}]},{"name": "illy"},{"name": "laine"},{"name": "obby"},{"name": "r","children": [{"name": "a","children": [{"name": "d"},{"name": "n","children": [{"name": "don"},{"name": "gien"}]}]},{"name": "e","children": [{"name": "n","children": [{"name": "dan"},{"name": "t"}]},{"name": "tt"}]},{"name": "i","children": [{"name": "an"},{"name": "tta"}]},{"name": "y","children": [{"name": "an"},{"name": "ce"},{"name": "nn"}]}]},{"name": "yrne"}]},
	{"name": "C","children": [{"name": "J"},{"name": "a","children": [{"name": "bel"},{"name": "itlin"},{"name": "l"},{"name": "meron"},{"name": "r","children": [{"name": "la"},{"name": "olina"}]},{"name": "sey"}]},{"name": "h","children": [{"name": "a","children": [{"name": "d"},{"name": "ll"},{"name": "rles"},{"name": "se"}]},{"name": "elsea"},{"name": "ip"},{"name": "loe"},{"name": "r","children": [{"name": "ist","children": [{"name": "a"},{"name": "i","children": [{"name": "e"},{"name": "na"}]},{"name": "opher"}]},{"name": "ys"}]}]},{"name": "laude"},{"name": "o","children": [{"name": "dy"},{"name": "l","children": [{"name": "by"},{"name": "in"},{"name": "l","children": [{"name": "een"},{"name": "in"}]}]},{"name": "oper"},{"name": "ry"}]},{"name": "r","children": [{"name": "aig"},{"name": "ystal"}]}]},
	{"name": "D","children": [{"name": "."},{"name": "a","children": [{"name": "irien"},{"name": "l","children": [{"name": "as"},{"name": "ton"}]},{"name": "n","children": [{"name": "ielle"},{"name": "ny"}]},{"name": "r","children": [{"name": "i","children": [{"name": "ck"},{"name": "us"}]},{"name": "yl"}]},{"name": "v","children": [{"name": "e"},{"name": "id"}]},{"name": "wn"}]},{"name": "e","children": [{"name": "b"},{"name": "epak"},{"name": "rek"},{"name": "vin"}]},{"name": "i","children": [{"name": "ana"},{"name": "llon"}]},{"name": "ouglas"},{"name": "u","children": [{"name": "ane"},{"name": "ncan"}]},{"name": "ylan"}]},
	{"name": "E","children": [{"name": "d","children": [{"name": "die"},{"name": "win"}]},{"name": "l","children": [{"name": "aine"},{"name": "ea"},{"name": "i","children": [{"name": "ot"},{"name": "z"}]},{"name": "len"}]},{"name": "mmet"},{"name": "r","children": [{"name": "i","children": [{"name": "ca"},{"name": "ka"},{"name": "n"}]},{"name": "nie"}]},{"name": "van"}]},{"name": "Fr","children": [{"name": "an","children": [{"name": "cisco"},{"name": "k"}]},{"name": "e","children": [{"name": "derick"},{"name": "ya"}]}]},
	{"name": "G","children": [{"name": "a","children": [{"name": "b","children": [{"name": "e"},{"name": "riel"}]},{"name": "r","children": [{"name": "rett"},{"name": "y"}]}]},{"name": "eoff"},{"name": "inger"},{"name": "lenn"},{"name": "ordon"},{"name": "r","children": [{"name": "ant"},{"name": "eg"}]}]},
	{"name": "H","children": [{"name": "a","children": [{"name": "ddie"},{"name": "lstead"},{"name": "o"},{"name": "rlo"},{"name": "yley"}]},{"name": "e","children": [{"name": "ather"},{"name": "lena"},{"name": "nry"}]},{"name": "u","children": [{"name": "gh"},{"name": "y"}]}]}
	]}