Just a quick example of how to generate a heat map and have the data used to generate the map show up during mouseover. Also added a white square around the selected block as an added visual.
-
-
Save natemiller/84964461d37181cf055c to your computer and use it in GitHub Desktop.
Example Heat Map with Mouseover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <div id='heatmap'></div> | |
| <style> | |
| .rect { | |
| shape-rendering: crispEdges; | |
| } | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var data = [ | |
| {score: 0.5, row: 0, col: 0}, | |
| {score: 0.7, row: 0, col: 1}, | |
| {score: -0.9, row: 0, col: 2}, | |
| {score: 0.3, row: 0, col: 3}, | |
| {score: 1.2, row: 1, col: 0}, | |
| {score: 0.4, row: 1, col: 1}, | |
| {score: -0.8, row: 1, col: 2}, | |
| {score: -0.4, row: 1, col: 3}, | |
| {score: 0.5, row: 2, col: 0}, | |
| {score: -0.5, row: 2, col: 1}, | |
| {score: 0.7, row: 2, col: 2}, | |
| {score: 0.15, row: 2, col: 3}, | |
| {score: 0.1, row: 3, col: 0}, | |
| {score: 0.8, row: 3, col: 1}, | |
| {score: 1.0, row: 3, col: 2}, | |
| {score: -1, row: 3, col: 3} | |
| ]; | |
| //height of each row in the heatmap | |
| //width of each column in the heatmap | |
| var gridSize = 50, | |
| h = gridSize, | |
| w = gridSize, | |
| rectPadding = 60; | |
| var colorLow = 'green', colorMed = 'black', colorHigh = 'red'; | |
| var margin = {top: 20, right: 80, bottom: 30, left: 50}, | |
| width = 640 - margin.left - margin.right, | |
| height = 380 - margin.top - margin.bottom; | |
| var colorScale = d3.scale.linear() | |
| .domain([-1, 0, 1]) | |
| .range([colorLow, colorMed, colorHigh]); | |
| 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 heatMap = svg.selectAll(".heatmap") | |
| .data(data, function(d) { return d.col + ':' + d.row; }) | |
| .enter().append("svg:rect") | |
| .attr("x", function(d) { return d.col * w; }) | |
| .attr("y", function(d) { return d.row * h; }) | |
| .attr("width", function(d) { return w; }) | |
| .attr("height", function(d) { return h; }) | |
| .style("fill", function(d) { return colorScale(d.score); }) | |
| .on("mouseover", function(d) { | |
| d3.select(this) | |
| .style("stroke","white") | |
| .attr("stroke-width",3) | |
| this.parentNode.appendChild(this); | |
| var xPosition = parseFloat(d3.select(this).attr("x"))+w/2; | |
| var yPosition = parseFloat(d3.select(this).attr("y"))+h/2; | |
| svg.append("text") | |
| .attr("id","tooltip") | |
| .attr("x", xPosition) | |
| .attr("y", yPosition) | |
| .style("fill", "white") | |
| .attr("text-anchor", "middle") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "12px") | |
| .attr("font-weight", "bold") | |
| .text(d.score); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select("#tooltip").remove(); | |
| d3.select(this) | |
| .style("stroke","none"); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment