Skip to content

Commit 72f8daa

Browse files
katavizkataviz
authored
Merge pull request #150 from broadinstitute/integration
Integration
2 parents 4df54f6 + dc0e664 commit 72f8daa

File tree

9 files changed

+1684
-43
lines changed

9 files changed

+1684
-43
lines changed

‎build/js/gtex-viz.bundle.dev.js

Lines changed: 1340 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/GTExViz.dendroHeatmap.html

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
5+
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
6+
crossorigin="anonymous">
7+
<link href="https://fonts.googleapis.com/css?family=EB+Garamond|Libre+Franklin|Open+Sans|Roboto|Zilla+Slab" rel="stylesheet">
8+
<link rel="stylesheet" type="text/css" href="/css/expressMap.css">
9+
</head>
10+
<body class="container-fluid" style="margin-top:20px;">
11+
<div>
12+
<h3>GTExViz Demos</h3>
13+
<div>
14+
<h5>GTEx DendroHeatmap</h5>
15+
<div id="userDendroHeatmap"></div>
16+
</div>
17+
</div>
18+
</body>
19+
<script
20+
src="https://code.jquery.com/jquery-3.2.1.min.js"
21+
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
22+
crossorigin="anonymous">
23+
</script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
25+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
26+
<script src="/build/js/gtex-viz.bundle.dev.js"></script>
27+
<script>
28+
const data = {
29+
rowTree: "(((TP53:0.17,SLK:0.17):1.18,NDRG4:1.34):1.33,ACTN3:2.67);",
30+
colTree: "(((Adipose Visceral Omentum:0.06,Adipose Subcutaneous:0.06):0.00,Bladder:0.06):0.16,Adrenal Gland:0.22);",
31+
heatmap: [
32+
{
33+
"y": "SLK",
34+
"value": 35.505,
35+
"x": "Adipose Subcutaneous",
36+
"unit": "TPM"
37+
},
38+
{
39+
"y": "SLK",
40+
"value": 29.28,
41+
"x": "Adipose Visceral Omentum",
42+
"unit": "TPM"
43+
},
44+
{
45+
"y": "SLK",
46+
"value": 17.405,
47+
"x": "Adrenal Gland",
48+
"unit": "TPM"
49+
},
50+
{
51+
"y": "SLK",
52+
"value": 53.29,
53+
"x": "Bladder",
54+
"unit": "TPM"
55+
},
56+
{
57+
"y": "NDRG4",
58+
"value": 12.035,
59+
"x": "Adipose Subcutaneous",
60+
"unit": "TPM"
61+
},
62+
{
63+
"y": "NDRG4",
64+
"value": 6.531000000000001,
65+
"x": "Adipose Visceral Omentum",
66+
"unit": "TPM"
67+
},
68+
{
69+
"y": "NDRG4",
70+
"value": 134.8,
71+
"x": "Adrenal Gland",
72+
"unit": "TPM"
73+
},
74+
{
75+
"y": "NDRG4",
76+
"value": 7.1160000000000005,
77+
"x": "Bladder",
78+
"unit": "TPM"
79+
},
80+
{
81+
"y": "TP53",
82+
"value": 29.935,
83+
"x": "Adipose Subcutaneous",
84+
"unit": "TPM"
85+
},
86+
{
87+
"y": "TP53",
88+
"value": 23.55,
89+
"x": "Adipose Visceral Omentum",
90+
"unit": "TPM"
91+
},
92+
{
93+
"y": "TP53",
94+
"value": 18.515,
95+
"x": "Adrenal Gland",
96+
"unit": "TPM"
97+
},
98+
{
99+
"y": "TP53",
100+
"value": 40.51,
101+
"x": "Bladder",
102+
"unit": "TPM"
103+
},
104+
{
105+
"y": "ACTN3",
106+
"value": 0.33145,
107+
"x": "Adipose Subcutaneous",
108+
"unit": "TPM"
109+
},
110+
{
111+
"y": "ACTN3",
112+
"value": 0.3317,
113+
"x": "Adipose Visceral Omentum",
114+
"unit": "TPM"
115+
},
116+
{
117+
"y": "ACTN3",
118+
"value": 0.100005,
119+
"x": "Adrenal Gland",
120+
"unit": "TPM"
121+
},
122+
{
123+
"y": "ACTN3",
124+
"value": 0.48100000000000004,
125+
"x": "Bladder",
126+
"unit": "TPM"
127+
}
128+
]
129+
};
130+
const config = {
131+
id: 'userDendroHeatmap',
132+
data: data,
133+
useLog: true,
134+
logBase: 10,
135+
width: 600, // outer width
136+
height: 300, // outer height
137+
marginLeft: 20,
138+
marginRight: 40,
139+
marginTop: 50,
140+
marginBottom: 50,
141+
rowTreePanelWidth: 100,
142+
colTreePanelHeight: 100,
143+
colorScheme: "Blues",
144+
cornerRadius: 2,
145+
columnLabelHeight: 200,
146+
columnLabelAngle: 60,
147+
columnLabelPosAdjust: 10,
148+
rowLabelWidth: 200,
149+
legendSpace: 50
150+
};
151+
GTExViz.dendroHeatmap(config);
152+
</script>
153+
</html>

