November 1, 2016 17:12
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .node circle {
  		fill: #999;
 		}
    .node text {
      font: 10px sans-serif;
    }
    .node--internal circle {
  		fill: #555;
 		}

 		.node--internal text {
  		text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
 		}
    .link {
  		fill: none;
  		stroke: #555;
  		stroke-opacity: 0.4;
  		stroke-width: 1.5px;
    }
    .rect{
      fill:red;
      stroke:black;
      stroke-width:2;
      opacity:0.5
    }
 }


  </style>
 </head>

 <body>
  <svg width="400" height="400"></svg>
  <script>
 		var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g");
    
    var tree = d3.tree()
    .size([height, width]);
    
    var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

 		d3.csv("data.csv", function(error, data) {
  		if (error) throw error;
           
      var root = stratify(data).sort(function(a, b) {
        return (a.height - b.height) || a.id.localeCompare(b.id); 
      });
      
      function collapse(d) {
        if(d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }
      root.children.forEach(collapse);

      tree(root);
      
      var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    	.enter().append("path")
      .attr("class", "link")
      /*.attr("d", function(d,i) {
            return "M" + d.x + "," + d.y
            + "C" + (d.x + d.parent.x)/2  + "," + d.y/2
            + " " + (d.x + d.parent.x)/2  + "," + (d.parent.y/2)
            + " " + d.parent.x + "," + (d.parent.y/2);       });
            */ 
      .attr("d",function(d){
        console.log(d.parent.x)
        d3.line()
          .curve(d3.curveCatmullRomOpen)
    			.x(function(d) { return d.parent.x })
    			.y(function(d) { return d.parent.y });
      	});
      
      var node = g.selectAll(".node")
      .data(root.descendants())
    	.enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : 				" node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y/2 + ")"; 				});
      
      
            
      node.append("rect")
      	.attr('x',function(d){
        		if(d.children){
            	return d.children +8;                  
          	}
      		})
      	.attr('y',function(d){return d.children -8;})
      	.attr('width',50)
      	.attr('height',20)
      	.attr('class','rect');
      
       node.append("text")
      	.attr("dy", 3)
      	.attr("x", function(d) { return d.children ? -8 : 8; })
      	.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      	.style('fill', 'yellow')
      	.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

      
     
      
 		});
    
  </script>
 </body>
	id	value
	flare
	flare.analytics
	flare.analytics.cluster
	flare.analytics.cluster.AgglomerativeCluster	3938
	flare.analytics.cluster.CommunityStructure	3812
	flare.analytics.cluster.HierarchicalCluster	6714
	flare.analytics.cluster.MergeEdge	743
	flare.analytics.graph
	flare.analytics.graph.BetweennessCentrality	3534
	flare.analytics.graph.LinkDistance	5731
	flare.analytics.graph.MaxFlowMinCut	7840
	flare.analytics.graph.ShortestPaths	5914
	flare.analytics.graph.SpanningTree	3416
	flare.analytics.optimization
	flare.analytics.optimization.AspectRatioBanker	7074
	flare.animate
	flare.animate.Easing	17010
	flare.animate.FunctionSequence	5842
	flare.animate.interpolate
	flare.animate.interpolate.ArrayInterpolator	1983
	flare.animate.interpolate.ColorInterpolator	2047
	flare.animate.interpolate.DateInterpolator	1375
	flare.animate.interpolate.Interpolator	8746
	flare.animate.interpolate.MatrixInterpolator	2202
	flare.animate.interpolate.NumberInterpolator	1382
	flare.animate.interpolate.ObjectInterpolator	1629
	flare.animate.interpolate.PointInterpolator	1675
	flare.animate.interpolate.RectangleInterpolator	2042
	flare.animate.ISchedulable	1041
	flare.animate.Parallel	5176
	flare.animate.Pause	449
	flare.animate.Scheduler	5593
	flare.animate.Sequence	5534
	flare.animate.Transition	9201
	flare.animate.Transitioner	19975
	flare.animate.TransitionEvent	1116
	flare.animate.Tween	6006
	flare.data
	flare.data.converters
	flare.data.converters.Converters	721
	flare.data.converters.DelimitedTextConverter	4294
	flare.data.converters.GraphMLConverter	9800
	flare.data.converters.IDataConverter	1314
	flare.data.converters.JSONConverter	2220
	flare.data.DataField	1759
	flare.data.DataSchema	2165
	flare.data.DataSet	586
	flare.data.DataSource	3331
	flare.data.DataTable	772
	flare.data.DataUtil	3322
	flare.display
	flare.display.DirtySprite	8833
	flare.display.LineSprite	1732
	flare.display.RectSprite	3623
	flare.display.TextSprite	10066
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	.node circle {
	fill: #999;
	}
	.node text {
	font: 10px sans-serif;
	}
	.node--internal circle {
	fill: #555;
	}

	.node--internal text {
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	}
	.link {
	fill: none;
	stroke: #555;
	stroke-opacity: 0.4;
	stroke-width: 1.5px;
	}
	.rect{
	fill:red;
	stroke:black;
	stroke-width:2;
	opacity:0.5
	}
	}


	</style>
	</head>

	<body>
	<svg width="400" height="400"></svg>
	<script>
	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	g = svg.append("g");

	var tree = d3.tree()
	.size([height, width]);

	var stratify = d3.stratify()
	.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

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

	var root = stratify(data).sort(function(a, b) {
	return (a.height - b.height) \|\| a.id.localeCompare(b.id);
	});

	function collapse(d) {
	if(d.children) {
	d._children = d.children;
	d._children.forEach(collapse);
	d.children = null;
	}
	}
	root.children.forEach(collapse);

	tree(root);

	var link = g.selectAll(".link")
	.data(root.descendants().slice(1))
	.enter().append("path")
	.attr("class", "link")
	/*.attr("d", function(d,i) {
	return "M" + d.x + "," + d.y
	+ "C" + (d.x + d.parent.x)/2 + "," + d.y/2
	+ " " + (d.x + d.parent.x)/2 + "," + (d.parent.y/2)
	+ " " + d.parent.x + "," + (d.parent.y/2); });
	*/
	.attr("d",function(d){
	console.log(d.parent.x)
	d3.line()
	.curve(d3.curveCatmullRomOpen)
	.x(function(d) { return d.parent.x })
	.y(function(d) { return d.parent.y });
	});

	var node = g.selectAll(".node")
	.data(root.descendants())
	.enter().append("g")
	.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y/2 + ")"; });



	node.append("rect")
	.attr('x',function(d){
	if(d.children){
	return d.children +8;
	}
	})
	.attr('y',function(d){return d.children -8;})
	.attr('width',50)
	.attr('height',20)
	.attr('class','rect');

	node.append("text")
	.attr("dy", 3)
	.attr("x", function(d) { return d.children ? -8 : 8; })
	.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
	.style('fill', 'yellow')
	.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });




	});

	</script>
	</body>