|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> |
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"> |
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic"> |
|
<style> |
|
|
|
.dropbtn { |
|
background-color: blue; |
|
color: white; |
|
padding: 16px; |
|
font-size: 16px; |
|
border: none; |
|
cursor: pointer; |
|
} |
|
|
|
.dropdown { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
.dropdown-content { |
|
display: none; |
|
position: absolute; |
|
background-color: #f9f9f9; |
|
min-width: 160px; |
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
|
} |
|
|
|
.dropdown-content a { |
|
color: black; |
|
padding: 12px 16px; |
|
text-decoration: none; |
|
display: block; |
|
} |
|
|
|
.dropdown-content a:hover {background-color: #f1f1f1} |
|
|
|
.dropdown:hover .dropdown-content { |
|
display: block; |
|
} |
|
|
|
.dropdown:hover .dropbtn { |
|
background-color: grey; |
|
} |
|
|
|
|
|
.d3-tip { |
|
line-height: 1; |
|
font-weight: bold; |
|
padding: 12px; |
|
background: rgba(0, 0, 0, 0.8); |
|
color: #fff; |
|
border-radius: 2px; |
|
} |
|
|
|
.d3-tip:after { |
|
box-sizing: border-box; |
|
display: inline; |
|
font-size: 10px; |
|
width: 100%; |
|
line-height: 1; |
|
color: rgba(0, 0, 0, 0.8); |
|
content: "\25BC"; |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
.d3-tip.n:after { |
|
margin: -1px 0 0 0; |
|
top: 100%; |
|
left: 0; |
|
} |
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
<div class="dropdown"> |
|
<button class="dropbtn">Attributes</button> |
|
<div class="dropdown-content"> |
|
|
|
<div id="option"> |
|
<input name="Default Color" |
|
type="button" |
|
value="Default" |
|
/> |
|
</div> |
|
|
|
<div id="Abundance Color"> |
|
<input name="updateButton" |
|
type="button" |
|
value="Pham Abundance" /> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
|
|
|
|
var svg = d3.select("body").append("svg").attr("height", 1000); |
|
d3.json("genes.json.txt", function(error, json) { |
|
if (error) return console.warn(error); |
|
svg.attr("width", function (d) { |
|
return d3.max(json, function(d) { |
|
return d.genomelength/10; |
|
}) |
|
}); |
|
document.getElementById("option").onclick = function(d) {myFunction(d)}; |
|
function normcolor(d) {return d.pham_abundance/1}; |
|
|
|
document.getElementById("Abundance Color").onclick = function(d) {myFunction(d)}; |
|
|
|
function myFunction(d) { |
|
return d.pham_abundance/150 |
|
}; |
|
|
|
|
|
var tip = d3.tip() |
|
.attr('class', 'd3-tip') |
|
.offset([-10, 0]) |
|
.html(function(d) { |
|
return d.sequence; |
|
}) |
|
svg.call(tip); |
|
|
|
var phage = svg.selectAll(".genomes") |
|
.data(json) |
|
.enter() |
|
.append("g"); |
|
phage.attr("transform", function(d, i) { return "translate(0," + (100 + (i*225)) + ")"; }); |
|
|
|
phage.append("rect") |
|
.attr({x: 0, y: 0, width: function(d) { return d.genomelength/10; }, height: 30}) |
|
.style({"stroke-width": "2px", "fill": "white", "stroke": "black"}) |
|
.attr("stroke-opacity", 0) |
|
.transition().duration(1000) |
|
.attr("stroke-opacity", 1); |
|
|
|
var group = phage.selectAll(".thousandticks") |
|
.data(function (d) { |
|
ticks = []; |
|
genome_positions = d3.range(d.genomelength); |
|
genome_positions.forEach(function (currentValue, index, myArray) { |
|
if (currentValue % 1000 === 0) { |
|
ticks.push(currentValue); |
|
} |
|
}); |
|
return ticks; |
|
} |
|
) |
|
.enter() |
|
.append("g"); |
|
group.append("rect") |
|
.style({"fill": "black"}) |
|
.attr({x: function (d) { return d/10; }, y: 0, width: "1px", height: 30}) |
|
.attr({"fill-opacity": 0}) |
|
.transition().duration(1500) |
|
.attr({"fill-opacity": 1}); |
|
|
|
group.append("text") // kbp label |
|
.attr("x", function(d) {return (d/10) + 3;}) |
|
.attr("y", 12) |
|
.attr("font-family", "sans-serif") |
|
.attr("font-size", "14px") |
|
.attr("fill", "green") |
|
.style("text-anchor", "start") |
|
.text(function(d) { return d/1000; }) |
|
.attr({"fill-opacity": 0}) |
|
.transition().duration(1500) |
|
.attr({"fill-opacity": 1}); |
|
var group2 = phage.selectAll(".fivehundredticks") |
|
.data(function (d) { |
|
ticks = []; |
|
genome_positions = d3.range(d.genomelength); |
|
genome_positions.forEach(function (currentValue, index, myArray) { |
|
if (currentValue % 500 === 0 & currentValue % 1000 !== 0) { |
|
ticks.push(currentValue); |
|
} |
|
}) |
|
return ticks; |
|
}) |
|
.enter() |
|
.append("g"); |
|
group2.append("rect") |
|
.style({"fill": "black"}) |
|
.attr({x: function(d) {return d/10;}, y: 0, width: "1px", height: 15}) |
|
.attr({"fill-opacity": 0}) |
|
.transition().duration(1500) |
|
.attr({"fill-opacity": 1}); |
|
var group3 = phage.selectAll(".onehundredticks") |
|
.data(function (d) { |
|
ticks = []; |
|
genome_positions = d3.range(d.genomelength); |
|
genome_positions.forEach(function (currentValue, index, myArray) { |
|
if (currentValue % 100 === 0 & currentValue % 1000 !== 0 & currentValue % 500 !== 0) { |
|
ticks.push(currentValue); |
|
} |
|
}) |
|
return ticks; |
|
}) |
|
.enter() |
|
.append("g"); |
|
group3.append("rect") |
|
.style({"fill": "black"}) |
|
.attr({x: function (d) { return d/10; }, y: 15, width: "1px", height: 15}) |
|
.attr("fill-opacity", 0) |
|
.transition().duration(1500) |
|
|
|
.attr("fill-opacity", 1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
gene = phage.selectAll(".genes") |
|
|
|
.data(function(d, i) { console.log(i, d); return d.genes;}) |
|
.enter() |
|
|
|
.append("g"); |
|
gene.append("rect") |
|
.on('mouseover', tip.show) |
|
.on('mouseout', tip.hide) |
|
.attr("y", function (d) { |
|
if (d.direction == "forward") { |
|
if (d.name % 2 === 0) { |
|
return -70; |
|
} |
|
else { return -30;} |
|
} |
|
else if (d.direction == "reverse") { |
|
if (d.name % 2 === 0) { |
|
return 30; |
|
} |
|
else { return 60;} |
|
} |
|
}) |
|
.attr("x", function (d) { |
|
if (d.direction === "forward") { |
|
return (0 - ((d.stop-d.start)/10)) - 2; |
|
} |
|
else if (d.direction === "reverse") { |
|
w = d3.select("svg").style("width"); |
|
return w; |
|
} |
|
}) |
|
|
|
|
|
.attr("height", function (d) {return 30;}) |
|
.attr("width", function (d) { return (d.stop-d.start)/10; }) |
|
.style({"stroke":"black", "stroke-width": "2px"}) |
|
.attr("fill-opacity", normcolor) |
|
|
|
|
|
|
|
|
|
|
|
.transition().delay(1000).duration(1500) |
|
.attr("x", function (d) { return d.start/10; }); |
|
|
|
|
|
gene.append("text") |
|
.attr("x", function(d) { return ((d.start + d.stop)/2)/10;}) |
|
.attr("y", function (d) { |
|
if (d.direction == "forward") { |
|
if (d.name % 2 === 0) { |
|
return -50; |
|
} |
|
else { return -10;} |
|
} |
|
else if (d.direction == "reverse") { |
|
if (d.name % 2 === 0) { |
|
return 50; |
|
} |
|
else { return 80;} |
|
} |
|
}) |
|
.style({"text-anchor": "middle", "fill": function (d){ |
|
if (d.pham_abundance/150 <= 0.5) { |
|
return "black"; |
|
} |
|
else if (d.pham_abundance >= 0.5){ |
|
return "white"; |
|
}}}) |
|
.attr("font-family", "sans-serif") |
|
.text(function(d) {return d.name}) |
|
.attr("fill-opacity", 0) |
|
.transition().delay(2000).duration(1500) |
|
.attr("fill-opacity", 1) |
|
|
|
gene.append("text") // pham name |
|
.attr("x", function(d) { return ((d.start + d.stop)/2)/10;}) |
|
.attr("y", function (d) { |
|
if (d.direction == "forward") { |
|
if (d.name % 2 === 0) { |
|
return -80; |
|
} |
|
else { return -40;} |
|
} |
|
else if (d.direction == "reverse") { |
|
if (d.name % 2 === 0) { |
|
return 80; |
|
} |
|
else { return 110;} |
|
} |
|
}) |
|
|
|
.style({"text-anchor": "middle", "fill": "blue"}) |
|
.attr("font-family", "sans-serif") |
|
.text(function(d) {return d.pham + " ("+ d.pham_abundance +")"}) |
|
|
|
.attr("fill-opacity", 0) |
|
.transition().delay(3500).duration(1500) |
|
.attr("fill-opacity", 1); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
</script> |
|
</body> |