vertical filter tree

_.md

[ Launch: filter tree ] 394c4750fdfe5090ab72 by engleek
[ Launch: filter tree ] 65136a598ab5c55f0eb9 by engleek

config.json

{"description":"vertical 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();

var data = {
  name: 'start',
  children: [{
    name: 'apache : status : 404',
    children: [{
      name: 'sshd : ip : 192.168.1.1',
      children: [{
        name: 'firewall : sys change : tuesday',
        children: [{
          name: 'dpkg : packages : tuesday',
          size: 1234
        }, {
          name: 'apache : port', children: [{
            name: 'apache : static', size: 10
          }, {
            name: 'apache : proxy', size: 0
          }]
        }]
      }]
    }]
  }]
};

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', diagonal);

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

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

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

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

node.append('text')
	.style('font-size', 10)
	.style('text-anchor', 'end')
	.attr('dx', -10)
	.attr('dy', 3)
	.text(function (d) { return d.name; });