D3 Examples - Heatmap of mtcars data

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