-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
119 lines (106 loc) · 3.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<script type="text/javascript" src="d3.v2.js"></script>
<script type="text/javascript" src="data.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
font: 10px Arial;
}
</style>
</head>
<body>
<script type="text/javascript">
//height of each row in the heatmap
var h = 10;
//width of each column in the heatmap
var w = 5;
//attach a SVG node to the document
//height and width defined by the row/column lengths
var mySVG = d3.select("body")
.append("svg")
.attr("width", (w * cols.length) + 400)
.attr("height", (h * rows.length + 100))
.style('position','absolute')
.style('top',0)
.style('left',0);
//define a color scale using the min and max expression values
var colorScale = d3.scale.linear()
.domain([minData, 0, maxData])
.range(["blue", "red", "white"]);
//generate the heatmap
var heatmapRow = mySVG.selectAll(".heatmap")
.data(data)
.enter().append("g");
var heatmapRects = heatmapRow
.selectAll(".rect")
.data(function(d) {
return d;
}).enter().append("svg:rect")
.attr('width',w)
.attr('height',h)
.attr('x', function(d) {
return (d[2] * w) + 65;
})
.attr('y', function(d) {
return (d[1] * h) + 50;
})
.style('fill',function(d) {
return colorScale(d[0]);
});
//label columns
var columnLabel = mySVG.selectAll(".colLabel")
.data(rows)
.enter().append('svg:text')
.attr('y', function(d,i) {
return ((i + 0.5) * h) + 55;
})
.attr('x', 30) //changes
.attr('class','label')
.style('text-anchor','middle')
.text(function(d) {return d;});
//expression value label
var expLab = d3.select("body")
.append('div')
.style('height',23)
.style('position','absolute')
.style('background','FFE53B')
.style('opacity',0.8)
.style('top',0)
.style('padding',10)
.style('left',40)
.style('display','none');
//heatmap mouse events
heatmapRects
.on('mouseover', function(d,i) {
d3.select(this)
.attr('stroke-width',1)
.attr('stroke','black')
output = '<b>' + cols[i] + '</b><br>';
//for (var j = 0 , count = data[i].length; j < count; j ++ ) {
// output += data[i][j][0] + ", ";
// }
expLab
.style('left',(i * w))
.style('top',(d[1] * h) + 60)
.style('display','block')
.html(output.substring(0,output.length - 2));
})
//heatmap mouse events
heatmapRects
.on('click', function(d,i) {
d3.select(this)
a="http://www.ncbi.nlm.nih.gov/gene/?term="+cols[i];
window.open(a,'_blank');
})
.on('mouseout', function(d,i) {
d3.select(this)
.attr('stroke-width',0)
.attr('stroke','none')
expLab
.style('display','none')
});
</script>
</body>
</html>