Created
August 13, 2013 23:05
-
-
Save cariaso/6226599 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<meta charset="utf-8"> | |
<style> | |
.node { | |
stroke: black; | |
} | |
.link { | |
stroke: #999; | |
stroke-opacity: .6; | |
} | |
.nodelabel { | |
pointer-events: none; | |
stroke: black; | |
font-size : 12px | |
} | |
</style> | |
<head><title>Promethease D3 Graph</title> | |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script type="text/javascript"> | |
var buttonBarHeight = 30, | |
redrawLag = 300, | |
w = window, | |
d = document, | |
e = d.documentElement, | |
g = d.getElementsByTagName("body")[0], | |
x = (w.innerWidth || e.clientWidth || g.clientWidth || 500) - 100, | |
y = (w.innerHeight|| e.clientHeight|| g.clientHeight || 400) - 100, | |
width = 500, | |
height = 400; | |
var delay = (function(){ | |
var timer = 0; | |
return function(callback, ms){ | |
clearTimeout (timer); | |
timer = setTimeout(callback, ms); | |
}; | |
})(); | |
function doresize() { | |
delay(function(){ | |
x = (w.innerWidth || e.clientWidth || g.clientWidth) - 100; | |
y = (w.innerHeight|| e.clientHeight|| g.clientHeight) - 100; | |
$("svg").attr("width", x).attr("height", y-buttonBarHeight); | |
}, redrawLag); | |
}; | |
window.onresize = doresize; | |
</script> | |
</head> | |
<body> | |
<div id="chart" class="resizable"> | |
<button onclick="resetGraph();">Reset</button> | |
<button onclick="freezeGraph();">Freeze</button> | |
<span style="color:red"><b>d</b></span>elete | |
<script type="text/javascript"> | |
var graph = { | |
nodes:[ | |
{nodeName:"gs145", group:1, size:120, color:"#FFFFD0"}, | |
{nodeName:"rs12255372(T;T)", group:1, size:105, color:"#FF9090", gene:"TCF7L2"}, | |
{nodeName:"Breast cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Prostate cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Type-2 diabetes", group:2, size:20, color:"blue"}, | |
{nodeName:"rs6983267(G;G)", group:1, size:96, color:"#FF9090"}, | |
{nodeName:"23andMe/SNPs", group:2, size:20, color:"blue"}, | |
{nodeName:"Bladder cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Colon cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Colorectal cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Coriell Personalized Medicine Collaborative", group:2, size:20, color:"blue"}, | |
{nodeName:"Liver cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"Lung cancer", group:2, size:20, color:"blue"}, | |
{nodeName:"rs2981582(T;T)", group:1, size:96, color:"#FF9090", gene:"FGFR2"}, | |
{nodeName:"gs192", group:1, size:93, color:"#FFFFD0"}, | |
{nodeName:"Homocystinuria", group:2, size:20, color:"blue"}, | |
{nodeName:"gs227", group:1, size:90, color:"#FFFFD0"}, | |
{nodeName:"Taste", group:2, size:20, color:"blue"}, | |
{nodeName:"rs3803662(T;T)", group:1, size:90, color:"#FF9090", gene:"LOC643714"}, | |
{nodeName:"rs16969968(A;A)", group:1, size:90, color:"#FF9090", gene:"CHRNA5"}, | |
{nodeName:"Addiction", group:2, size:20, color:"blue"}, | |
{nodeName:"Cholinesterase Inhibitors", group:2, size:20, color:"blue"}, | |
{nodeName:"Chronic obstructive pulmonary disease", group:2, size:20, color:"blue"}, | |
{nodeName:"ClinVar", group:2, size:20, color:"blue"}, | |
{nodeName:"Nicotine dependence", group:2, size:20, color:"blue"}, | |
{nodeName:"rs17602729(C;T)", group:1, size:90, color:"#FF9090", gene:"AMPD1"}, | |
{nodeName:"Coronary artery disease", group:2, size:20, color:"blue"}, | |
{nodeName:"rs2237717(T;T)", group:1, size:90, color:"#FF9090", gene:"MET"}, | |
], | |
links:[ | |
{source:1, target:2, value:1}, | |
{source:1, target:3, value:1}, | |
{source:1, target:4, value:1}, | |
{source:5, target:6, value:1}, | |
{source:5, target:7, value:1}, | |
{source:5, target:8, value:1}, | |
{source:5, target:9, value:1}, | |
{source:5, target:10, value:1}, | |
{source:5, target:11, value:1}, | |
{source:5, target:12, value:1}, | |
{source:5, target:13, value:1}, | |
{source:5, target:3, value:1}, | |
{source:14, target:2, value:1}, | |
{source:14, target:11, value:1}, | |
{source:15, target:16, value:1}, | |
{source:17, target:18, value:1}, | |
{source:19, target:2, value:1}, | |
{source:20, target:21, value:1}, | |
{source:20, target:22, value:1}, | |
{source:20, target:23, value:1}, | |
{source:20, target:24, value:1}, | |
{source:20, target:13, value:1}, | |
{source:20, target:25, value:1}, | |
{source:26, target:24, value:1}, | |
{source:26, target:27, value:1}, | |
], | |
}; | |
var xscale = d3.scale.linear() | |
.domain([0, width]) | |
.range([0, width]); | |
var yscale = d3.scale.linear() | |
.domain([0, height]) | |
.range([height, 0]); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", x) | |
.attr("height", y-buttonBarHeight) | |
.call(d3.behavior.zoom() | |
.x(xscale).y(yscale).scaleExtent([0.5, 8]) | |
.on("zoom", rescale)) | |
; | |
var force = d3.layout.force() | |
.alpha(100) | |
.charge(-120) | |
.linkDistance(30) | |
.size([width, height]) | |
.nodes(graph.nodes) | |
.links(graph.links) | |
.start(); | |
var link = svg.selectAll(".link") | |
.data(graph.links) | |
.enter().append("line") | |
.attr("class", "link") | |
.style("stroke-width", function(d) { return Math.sqrt(d.value); }); | |
var node = svg.selectAll(".node") | |
.data(graph.nodes) | |
.enter().append("g") | |
.attr("class", "node") | |
.attr("stroke", function(d) { return d.color; }) | |
.call(force.drag); | |
// for a colored circle | |
node.append("circle") | |
.attr("r", function(d) { return d.size/5; }) | |
.style("fill", function(d) { return d.color; }) | |
// for an image | |
//node.append("image") | |
// .attr("xlink:href", "https://github.com/favicon.ico") | |
// .attr("x", -8) | |
// .attr("y", -8) | |
// .attr("width", 16) | |
// .attr("height", 16); | |
node.append("svg:text") | |
.attr("class","nodelabel") | |
.attr("dx", 5) | |
// .attr("stroke", "black") | |
.text(function(d) { return d.nodeName }) | |
; | |
//var texts = svg.selectAll("text.label") | |
// .data(graph.nodes) | |
// .enter().append("text") | |
// .text(function(d) { return d.nodeName; }) | |
// ; | |
force.on("tick", function(e) { | |
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
// node.attr("cx", function(d) { return d.x; }) | |
// .attr("cy", function(d) { return d.y; }); | |
// texts.attr("transform", function(d) { | |
// return "translate(" + d.x + "," + d.y + ")"; | |
// }); | |
}); | |
var frozen = false; | |
function resetGraph() { | |
for (v in graph.nodes) { | |
graph.nodes[v].x = NaN; | |
graph.nodes[v].y = NaN; | |
graph.nodes[v].px = NaN; | |
graph.nodes[v].py = NaN; | |
} | |
force.start() | |
frozen = false; | |
} | |
function freezeGraph() { | |
if (frozen) { | |
force.resume(); | |
frozen = false; | |
} else { | |
force.stop(); | |
frozen = true; | |
} | |
} | |
function rescale() { | |
var trans = d3.event.translate; | |
var scale = d3.event.scale; | |
// svg.attr("transform", | |
// "translate(" + trans + ")" | |
// + " scale(" + scale + ")" | |
// ); | |
link.attr("transform", | |
"translate(" + trans + ")" | |
+ " scale(" + scale + ")" | |
); | |
node.attr("transform", | |
"translate(" + trans + ")" | |
+ " scale(" + scale + ")" | |
); | |
// texts.attr("transform", | |
// "translate(" + trans + ")" | |
// + " scale(" + scale + ")" | |
// ); | |
// svg.selectAll(".label").attr("transform", | |
// "translate(" + trans + ")" | |
// + " scale(" + scale + ")" | |
// ); | |
force.start(); | |
} | |
</script> </body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment