stuff

_.md

[ Launch: Tributary inlet ] 24d7b6b862a94ecf655f by seliopou

config.json

{"description":"stuff","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/WoeC75t.png"}

inlet.js

function network() {
        var width = 800,
            height = 600;
  
        var data = { links : [], nodes : [] };
  
        var force = d3.layout.force()
            .nodes(data.nodes)
            .links(data.links)
            .linkDistance(60)
            .size([width, height])
            .charge(function(d, i) {
                return -15 * Math.exp(4, d.weight);
            })
            .start();
  
        function update() {
            force
                .size([width, height])
                .nodes(data.nodes)
                .links(data.links)
                .start();
        }
  
        function center(d) {
            return { x : d.x + 24, y : d.y + 24 };
        }

        var my = function(selection) {
          var g = selection.selectAll('g')
            .data([data]);
          
          var ge = g.enter().append('g');
          
            var link = ge.selectAll('.link')
                .data(function(d) { return d.links })
              .enter().append('line')
                .attr('class', 'link')
                .style('stroke-width', function(d) { return d.redundancy; })
            
            var host = ge.selectAll('.host')
                .data(function(d) {
                  return d.nodes.filter(function(d) { return d.type === 'host' })
                })
              .enter().append('image')
                .attr('width', 48)
                .attr('height', 48)
                .attr('xlink:href', '/static/terminal.svg')
                .attr('class', function(d, i) { return 'host ' + 'h-' + i; });
          
            var switch_ = ge.selectAll('.switch')
                .data(function(d) {
                  return d.nodes.filter(function(d) { return d.type === 'switch' });
                })
             .enter().append('image')
                .attr('width', 48)
                .attr('height', 48)
                .attr('xlink:href', '/static/switch.svg')
                .attr('class', function(d, i) { return 'switch ' + 's-' + i; })
            
            force.on('tick', function() {
              console.log('tick');
                link.attr("x1", function(d) { return center(d.source).x; })
                    .attr("y1", function(d) { return center(d.source).y; })
                    .attr("x2", function(d) { return center(d.target).x; })
                    .attr("y2", function(d) { return center(d.target).y; });
              
                host.attr('x', function(d) { return d.x; })
                    .attr('y', function(d) { return d.y; });
                switch_
                    .attr('x', function(d) { return d.x; })
                    .attr('y', function(d) { return d.y; })
            });
        };
        /* Getter/setter for the links in the topology. */
        my.links = function(_) {
            if (!arguments.length) return data.links;
            data.links = _;
            update();
            return my;
        };
        /* Getter/setter for the nodes in the topology. */
        my.nodes = function(_) {
            if (!arguments.length) return data.nodes;
            data.nodes = _;
            update();
            return my;
        };
        /* Getter/setter for the width of the canvas */
        my.width = function(_) {
            if (!arguments.length) return width;
            width = _;
            update();
            return my;
        };
        /* Getter/setter for the height of the canvas */
        my.height = function(_) {
            if (!arguments.length) return height;
            height = _;
            update();
            return my;
        };
        return my;
}

_network = network()
  .width(580)
  .height(580);

var nodes = [
  { type : "switch" },
  { type : "switch" },
  { type : "host" },
  { type : "host" },
  { type : "host" }];
       
var links = [
  { source : nodes[0], target : nodes[2] },
  { source : nodes[1], target : nodes[2] },
  { source : nodes[0], target : nodes[3] },
  { source : nodes[1], target : nodes[3] },
  { source : nodes[0], target : nodes[4] },
  { source : nodes[1], target : nodes[4] }];

_network
   .nodes(nodes)
   .links(links);

d3.select('svg').call(_network);