filter tree

_.md

[ Launch: filter tree ] 65136a598ab5c55f0eb9 by engleek

config.json

{"description":"filter tree","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/XN0OuUa.png"}

inlet.js

var svg = d3.select('svg')
	.style('padding', 50)
	.style('background', 'white');

var layout = d3.layout.tree()
  .size([400, 300]);

var diagonal = d3.svg.diagonal()
.projection(function (d) { return [d.y, d.x]; });

var data = {
  name: 'start',
  children: [{
    name: 'first',
    children: [{
      name: 'second',
      children: [{
        name: 'first',
        children: [{
          name: 'child1',
          size: 1234
        }, {
          name: 'child2', children: [{
            name: 'child1', size: 10
          }, {
            name: 'child1', size: 10
          }]
        }]
      }]
    }]
  }]
};

var nodes = layout.nodes(data);
var links = layout.links(nodes);

var lines = svg.selectAll('.link')
	.data(links);

lines.enter().append('path')
	.style('fill', 'none')
	.style('stroke', 'silver')
    .style('stroke-width', 2)
    .attr('d', function (d) {
      var source = {
        x: d.source.x,
        y: d.source.y + 3
      };
      var target = {
        x: d.target.x,
        y: d.target.y
      };
      return diagonal({ source: target, target: source })
    });

var g = svg.selectAll('.node')
    .data(nodes);

var node = g.enter().append('g')
	.classed('node', true)
	.attr('transform', function (d) { return 'translate(' + d.y + ', ' + d.x + ')'; });

node.append('circle')
    .attr('r', 8)
	.style('fill', 'black')
    .style('stroke', 'white')
	.style('stroke-width', 1);

node.append('circle')
    .attr('r', 5)
	.style('fill', 'gray')
    .style('stroke', 'white')
	.style('stroke-width', 1);

var midpoint = Math.ceil(nodes[0].x);

node.append('text')
	.style('font-size', 10)
	.style('text-anchor', 'end')
	.attr('dx', -5)
	.attr('dy', function (d) { return (d.x <= midpoint) ? -10: 15; })
	.text(function (d) { return d.name; });