Here's a heatmap
Last active
September 8, 2020 14:36
-
-
Save melaniewalsh/07d2104bc3426e3e3aad97cc70f9792a to your computer and use it in GitHub Desktop.
Heatmap
This file contains hidden or 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
| // set the dimensions and margins of the graph | |
| var margin = {top: 80, right: 25, bottom: 30, left: 40}, | |
| width = 450 - margin.left - margin.right, | |
| height = 450 - margin.top - margin.bottom; | |
| // append the svg object to the body of the page | |
| var svg = d3.select("#my_dataviz") | |
| .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 + ")"); | |
| //Read the data | |
| d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) { | |
| // Labels of row and columns -> unique identifier of the column called 'group' and 'variable' | |
| var myGroups = d3.map(data, function(d){return d.group;}).keys() | |
| var myVars = d3.map(data, function(d){return d.variable;}).keys() | |
| // Build X scales and axis: | |
| var x = d3.scaleBand() | |
| .range([ 0, width ]) | |
| .domain(myGroups) | |
| .padding(0.05); | |
| svg.append("g") | |
| .style("font-size", 15) | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).tickSize(0)) | |
| .select(".domain").remove() | |
| // Build Y scales and axis: | |
| var y = d3.scaleBand() | |
| .range([ height, 0 ]) | |
| .domain(myVars) | |
| .padding(0.05); | |
| svg.append("g") | |
| .style("font-size", 15) | |
| .call(d3.axisLeft(y).tickSize(0)) | |
| .select(".domain").remove() | |
| // Build color scale | |
| var myColor = d3.scaleSequential() | |
| .interpolator(d3.interpolateInferno) | |
| .domain([1,100]) | |
| // create a tooltip | |
| var tooltip = d3.select("#my_dataviz") | |
| .append("div") | |
| .style("opacity", 0) | |
| .attr("class", "tooltip") | |
| .style("background-color", "white") | |
| .style("border", "solid") | |
| .style("border-width", "2px") | |
| .style("border-radius", "5px") | |
| .style("padding", "5px") | |
| // Three function that change the tooltip when user hover / move / leave a cell | |
| var mouseover = function(d) { | |
| tooltip | |
| .style("opacity", 1) | |
| .style("position", "absolute") | |
| d3.select(this) | |
| .style("stroke", "black") | |
| .style("opacity", 1) | |
| } | |
| var mousemove = function(d) { | |
| tooltip | |
| .html("The exact value of<br>this cell is: " + d.value) | |
| .style("left", (d3.mouse(this)[0]+70) + "px") | |
| .style("top", (d3.mouse(this)[1]) + "px") | |
| } | |
| var mouseleave = function(d) { | |
| tooltip | |
| .style("opacity", 0) | |
| d3.select(this) | |
| .style("stroke", "none") | |
| .style("opacity", 0.8) | |
| } | |
| // add the squares | |
| svg.selectAll() | |
| .data(data, function(d) {return d.group+':'+d.variable;}) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d) { return x(d.group) }) | |
| .attr("y", function(d) { return y(d.variable) }) | |
| .attr("rx", 4) | |
| .attr("ry", 4) | |
| .attr("width", x.bandwidth() ) | |
| .attr("height", y.bandwidth() ) | |
| .style("fill", function(d) { return myColor(d.value)} ) | |
| .style("stroke-width", 4) | |
| .style("stroke", "none") | |
| .style("opacity", 0.8) | |
| .on("mouseover", mouseover) | |
| .on("mousemove", mousemove) | |
| .on("mouseleave", mouseleave) | |
| }) | |
| // Add title to graph | |
| svg.append("text") | |
| .attr("x", 0) | |
| .attr("y", -50) | |
| .attr("text-anchor", "left") | |
| .style("font-size", "22px") | |
| .text("A d3.js heatmap"); | |
| // Add subtitle to graph | |
| svg.append("text") | |
| .attr("x", 0) | |
| .attr("y", -20) | |
| .attr("text-anchor", "left") | |
| .style("font-size", "14px") | |
| .style("fill", "grey") | |
| .style("max-width", 400) | |
| .text("A short description of the take-away message of this chart."); | |
This file contains hidden or 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"> | |
| <!-- Load d3.js --> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <!-- Create a div where the graph will take place --> | |
| <div id="my_dataviz"></div> | |
| <!-- Load color palettes --> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script type="text/javascript" src="heatmap.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment