Heat map with tool-tip and random values.

This is a heatmap inspired by this Trulia recreation, with the following additions:

This iteration uses [colorBrewer.js](https://github.com/mbostock/d3/blob/master/lib/colorbrewer/colorbrewer.js) for the color scheme.
Tool-tips using [tool-tips](http://labratrevenge.com/d3-tip/) to show the value.
The user can update the tile values. The values are generated from a probability distribution. I created a short script (rand.js) that generates a Normal random variable using the Box-Muller transformation, an Exponential distribution and a Logistic distribution.

forked from ilanman's block: Heat map with tool-tip and random values.

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

rect.bordered {
        stroke: #bbb;
        stroke-width:3px;   
      }

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

text.mono:hover {
        font-size: 12pt;
        font-family: verdana;
        fill: #aaa;
        font-weight: bold;
      }

.square {
        opacity: 0.5;
      }
      
      .square:hover {
        opacity: 1.0;
      }

.d3-tip {
        font-family: Verdana;
        background: rgba(0, 0, 0, 0.8);
        padding: 8px;
        color: #fff; 
        z-index: 5070;
      }
    
    </style>

<button type="button" id="Normal">Normal</button>
    <button type="button" id="Logistic">Logistic</button>
    <button type="button" id="Exponential">Exponential</button><br>
    
    
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script src="https://d3js.org/colorbrewer.v1.min.js"></script>
    <script src="rand.js"></script>

</head>
  <body>

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 + ")");

d3.tsv("heat.tsv",
        
        function(d,i) {
          return {
            dim1: +d.dim1,
            dim2: +d.dim2,
            value: +Math.random()*10
          };
        },
        
        function(error, data) {

var maxNum = Math.round(d3.max(data,function(d){ return d.value; }));

var colors = colorbrewer.RdYlGn[buckets];

var colorScale = d3.scale.quantile()
              .domain([0, buckets - 1, maxNum])
              .range(colors);

var tip = d3.tip()
                      .attr('class', 'd3-tip')
                      .style("visibility","visible")
                      .offset([-20, 0])
                      .html(function(d) {
                        return "Value:  <span style='color:red'>" + Math.round(d.value);
                      });
                                
          tip(svg.append("g"));

var dim1Labels = svg.selectAll(".dim1Label")
              .data(dim_1)
              .enter().append("text")
                .text(function (d) { return d; })
                .attr("x", 0)
                .attr("y", function (d, i) { return i * gridSize; })
                .style("text-anchor", "end")
                .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
                .attr("class","mono");

var dim2Labels = svg.selectAll(".dim2Label")
              .data(dim_2)
              .enter().append("text")
                .text(function(d) { return d; })
                .attr("x", function(d, i) { return i * gridSize; })
                .attr("y", 0)
                .style("text-anchor", "middle")
                .attr("transform", "translate(" + gridSize / 2 + ", -6)")
                .attr("class","mono");

var heatMap = svg.selectAll(".dim2")
              .data(data)
              .enter().append("rect")
              .attr("x", function(d) { return (d.dim2 - 1) * gridSize; })
              .attr("y", function(d) { return (d.dim1 - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "dim2 bordered")
              .attr("width", gridSize-2)
              .attr("height", gridSize-2)
              .style("fill", colors[0])
              .attr("class", "square")
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

heatMap.transition()
              .style("fill", function(d) { return colorScale(d.value); });

heatMap.append("title").text(function(d) { return d.value; });
              
          var legend = svg.selectAll(".legend")
              .data([0].concat(colorScale.quantiles()), function(d) { return d; })
              .enter().append("g")
              .attr("class", "legend");

legend.append("rect")
            .attr("x", function(d, i) { return gridSize * 11; })
            .attr("y", function(d, i) { return (i * legendWidth + 7); })
            .attr("width", gridSize/2)
            .attr("height", gridSize/2)
            .style("fill", function(d, i) { return colors[i]; })
            .attr("class", "square");

legend.append("text")
            .attr("class", "mono")
            .text(function(d) { return "≥ " + Math.round(d); })
            .attr("x", function(d, i) { return gridSize * 11 + 25; })
            .attr("y", function(d, i) { return (i * legendWidth + 20); })

var title = svg.append("text")
                .attr("class", "mono")
                .attr("x", gridSize * 11)
                .attr("y", - 6)         
                .style("font-size", "14px")
                .text("Legend");

// when user updates, change values
          d3.select("#Normal").on("click", function(d) { update(data, "norm"); } );
          d3.select("#Logistic").on("click", function(d) { update(data, "logi"); } );
          d3.select("#Exponential").on("click", function(d) { update(data, "expo"); } );
 
          function update(data, dist){

d3.selectAll("class","d3-tip").remove();
          
            newVal = new Array(100);

for (var i =0; i < 100; i++){
              if(dist == "norm"){
                newVal[i] = box_muller(mu, sigma);
              }
              else if (dist == "logi"){
                newVal[i] = generate_logistic(mu, sigma);
              }
              else if (dist == "expo"){
                newVal[i] = generate_exp(lambda);
              }
            }
          
            var tip = d3.tip()
                      .attr('class', 'd3-tip')
                      .style("visibility","visible")
                      .offset([-20, 0])
                      .html(function(d,i) {
                        return "Value:  <span style='color:red'>" + Math.round(newVal[i]);
                      });
     
            tip(svg.append("g"));

heatMap.transition().style("fill", function(d,i) { return colorScale( newVal[i] ); });
            
            heatMap.append("title").text(function(d) { return newVal[i]; });
          };

}
      );

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

Modified http://code.jquery.com/jquery.js to a secure url

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

https://code.jquery.com/jquery.js

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

https://d3js.org/colorbrewer.v1.min.js