genome browser

Genome browser for phamerator.org

forked from scresawn's block: genome browser

<!DOCTYPE html>
<html>

body{
        font-family:Arial;
      	}
    </style>
    <title></title>
</head>

<body>
    
    
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" id="chicken">
            
            <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) {
                    var maxLength = 0;
                    for (i = 0; i < data.length; i++) {
                        if (data[i].stop > maxLength) {
                            maxLength = data[i].stop;
                        }

}
                    genomelength = maxLength + maxLength / 50;

function calc(form) {
                        var aminoSeq = [];
                        var sequence = data[form - 1].sequence;
                        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
                        };
                        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>");

}

//Tick mark object
                    var tickMarks = {
                        thousand: [],
                        fivehundred: [],
                        onehundred: []
                    };

//Array with numbers from 1->genomelength
                    var genome_positions = [];
                    for (var i = 1; i <= genomelength; i++) {
                        genome_positions.push(i);
                    }
                    //Creates 1000, 500 and 100 bp ticks
                    genome_positions.forEach(function(currentValue, index, myArray) {
                        if (currentValue % 1000 === 0) {
                            tickMarks.thousand.push(currentValue);
                        } else if (currentValue % 500 === 0) {
                            tickMarks.fivehundred.push(currentValue);

} else if (currentValue % 100 === 0) {
                            tickMarks.onehundred.push(currentValue);
                        }
                    });

var svg = d3.select("body").append("svg").attr({
                        height: 500,
                        width: genomelength / 10
                    });
                    svg.append("g")
                        .append("rect")
                        .attr({
                            x: 0,
                            y: 100,
                            width: genomelength / 10,
                            height: 30
                        })
                        .style({
                            "stroke-width": "2px",
                            "fill": "white",
                            "stroke": "black"
                        });

d3.json("genes.json.txt", function(error, json) {
                        if (error) return console.warn(error);
                        var rects = svg.selectAll(".genes")
                            .data(json)
                            .enter()
                            .append("rect");

var rectAttributes = rects

.attr("width", function(d) {
                                return (d.stop - d.start) / 10;
                            })
                            .style({
                                "stroke": "black",
                                "stroke-width": "2px",
                                "fill-opacity": 0.5
                            })
                            .attr("y", function(d) {
                                if (d.direction == "reverse" && d.name % 2 == 0) {
                                    return 130
                                } else if (d.direction == "reverse" && d.name % 2 != 0) {
                                    return 160
                                } else if (d.direction == "forward" && d.name % 2 != 0) {
                                    return 70
                                } else {
                                    return 40
                                };
                            })
                            .attr("x", function(d) {
                                if (d.direction == "forward") {
                                    return (0 - ((d.stop - d.start) / 10)) - 2;
                                } else if (d.direction == "reverse") {
                                    return (genomelength / 10) + 2;
                                }
                            })
                            .style({
                                "fill": function(d) {
                                    if (d.direction == "forward") {
                                        return "green"
                                    } else if (d.direction == "reverse") {
                                        return "red"
                                    }
                                }
                            })
                            //Transition   .transition().duration(2000)
                            .attr("x", function(d) {
                                return d.start / 10;
                            })
                            .attr("height", function(d) {
                                return 30;
                            })
                            .attr("id", function(d) {
                                return d.name
                            })
                            .on("click", function(d) {
                                $('#myModal').modal('show')
                                var infodiv = d3.select(".modal-body").data(json).html(calc(d.name))
                            })
                        		.on("mouseover", function(d){
                              d3.select("body").style({"cursor":"pointer"})
                            })
                        		.on("mouseout",function(d){
                              d3.select("body").style({"cursor":"default"})
                            })

var text = svg.selectAll(".genes")
                            .data(json)
                            .enter()
                            .append("text");

var text2 = svg.selectAll(".genes")
                            .data(json)
                            .enter()
                            .append("text");

var familyText = text2
                            .text(function(d) {
                                return d.family
                            })
                            .attr("y", function(d) {
                                if (d.direction == "reverse" && d.name % 2 == 0) {
                                    return 175
                                } else if (d.direction == "reverse" && d.name % 2 != 0) {
                                    return 205
                                } else if (d.direction == "forward" && d.name % 2 != 0) {
                                    return 65
                                } else {
                                    return 35
                                }
                            })
                            .attr("x", function(d) {
                                return ((d.start + (d.stop - d.start) / 2) / 10)
                            })
                            .attr("font-size", "20px")

});

}

)

}, false);
    </script>
    <div id="infodiv">
        <p></p>
    </div>
</body>

</html>

Modified http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js