D3 Examples - Multiple DNA sequence alignment

Multiple DNA sequence alignment

Visualizing the results of a multpiple DNA sequence alignment. 15 sequences were aligned using ClustalW2 and their results which are of following form -

ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA ----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG--- ----------AAATCAT-GCATACAAG---TTCCTAGGGGCCTCAAAACAT--CAAA--- GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT -----------TGAGTTCCT-AATAG-----TCAAGGGAGGCTATTTATAATAGAAATAA ---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA -------------AGGTTGTAAAATTTAATATTTATGAATCTATGAAATACCCCACAG-- GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT ----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG--- ---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Multiple Sequence Aligment</title>
    <style type="text/css">
​
    rect.bordered {
        stroke: white;
        stroke-width: 2px;
    }
​
    .tooltip{
        position: absolute;
        width: 50px;
        height: 48px;
        padding: 2px;
        font: 12px sans-serif;
        background: lightgreen;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
    </style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
​
​
​
var data = ["ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT",
    "AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA",
    "----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG---",
    "----------AAATCAT-GCATACAAG---TTCCTAGGGGCCTCAAAACAT--CAAA---",
    "GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT",
    "ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT",
    "ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT",
    "-----------TGAGTTCCT-AATAG-----TCAAGGGAGGCTATTTATAATAGAAATAA",
    "---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA",
    "-------------AGGTTGTAAAATTTAATATTTATGAATCTATGAAATACCCCACAG--",
    "GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT",
    "AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA",
    "ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT",
    "ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT",
    "----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG---",
    "---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA",
    "ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT"]
​
​
var dataset = [];
for (var i=0; i<data.length; i++){
    var x = data[i];
    for (var j=0; j<x.length; j++){
        var entry = {"base" : x[j], "row" : j, "col" : i};
        dataset.push(entry);
    };
};
​
​
var margin = {top:20, right:30, bottom:70, left:100},
    width = 1560 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
​
var gridSize = 20;
​
var colors = {"A" : "red",
             "G" : "yellow", 
             "C" : "blue", 
             "T" : "cadetblue",
             "-" : "white"};
​
​
var dataLabels = [1,2,3,4];
var cols = ["red", "yellow", "blue", "cadetblue"];
var bases = ["A", "G", "C", "T"]
​
​
var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
​
​
var tooltip = d3.select("body").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);
​
​
    svg.selectAll("point")
            .data(dataset)
        .enter().append("rect")
            .attr("class", "rect bordered")
            .attr("x", function(d){ return d.row * gridSize})
            .attr("y", function(d){ return d.col * gridSize})
            .attr("width", gridSize)
            .attr("height", gridSize)
            .style("fill", function(d){ return colors[d.base]})
            .on("mouseover", function(d){
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html("row - " + (d.row + 1) + "<br/>" + "col - " + (d.col + 1) + "<br/>" +  "base - " + d.base)
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d){
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0)
            });
​
​
var sampleLabels = svg.selectAll(".sampleLabel")
        .data(data)
    .enter().append("text")
        .text(function(d,i){ return "Sample-" + (i + 1); })
        .attr("x",0)
        .attr("y", function(d,i){ return i * gridSize;})
        .style("text-anchor", "end")
        .attr("transform", "translate(-6," + gridSize + ")" );
​
​
​
var legend = svg.selectAll(".legend")
        .data(dataLabels)
    .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(" + (width - 30) + "," + (20 + i * 20) + ")"; }); 
​
legend.append("rect")
    .attr("width", 20)
    .attr("height", 20)
    .style("fill", function(d,i){return cols[i]});
​
legend.append("text")
    .attr("x", 26)
    .attr("y", 10)
    .attr("dy", ".35em")
    .text(function(d,i){ return bases[i]});
        
​
</script>
​
</body>
</html>
    