Skip to content

Instantly share code, notes, and snippets.

@Wanagram

Wanagram/README.md

Last active April 21, 2016 13:33
Show Gist options
  • Save Wanagram/54293b9d49ee71ebb19822be746c695d to your computer and use it in GitHub Desktop.
Save Wanagram/54293b9d49ee71ebb19822be746c695d to your computer and use it in GitHub Desktop.
Download ZIP
Final Genome Browser
Raw
README.md
Raw
genes.json.txt
[{
"phagename": "D29",
"genes": [
{
"name": 1,
"pham": "4858 (107)",
"start": 50,
"stop": 2000,
"direction": "forward",
"phage":"D29",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 2,
"pham": "a2",
"start": 2150,
"stop": 2900,
"direction": "reverse",
"phage":"D29",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 3,
"pham": "a3",
"start": 3000,
"stop": 4550,
"direction": "reverse",
"phage":"D29",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 4,
"pham": "a4",
"start": 4700,
"stop": 7550,
"direction": "forward",
"phage":"D29",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
}],
"genomelength": 15000
},
{
"phagename": "U2",
"genes": [{
"name": 1,
"pham": "a1",
"start": 50,
"stop": 2000,
"direction": "forward",
"phage":"U2",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 2,
"pham": "a2",
"start": 2150,
"stop": 2900,
"direction": "reverse",
"phage":"U2",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 3,
"pham": "a3",
"start": 3000,
"stop": 4550,
"direction": "reverse",
"phage":"U2",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 4,
"pham": "a4",
"start": 4700,
"stop": 7550,
"direction": "forward",
"phage":"U2",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
}],
"genomelength": 14000
},
{
"phagename": "L5",
"genes": [{
"name": 1,
"pham": "b1",
"start": 500,
"stop": 1000,
"direction": "forward",
"phage":"L5",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 2,
"pham": "b2",
"start": 1500,
"stop": 2000,
"direction": "reverse",
"phage":"L5",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 3,
"pham": "b3",
"start": 3000,
"stop": 3300,
"direction": "reverse",
"phage":"L5",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
},
{
"name": 4,
"pham": "b4",
"start": 4000,
"stop": 4500,
"direction": "forward",
"phage":"L5",
"sequence":"ATCGCGCGTATAGCGCGCTAGCTAGCTGACTATATTATATAGCGCT"
}],
"genomelength": 10000
}]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style> path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px "sans-serif";
background: lightsteelblue;
border: 0px;
border-radius: 8px;
}
body {
margin: ;
position:fixed;
top:0;
right:0;
bottom:0;
left:2;
background-image: linear-gradient(to bottom, #EFEFBB, #D4D3DD 100%);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js">
</script>
<script src="aminoacidseq.js" type="text/javascript">
</script>
<!-- Latest compiled and minified CSS -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet">
<!-- Optional theme -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="chicken">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">&times;</button>
<h4 class="modal-title">Information</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$.getJSON("genes.json.txt", function(data) {
console.log(data[0].genes[0].name)
function calc(name, phage) {
console.log(data)
console.log("name: " + name + " phage:" + phage)
var objpos = 0;
var genepos = 0;
for(i=0;i<data.length;i++){
if(data[i].phagename==phage){
objpos = i;
}
}
for(i=0;i<data[objpos].genes.length;i++){
if(data[objpos].genes[i].name==name){
genepos = i;
}
}
var aminoSeq = [];
var sequence = data[objpos].genes[genepos].sequence;
console.log(objpos + genepos)
var aminoArray = [];
var startNuc = 0;
var reverse = "";
var gCount = 0;
var cCount = 0;
var aCount = 0;
var tCount = 0;
for (i = 1; i < sequence.length / 3; i++) {
aminoArray.push(sequence.substring(startNuc, startNuc + 3));
startNuc = i * 3;
}
//Matches sequence to amino acid
for (i = 0; i < aminoArray.length; i++) {
switch (aminoArray[i]) {
case 'GCA':
case 'GCC':
case 'GCG':
case 'GCT':
aminoSeq.push("Ala")
break;
case 'AAC':
case 'AAT':
case 'GAC':
case 'GAT':
aminoSeq.push("Asx")
break;
case 'TGC':
case 'TGT':
aminoSeq.push("Cys")
break;
case 'GAC':
case 'GAT':
aminoSeq.push("Asp")
break;
case 'GAA':
case 'GAG':
aminoSeq.push("Glu")
break;
case 'TTC':
case 'TTT':
aminoSeq.push("Phe")
break;
case 'GGA':
case 'GGC':
case 'GGG':
case 'GGT':
aminoSeq.push("Gly")
break;
case 'CAC':
case 'CAT':
aminoSeq.push("His")
break;
case 'ATA':
case 'ATC':
case 'ATT':
aminoSeq.push("Ile")
break;
case 'AAA':
case 'AAG':
aminoSeq.push("Lys")
break;
case 'CTA':
case 'CTC':
case 'CTG':
case 'CTT':
case 'TTA':
case 'TTG':
aminoSeq.push("Leu")
break;
case 'ATG':
aminoSeq.push("Met")
break;
case 'AAC':
case 'AAT':
aminoSeq.push("Asn")
break;
case 'CCA':
case 'CCC':
case 'CCG':
case 'CCT':
aminoSeq.push("Pro")
break;
case 'CAA':
case 'CAG':
aminoSeq.push("Gln")
break;
case 'AGA':
case 'AGG':
case 'CGA':
case 'CGC':
case 'CGG':
case 'CGT':
aminoSeq.push("Arg")
break;
case 'AGC':
case 'AGT':
case 'TCA':
case 'TCC':
case 'TCG':
case 'TCT':
aminoSeq.push("Ser")
break;
case 'ACA':
case 'ACC':
case 'ACG':
case 'ACT':
aminoSeq.push("Thr")
break;
case 'GTA':
case 'GTC':
case 'GTG':
case 'GTT':
aminoSeq.push("Val")
break;
case 'TGG':
aminoSeq.push("Trp")
break;
case 'TAC':
case 'TAT':
aminoSeq.push("Tyr")
break;
case 'CAA':
case 'CAG':
case 'GAA':
case 'GAG':
aminoSeq.push("Glx")
break;
case 'TAA':
case 'TAG':
case 'TGA':
aminoSeq.push("STOP")
break;
}
}
var aminoOrg = aminoSeq.join("-")
for (i = 0; i < sequence.length; i++) {
switch (sequence[i]) {
case "A":
reverse = reverse + "T"
break;
case "G":
reverse = reverse + "C"
break;
case "C":
reverse = reverse + "G"
break;
case "T":
reverse = reverse + "A"
break;
}
}
for (i = 0; i < sequence.length; i++) {
switch (sequence[i]) {
case "A":
break;
case "T":
break;
case "C":
cCount++
break;
case "G":
gCount++
break;
}
}
var gcPcnt = Number(((gCount + cCount) / sequence.length).toFixed(3))
var soln = {
sequence: sequence,
aminoSeq: aminoOrg,
reverse: reverse,
gcPcnt: gcPcnt
}
console.log(soln)
return ("<p><b>Sequence: <\/b>" + soln.sequence + "<br>" + "<b>Reverse: <\/b>" + soln.reverse + "<br>" + "<b>Amino-chain: <\/b>" + soln.aminoSeq + "<br>" + "<b>GC%: <\/b>" + soln.gcPcnt * 100 + "%<\/p>");
}
var svg = d3.select("body").append("svg").attr("height", 1000);
d3.json("genes.json.txt", function(error, json) {
if (error) return console.warn(error);
//console.log(json);
svg.attr("width", function (d) {
return d3.max(json, function(d) {
return d.genomelength/10;
})
});
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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") // background for ruler
.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: 0, y: 100, width: "1px", height: 30})
.attr({x: function (d) { return d/10; }, y: 0, width: "1px", height: 30})
.attr({"fill-opacity": 0})
.transition().duration(1500)
.attr({"fill-opacity": 1});
//.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
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", "#8431cd")
.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});
//.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
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("click", function(d) {
$('#myModal').modal('show')
var infodiv = d3.select(".modal-body").data(d).html(calc(d.name, d.phage))
})
.on("mouseover", function(d){
d3.select("body").style({"cursor":"pointer"})
})
.on("mouseout",function(d){
d3.select("body").style({"cursor":"default"})
})
.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", function (d) {
if (d.direction == "forward") {
return "#6831cd";
}
else if (d.direction == "reverse") {
return "#efd033";
}
else {
return "black";
}
})
.transition().delay(1000).duration(1500)
.attr("x", function (d) { return d.start/10; });
gene.append("text") // gene 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) { // forward and even
return -50;
}
else { return -10;} // forward and odd
}
else if (d.direction == "reverse") {
if (d.name % 2 === 0) { // reverse and even
return 50;
}
else { return 80;} //reverse and odd
}
})
.style({"text-anchor": "middle", "fill": "black"})
.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})
.attr("fill-opacity", 0)
.transition().delay(3500).duration(1500)
.attr("fill-opacity", 1);
});
})})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment