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

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js