D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ngopal
Full window
Github gist
quick one-off script to visualize a sif format file in D3
<html> <head> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <script src="node_modules/d3/d3.min.js" type="text/javascript"></script> <script type="text/javascript"> var graph = {nodes:[], edges:[]}; d3.text("https://localhost:8000/cbioportal.sif", function(sif) { // get nodes d3.tsv.parseRows(sif, function(rows){ if (graph.nodes.map(function(items) { return items.name; }).indexOf(rows[0]) === -1) { graph.nodes.push({name:rows[0]}); } if (graph.nodes.map(function(items) { return items.name; }).indexOf(rows[2]) === -1) { graph.nodes.push({name:rows[2]}); } }); // make links d3.tsv.parseRows(sif, function(rows) { graph.edges.push({source:graph.nodes.map(function(items) { return items.name; }).indexOf(rows[0]), target:graph.nodes.map(function(items) { return items.name; }).indexOf(rows[2])}); }); // make network var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-12) .linkDistance(3) .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") .style("stroke-width", function(d) { return 0.5; }); var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 2) //.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> </head> <body> </body>