‎html/GTExViz.heatmap.html

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div>
1212
<h3>GTExViz Demos</h3>
1313
<div>
14-
<h5>GTEx Expression Heatmap</h5>
14+
<h5>GTEx Heatmap</h5>
1515
<div id="gtexVizHeatmap"></div>
1616
<div id="userHeatmap"></div>
1717
</div>
@@ -27,11 +27,15 @@ <h5>GTEx Expression Heatmap</h5>
2727

2828
<script src="/build/js/gtex-viz.bundle.dev.js"></script>
2929
<script>
30-
let data = generateRandomMatrix({x:50, y:6, scaleFactor:50});
30+
let data = generateRandomMatrix({x:50, y:6, scaleFactor:100});
31+
console.log(JSON.stringify(data));
32+
3133
GTExViz.heatmap();
3234
GTExViz.heatmap({
3335
id: 'userHeatmap',
3436
data: data,
37+
useLog: false,
38+
logBase: null,
3539
width: 800,
3640
height: 200,
3741
marginLeft: 20,
@@ -44,23 +48,25 @@ <h5>GTEx Expression Heatmap</h5>
4448
columnLabelAngle: 60,
4549
columnLabelPosAdjust: 10,
4650
rowLabelWidth: 100,
51+
4752
});
4853
function generateRandomMatrix(par={x:20, y:20, scaleFactor:1}){
4954
let range = n => Array.from(Array(n).keys());
5055
let X = range(par.x); // generates a 1-based list.
5156
let Y = range(par.y);
5257
let data = [];
5358
X.forEach((x)=>{
54-
x = 'x' + x.toString();
59+
x = 'col ' + x.toString();
5560
Y.forEach((y)=>{
56-
y = 'y' + y.toString();
61+
y = 'row ' + y.toString();
5762
let v = Math.random()*par.scaleFactor;
58-
data.push({
63+
let dataPoint = {
5964
x: x,
6065
y: y,
6166
value: v,
62-
displayValue: v
63-
});
67+
displayValue: v.toPrecision(3)
68+
};
69+
data.push(dataPoint);
6470
})
6571
});
6672
return data;

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ <h3>GTEx Visualization Demos</h3>
3232

3333
<h3>Demos with Random Data</h3>
3434
<li><a href="html/GTExViz.heatmap.html">Heatmap</a></li>
35+
<li><a href="html/GTExViz.dendroHeatmap.html">Heatmap with dendrograms</a></li>
36+
3537

3638

3739
</body>

0 commit comments

Comments
 (0)