Random Graph Demo

by sqiudward

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)
     ...