sigma.js

Detroit Ed Ind Cplx Visualizationizerator

Description

By pulling in data from these sheets, I used sigma.js to build a graph of relationships.

How to use

Zoom in using mouse wheel.

Show only kilgore by appending "#kilgore" to end of URL.

Todo

Everything

<!DOCTYPE html>
<html>
<head>
<title>DETROIT EDUCATIONAL INDUSTRIAL COMPLEX... the sigma.js edition!</title>
<style>
#sigma-example {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
</style>
<script src="rsvp.js"></script>
<script src="sigma.concat.js"></script>
<script src="sigma.forceatlas2.js"></script>
</head>
<body>
<div id="sigma-example"></div>
<script type="text/javascript">

var create_cb_promise = function(cb_name) {
  var promise = new RSVP.Promise(function(resolve, reject) {
    window[cb_name] = function(data) {
      resolve(data);
    };
  });
  return promise;
};

var promises = {
  nodes: create_cb_promise('cb_nodes'),
  edges: create_cb_promise('cb_edges')
};

function limit_to_kilgore(str) {
  if (window.location.hash !== '#kilgore') {
    return true;
  } else {
    return (str.indexOf('kilgoreuniverse: TRUE') > -1);
  }
}

// after spreadsheets are loaded, create the graph
RSVP.hash(promises).then(function(sheets) {

var sigRoot = document.getElementById('sigma-example');

// for ez debug, attach sigInst to global scope!
  window.sigInst = sigma.init(sigRoot).drawingProperties({
    defaultLabelColor: '#333',
    defaultLabelSize: 10,
    defaultLabelBGColor: '#ddd',
    defaultLabelHoverColor: '#000',
    labelThreshold: 6,
    defaultEdgeType: 'curve',
    edgeLabels: true
  }).graphProperties({
    minNodeSize: 0.1,
    maxNodeSize: 5,
    minEdgeSize: 5,
    maxEdgeSize: 5,
    sideMargin: 50
  }).mouseProperties({
    maxRatio: 10
  });

sheets.nodes.feed.entry.forEach(function(val, idx) {
    if (limit_to_kilgore(val.content.$t)) {
      sigInst.addNode(val.title.$t, {
        label: val.content.$t,
        color: 'blue',
        x: Math.random()*10,
        y: Math.random()*10,
        size: 0.1,
        cluster: val.content.$t.match(/tagtype: (\w*)/)[1]
      });
    }
  });

sheets.edges.feed.entry.forEach(function(val, idx) {
    if (limit_to_kilgore(val.content.$t)) {
      try {
        var origin = val.title.$t;
        var destination = val.content.$t.match(/target: ([0-9]*)/)[1];
        var label = origin+'->'+destination+': '+val.content.$t.match(/label: (.*)/)[1];
        sigInst.addEdge(label, origin, destination);
      } catch (e) {
        console.error('wtf:');
        console.error(e);
      }
    }
  });

sigInst
    .draw()
    .startForceAtlas2();

// stupid stupid stupid
  window.setTimeout(function() {
    sigInst.stopForceAtlas2();
  }, 10000);
});

</script>

<script src="https://spreadsheets.google.com/feeds/list/0aty9mamoysdfdfd6avpfnfzucdk5r3nkajj6a3jvoxc/1/public/basic/?alt=json-in-script&callback=cb_nodes"></script>

<script src="https://spreadsheets.google.com/feeds/list/0aty9mamoysdfdfd6avpfnfzucdk5r3nkajj6a3jvoxc/2/public/basic/?alt=json-in-script&callback=cb_edges"></script>
</body>
</html>

Updated missing url https://spreadsheets.google.com/feeds/list/0Aty9maMoYSDFdFd6aVpFNFZucDk5R3NkajJ6a3JvOXc/1/public/basic/?alt=json-in-script&callback=cb_nodes to https://spreadsheets.google.com/feeds/list/0aty9mamoysdfdfd6avpfnfzucdk5r3nkajj6a3jvoxc/1/public/basic/?alt=json-in-script&callback=cb_nodes

Updated missing url https://spreadsheets.google.com/feeds/list/0Aty9maMoYSDFdFd6aVpFNFZucDk5R3NkajJ6a3JvOXc/2/public/basic/?alt=json-in-script&callback=cb_edges to https://spreadsheets.google.com/feeds/list/0aty9mamoysdfdfd6avpfnfzucdk5r3nkajj6a3jvoxc/2/public/basic/?alt=json-in-script&callback=cb_edges

https://spreadsheets.google.com/feeds/list/0Aty9maMoYSDFdFd6aVpFNFZucDk5R3NkajJ6a3JvOXc/1/public/basic/?alt=json-in-script&callback=cb_nodes

https://spreadsheets.google.com/feeds/list/0Aty9maMoYSDFdFd6aVpFNFZucDk5R3NkajJ6a3JvOXc/2/public/basic/?alt=json-in-script&callback=cb_edges