avitale/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Heatmap</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
    <style type="text/css">

svg {
  shape-rendering: crispEdges;
}

.horLines, .verLines {
  stroke: lightgrey;
}

.horTitle {

	dominant-baseline:middle;
	font: 9px sans-serif;
}

.verTitle{

	dominant-baseline:bottom;
	font: 9px sans-serif;
}

    </style>
  </head>
  <body>

    <script type="text/javascript">

	var nCol = 100,
		nRow = 100,
		maxValue = 5,
		colNames =[],
		rowNames = [],
		percSparse= .05,
		data = {};

	for(i=0;i<nCol; i++ ){
		colNames[i] = "c"+i;
	}
	for(i=0;i<nRow; i++ ){
		rowNames[i] = "r"+i;
	}

	for(j in rowNames) {
		data[rowNames[j]] = [];
		for(i=0;i<nCol;i++){
			if(Math.random()<percSparse){
				data[rowNames[j]].push([i, Math.floor(Math.random()*maxValue)])
			}
		}
	}

	var dataObj = data,
		dataList = rowNames,
		dataColList = colNames,
		colors = ["red","green","blue","yellow","brown","purple"];

	var heatmapRectHorSize = 12,
		heatmapRectVerSize = 12,
		w = heatmapRectHorSize * dataColList.length,
		h = heatmapRectVerSize * dataList.length,
		dataHorLines = d3.range(h/heatmapRectHorSize);
		dataVerLines = d3.range(w/heatmapRectVerSize);
		wTot = w +100;
		hTot = h +40;

		maxScale =  1;
		wTotScaled = wTot * maxScale;
		hTotScaled = hTot * maxScale;

	var vis = d3.select("body")
	  		.append("svg:svg")
	    		.attr("width", wTotScaled)
	    		.attr("height", hTotScaled)

	var heatmap = vis.append("svg:g")
	    	.attr("class", "heatmap")
			.attr("transform", "translate(100,40)");

	var heatmapBackground = heatmap
				.selectAll("g.heatmap")
				.data([[w,h]])
				.enter()
				.append("svg:rect")
					.attr("class","g.heatmap")
					.attr("fill", "honeydew")
				    .attr("width", function(d){ return d[0]})
				    .attr("height", function(d){ return d[1]});

	var heatmapBars = heatmap
			.selectAll("g.heatmapHorBar")
			.data(dataList)
			.enter()
			.append("svg:g")
			.attr("class", "horBar")
			.attr("transform", function(d,i) {return "translate(0,"+ i* heatmapRectVerSize + ")"} );

	var heatmapRects = heatmapBars
			.selectAll("g.heatmapHorRect")
			.data(function(d) {return dataObj[d]})
			.enter()
			.append("svg:rect")
				.attr("class", "rect")
			 	.attr("x", function(d) {return d[0]*heatmapRectHorSize})
			 	.attr("height", heatmapRectVerSize)
				.attr("width", heatmapRectHorSize)
				.attr("fill", function(d){return colors[d[1]]});

	var heatmapHorLines = heatmap
			.selectAll("heatmapLines")
			.data(dataHorLines)
			.enter()
			.append("svg:line")
				.attr("class", "horLines")
				.attr("x1", 0)
				.attr("x2", w)
				.attr("y1", function(d) { return d * heatmapRectVerSize; })
				.attr("y2", function(d) { return d * heatmapRectVerSize; });

	var heatmapVerLines = heatmap
			.selectAll("heatmapLines")
			.data(dataVerLines)
			.enter()
			.append("svg:line")
				.attr("class", "verLines")
				.attr("x1", function(d) { return d * heatmapRectHorSize; })
				.attr("x2", function(d) { return d * heatmapRectHorSize; })
				.attr("y1", 0)
				.attr("y2", h);

	 var heatmapHorTitles = heatmap
			.selectAll("heatmapTitles")
			.data(dataList)
			.enter()
			.append("svg:text")
	       	.attr("text-anchor", "end")
			.attr("class", "horTitle")
			.attr("x",-2)
			.attr("y",function(d,i){ return (i * heatmapRectVerSize) + heatmapRectVerSize / 2})
	 		.text(function(d) {return d;});

	 var heatmapVerTitles = heatmap
			.selectAll("heatmapTitles")
			.data(dataColList)
			.enter()
			.append("svg:g")
			.attr("transform","rotate(270)")
			.attr("class", "gVerTitle")
			.append("svg:text")
	       	.attr("text-anchor", "begin")
			.attr("class", "verTitle")
			.attr("x",2)
			.attr("y",function(d,i){ return ((i * heatmapRectVerSize) + (heatmapRectVerSize / 2) + 3)})
	 		.text(function(d) {return d;});


	    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Heatmap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
	<style type="text/css">

	svg {
	shape-rendering: crispEdges;
	}

	.horLines, .verLines {
	stroke: lightgrey;
	}

	.horTitle {

	dominant-baseline:middle;
	font: 9px sans-serif;
	}

	.verTitle{

	dominant-baseline:bottom;
	font: 9px sans-serif;
	}

	</style>
	</head>
	<body>

	<script type="text/javascript">

	var nCol = 100,
	nRow = 100,
	maxValue = 5,
	colNames =[],
	rowNames = [],
	percSparse= .05,
	data = {};

	for(i=0;i<nCol; i++ ){
	colNames[i] = "c"+i;
	}
	for(i=0;i<nRow; i++ ){
	rowNames[i] = "r"+i;
	}

	for(j in rowNames) {
	data[rowNames[j]] = [];
	for(i=0;i<nCol;i++){
	if(Math.random()<percSparse){
	data[rowNames[j]].push([i, Math.floor(Math.random()*maxValue)])
	}
	}
	}

	var dataObj = data,
	dataList = rowNames,
	dataColList = colNames,
	colors = ["red","green","blue","yellow","brown","purple"];

	var heatmapRectHorSize = 12,
	heatmapRectVerSize = 12,
	w = heatmapRectHorSize * dataColList.length,
	h = heatmapRectVerSize * dataList.length,
	dataHorLines = d3.range(h/heatmapRectHorSize);
	dataVerLines = d3.range(w/heatmapRectVerSize);
	wTot = w +100;
	hTot = h +40;

	maxScale = 1;
	wTotScaled = wTot * maxScale;
	hTotScaled = hTot * maxScale;

	var vis = d3.select("body")
	.append("svg:svg")
	.attr("width", wTotScaled)
	.attr("height", hTotScaled)

	var heatmap = vis.append("svg:g")
	.attr("class", "heatmap")
	.attr("transform", "translate(100,40)");

	var heatmapBackground = heatmap
	.selectAll("g.heatmap")
	.data([[w,h]])
	.enter()
	.append("svg:rect")
	.attr("class","g.heatmap")
	.attr("fill", "honeydew")
	.attr("width", function(d){ return d[0]})
	.attr("height", function(d){ return d[1]});

	var heatmapBars = heatmap
	.selectAll("g.heatmapHorBar")
	.data(dataList)
	.enter()
	.append("svg:g")
	.attr("class", "horBar")
	.attr("transform", function(d,i) {return "translate(0,"+ i* heatmapRectVerSize + ")"} );

	var heatmapRects = heatmapBars
	.selectAll("g.heatmapHorRect")
	.data(function(d) {return dataObj[d]})
	.enter()
	.append("svg:rect")
	.attr("class", "rect")
	.attr("x", function(d) {return d[0]*heatmapRectHorSize})
	.attr("height", heatmapRectVerSize)
	.attr("width", heatmapRectHorSize)
	.attr("fill", function(d){return colors[d[1]]});

	var heatmapHorLines = heatmap
	.selectAll("heatmapLines")
	.data(dataHorLines)
	.enter()
	.append("svg:line")
	.attr("class", "horLines")
	.attr("x1", 0)
	.attr("x2", w)
	.attr("y1", function(d) { return d * heatmapRectVerSize; })
	.attr("y2", function(d) { return d * heatmapRectVerSize; });

	var heatmapVerLines = heatmap
	.selectAll("heatmapLines")
	.data(dataVerLines)
	.enter()
	.append("svg:line")
	.attr("class", "verLines")
	.attr("x1", function(d) { return d * heatmapRectHorSize; })
	.attr("x2", function(d) { return d * heatmapRectHorSize; })
	.attr("y1", 0)
	.attr("y2", h);

	var heatmapHorTitles = heatmap
	.selectAll("heatmapTitles")
	.data(dataList)
	.enter()
	.append("svg:text")
	.attr("text-anchor", "end")
	.attr("class", "horTitle")
	.attr("x",-2)
	.attr("y",function(d,i){ return (i * heatmapRectVerSize) + heatmapRectVerSize / 2})
	.text(function(d) {return d;});

	var heatmapVerTitles = heatmap
	.selectAll("heatmapTitles")
	.data(dataColList)
	.enter()
	.append("svg:g")
	.attr("transform","rotate(270)")
	.attr("class", "gVerTitle")
	.append("svg:text")
	.attr("text-anchor", "begin")
	.attr("class", "verTitle")
	.attr("x",2)
	.attr("y",function(d,i){ return ((i * heatmapRectVerSize) + (heatmapRectVerSize / 2) + 3)})
	.text(function(d) {return d;});



	</script>
	</body>
	</html>