Heatmap of mtcars data

This is a naive attempt to create a heatmap of mtcars data. I wa strying to reproduce R package d3Heatmap

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Heatmap of mtcars dataset</title>
	<style type="text/css">
	.tooltip{
		position: absolute;
		width: 200px;
		height: 28px;
		pointer-events: none;
	}

rect.bordered {
        stroke: white;
        stroke-width:2px;   
      }

.axis {
	  font: 10px sans-serif;
	}

.axis path,
	.axis line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}

.label{
		font-weight: bold;
	}

text.mono{
		font-size: 9pt;
		font-family: Consolas, courier;
		fill: #aaa;
	}

</style>
</head>
<body>
<h1>Heatmap of mtcars dataset</h1>
<div id='heatmap'></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var margin = {top: 20, right: 80, bottom: 30, left:50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var xGridSize = Math.floor(width/32);
var yGridSize = Math.floor(height/11)

var color = d3.scale.category10();

var svg = d3.select("#heatmap").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);

d3.csv("mtcars.csv", function(error, data){
	var dataInfo = [];
	data.forEach(function(d,i){
		var car = d.car;
		var rowN = i;
		var cols = Object.getOwnPropertyNames(data[i]);
		cols.forEach(function(name){
			if (name != 'car'){
				var colN = cols.indexOf(name);
			var name = name;
			var value = data[rowN][name];
			var entry = {"row": rowN, "col": colN, "score" : value, "name":name, "car":car};
			dataInfo.push(entry);
			}
		});
	});

// add the heatmap
	var heatmap = svg.selectAll("heatmap")
			.data(dataInfo)
		.enter().append("rect")
			.attr("x", function(d){ return d.row * xGridSize; })
			.attr("y", function(d){ return d.col * yGridSize; })
			.attr("width", xGridSize)
			.attr("height", yGridSize)
			.attr("class", "rect bordered")
			.style("fill", function(d){ return color(d.score); })
		.on("mouseover", function(d){
			tooltip.transition()
				.duration(200)
				.style("opacity", .9);
			tooltip.html("Car - " + d.car + "<br/>" + "Property - "+ d.name + "<br/>" + "Value - " + d.score)
				.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 legend = svg.selectAll(".legend")
				.data(colorScale1.ticks(10).slice(1).reverse())
			.enter().append("g")
				.attr("class", "legend")
				.attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; });

});
</script>

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

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