Random Graph Demo

by Gregor Aisch

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/gka/randomgraph.js/master/randomgraph.js"></script>
<div id="controls">
    <b>Random Graphs</b> <select>
        <option data-p="r:4,h:4">BalancedTree</option>
        <option data-p="n:150,m0:10,M:2">BarabasiAlbert</option>
        <option data-p="n:150,p:0.05">ErdosRenyi.np</option>
        <option data-p="n:100,m:250">ErdosRenyi.nm</option>
        <option data-p="n:120,K:4,alpha:3.5">WattsStrogatz.alpha</option>   
        <option data-p="n:150,K:4,beta:0.07">WattsStrogatz.beta</option>
    </select>
    <div id="params">
        
    </div>
    <div id="graph">
        <label>charge<input id="charge" type="range" min="0" value="50" max="100" /></label>
        <label>link distance<input id="dist" type="range" min="0" value="20" max="100" /></label>
    </div>
</div>

CSS

body {
    padding: 0px;
    font-family: HelveticaNeue;
    font-size: 11px;
}

#controls {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    background: hsla(0,0%,100%,0.7);
}
#controls b { font-size: 13px; padding-right: 20px }
#params, #graph { display: inline-block; margin-left: 20px; }
input { width: 6ex; margin-left: 1ex; text-align:right; }
label { margin-right: 2ex; font-family: Georgia; font-style:italic; }

input[type=range] { width: 80px; position:relative; top:4px}

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

JavaScript

var graph;

$('select').change(function() {
    loadPreset($('select option:selected'));
});

loadPreset($('select option').get(0));

function loadPreset(opt) {
    var P = $('#params').html('');
    $.each($(opt).data('p').split(','), function(i, p) {
        p = p.split(':');
        var inp = $('<input />').val(p[1]).appendTo(
            $('<label />').html(p[0]).appendTo(P)
        );
        inp.change(update);
    });
    
    function update() {
        var args = [];
        $('input').each(function(i,el) {
           args.push(+$(el).val());
        });
        $('svg').remove();
        renderForceGraph( eval('randomgraph.'+$(opt).html()+'('+args.join(',')+')'));
    }
    update();
}

function renderForceGraph(graph) {
  var width = innerWidth-40,
    height = innerHeight-40;

  var force = d3.layout.force()
      .charge(+$('#charge').val()*-1)
      .linkDistance(+$('#dist').val())
      .size([width, height]);

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  force
      .nodes(graph.nodes)
      .links(graph.edges)
      .start();
  
  var link = svg.selectAll(".link")
      .data(graph.edges)
    .enter().append("line")
      .attr("class", "link");
  
   var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .call(force.drag);
  
  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
  
    $('input[type=range]').off('change').on('change', function() {
        force
            .charge(+$('#charge').val()*-1)
           ...