D3 Examples - Visualizing Alzheimer's Disease Using Reactome Data in D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
​
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
​
.link {
  stroke: #999;
  stroke-opacity: .6;
}
​
</style>
  <title>Visualization of Reactome SBML Files</title>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script>
  var width = 960,
      height = 500;
​
  var color = d3.scale.category20();
​
  var force = d3.layout.force()
      .charge(-120)
      .linkDistance(30)
      .size([width, height]);
​
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
​
  var reactants = [];
  var products = [];
  var reactions = [];
  var nodes = [];
  var links = [];
  var Rgraph = {};
​
  // on drop down pathway name change, load new file
  d3.json("js/alzheimerR.json", function(error, result) {
​
    // Create the nodes and edges connections for reactions and species
    var edges = [];
    for (i = 0; i < result.sbml.model.listOfReactions.reaction.length; i++) {
      // Reactions to Products
      edges.push('{"source":'+'"'+result.sbml.model.listOfReactions.reaction[i]['-id']+'","target":'+'"'+result.sbml.model.listOfReactions.reaction[i].listOfProducts.speciesReference['-species']+'"}');
      reactions.push(result.sbml.model.listOfReactions.reaction[i]['-id']);
      products.push(result.sbml.model.listOfReactions.reaction[i].listOfProducts.speciesReference['-species']);
      for (k = 0; k < result.sbml.model.listOfReactions.reaction[i].listOfReactants.speciesReference.length; k++) {
        // Reactants to Reactions
        edges.push('{"source":'+'"'+result.sbml.model.listOfReactions.reaction[i].listOfReactants.speciesReference[k]['-species']+'","target":'+'"'+result.sbml.model.listOfReactions.reaction[i]['-id']+'"}');
        reactants.push(result.sbml.model.listOfReactions.reaction[i].listOfReactants.speciesReference[k]['-species']);
      }
    }
​
    for (i = 0; i < result.sbml.model.listOfSpecies.species.length; i++) {
      //console.log(result.sbml.model.listOfSpecies.species[i]);
      if (typeof(result.sbml.model.listOfSpecies.species[i].annotation['rdf:RDF']['rdf:Description']['bqbiol:is']['rdf:Bag']['rdf:li']) === "object") {
        for (k = 0; k < result.sbml.model.listOfSpecies.species[i].annotation['rdf:RDF']['rdf:Description']['bqbiol:is']['rdf:Bag']['rdf:li'].length; k++) {
          console.log(result.sbml.model.listOfSpecies.species[i].annotation['rdf:RDF']['rdf:Description']['bqbiol:is']['rdf:Bag']['rdf:li'][k]['-rdf:resource']);
        }
      }
      else {
        console.log(result.sbml.model.listOfSpecies.species[i].annotation['rdf:RDF']['rdf:Description']['bqbiol:is']['rdf:Bag']['rdf:li']['-rdf:resource']);
      }
    }
​
    // setup nodes
    var combined = products.concat(reactants).concat(reactions);
    for (n = 0; n < combined.length; n++) {
      nodes.push('{"name":"'+combined[n]+'"}');
      // if ((/^species/).test(combined[n])) {
      //   nodes.push('{"name":"'+combined[n]+'","group":1}');
      // }
      // else {
      //   nodes.push('{"name":"'+combined[n]+'","group":"2"}'); 
      // }
    }
      
    // change source and target edges names to reflect node order
    for (x = 0; x < edges.length; x++) {
      links.push('{"source":'+nodes.indexOf('{"name":"'+JSON.parse(edges[x]).source+'"}')+', "target":'+nodes.indexOf('{"name":"'+JSON.parse(edges[x]).target+'"}')+'}');
    }
​
    // add groups to nodes for colors
    var nodesWithGroup = [];
    nodes.forEach(function(n) {
      if ((/^species/).test(JSON.parse(n).name)) {
        nodesWithGroup.push(n.substring(0, n.length - 1)+',"group":1}');
      }
      else {
        nodesWithGroup.push(n.substring(0, n.length - 1)+',"group":2}');
      }
    })
​
    Rgraph.nodes = nodesWithGroup;
    Rgraph.links = links;
    console.log(Rgraph);
​
    var graph = {};
    graph.nodes = JSON.parse('['+String(Rgraph.nodes)+']');
    graph.links = JSON.parse('['+String(Rgraph.links)+']');
​
    force
        .nodes(graph.nodes)
        .links(graph.links)
        .start();
​
    var link = svg.selectAll(".link")
        .data(graph.links)
      .enter().append("line")
        .attr("class", "link");
​
    var node = svg.selectAll(".node")
        .data(graph.nodes)
      .enter().append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", function(d) { return color(d.group); })
        .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; });
    });
  });
  </script>
  <script src="js/app.js"></script>
  <script src="js/xml2json.js"></script>
​
  <script type="text/x-handlebars">
  {{input type="text" value=greet placeholder="say hi"}}
  {{greeter greet}}
  </script>
​
​
</body>
</html>
    