-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest03.html
66 lines (62 loc) · 2.89 KB
/
test03.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.v3.js"></script>
<style>
body {background-color:darkgray}
h1 {color:blue}
p {color:black}
</style>
</head>
<body>
<p>Drug combos</p>
<!-- <p class=p2>click on a square</p> -->
<p id=pcombo>click on a square</p>
<br/>
<svg width=108 height=108><rect width="100%" height="100%" fill="white"></svg>
<script type="text/javascript">
var svg = d3.select("svg");
svg.attr("width", 1000).attr("height", 108*6);
svg.select("rect").attr("width", 108*6);
//var mypath = [[25, 25, "blue"], [50, 10, "red"], [70, 40, "blue"], [90,10, "red"]];
var thecsv = [];
d3.csv("combo_ranking_n.syn_score2_all_sym.csv", function(error, cdat){
console.log("csv loaded");
console.log(cdat[50]);
thecsv = cdat;
//cdat.forEach(function(d, i) {
// cdat[i] = d;
//})
svg.selectAll("rect").data(cdat).enter() // , function(d) { return d; }
.append("rect")
.attr("x", function(d) { return -6+6*Number(d["Drug1.num"]);})
.attr("y", function(d) { return -6+6*Number(d["Drug2.num"]);})
.attr("width", 5).attr("height", 5)
.attr("fill",function(d) {
if (Number(d["Drug1.num"])<Number(d["Drug2.num"])) return d3.hsl(0,0.5,1-Number(d["n.syn"])/40)
else return d3.hsl(200,0.2,1-Number(d["n.syn.score"])/5)
})
.on("click", function(d) {
thi = d3.select(this);
//thi.attr("fill", "blue");
svg.selectAll("text").remove();
svg.append("text").attr("x", thi.attr("x"))
.attr("y", thi.attr("y"))
//.text("r="+d)
.text(d["Drug1"]+" --- "+d["Drug2"]+" ("+d["n.syn"]+")")
d3.select("#pcombo").html(d["Drug1"]+" ("+d["Drug1.target"]+") "+" --- "+d["Drug2"]+" ("+d["Drug2.target"]+") "+".<br> "+d["n.syn"]+
" cell lines showed synergy.<br> Combo specificity score: "+d["n.syn.score"])
});
});
//svg.selectAll("rect").on("click", function(d) {d3.select(this).attr("fill", "blue")})
// var cdatd = [{"Drug1.num": 23, "Drug2.num": 12}, {"Drug1.num": 3, "Drug2.num": 2}]
// var cdatt = cdat.slice(0, 2);
// console.log(cdatd);
// console.log("cdatt:");
// console.log(cdatt);
//console.log(mypath[0][1]);
</script>
</body>
</html>