Les Miserables Co-occurrence

by chridam

HTML

<p>Order: <select id="order">
  <option value="name">by Name</option>
  <option value="count">by Frequency</option>
  <option value="group">by Cluster</option>
</select>

CSS

.background {
  fill: #eee;
}

line {
  stroke: #fff;
}

text {
 font: 10px sans-serif;
}

text.active {
  fill: red;
}

JavaScript

var miserables = 
    {
  "nodes":  
  [
    { "name": "flare",             "group":  1 }, 
    { "name": "analytics",           "group":  2 },   
    { "name": "cluster",       "group":  4 },
    { "name": "graph",       "group":  2 }
	
  ],

  "links":  
  [
    { "source":  0,  "target":  1,  "value":  1 },
    { "source":  1,  "target":  2,  "value": 10 },
    { "source":  1,  "target":  3,  "value":  6 }
  ]
}


var margin = {top: 120, right: 100, bottom: 10, left: 120},
    width = 500,
    height = 500;

var x = d3.scale.ordinal().rangeBands([0, width]),
    z = d3.scale.linear().domain([0, 4]).clamp(true),
    c = d3.scale.category10().domain(d3.range(10));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", margin.left + "px")
	.style("margin-top", margin.top + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//d3.json("foo.json", function(miserables) {
  var matrix = [],
      nodes = miserables.nodes,
      n = nodes.length;

  // Compute index per node.
  nodes.forEach(function(node, i) {
    node.index = i;
    node.count = 0;
    matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
  });

  // Convert links to matrix; count character occurrences.
  miserables.links.forEach(function(link) {
    matrix[link.source][link.target].z += link.value;
    matrix[link.target][link.source].z += link.value;
    matrix[link.source][link.source].z += link.value;
    matrix[link.target][link.target].z += link.value;
    nodes[link.source].count += link.value;
    nodes[link.target].count += link.value;
  });

 //alert("matrix = "+  ) 
  
  // Precompute the orders.
  var orders = {
    name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }),
    count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; }),
  ...