Skip to content

Instantly share code, notes, and snippets.

@denisemauldin

denisemauldin/.block

Last active April 8, 2019 16:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisemauldin/33ae46a3ec246cee5a6ad24c079403c7 to your computer and use it in GitHub Desktop.
Save denisemauldin/33ae46a3ec246cee5a6ad24c079403c7 to your computer and use it in GitHub Desktop.
Download ZIP
v5 centered rectangular heatmap
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg id="heatmap" width="500" height="400"></svg>
<script>
var margin = {left: 10, right: 10, top: 10, bottom: 10}
var width = 500
var height = 400
// Initiatialise SVG
var svg = d3.select("#heatmap")
var correlations = [
{correlation: 0.01, voterX: 'a', voterY: 'b'},
{correlation: 0.02, voterX: 'a', voterY: 'c'},
{correlation: 0.3, voterX: 'a', voterY: 'd'},
{correlation: 0.04, voterX: 'a', voterY: 'e'},
{correlation: 0.05, voterX: 'b', voterY: 'c'},
{correlation: 0.06, voterX: 'b', voterY: 'd'},
{correlation: 0.07, voterX: 'b', voterY: 'e'},
{correlation: 0.08, voterX: 'b', voterY: 'b'},
{correlation: 0.09, voterX: 'c', voterY: 'd'},
{correlation: 0.10, voterX: 'c', voterY: 'e'},
{correlation: 0.11, voterX: 'd', voterY: 'e'},
{correlation: 0.02, voterX: 'c', voterY: 'b'},
{correlation: 0.5, voterX: 'a', voterY: 'b'},
]
var voters = ['a', 'b', 'c', 'd','e']
// Grab min and max of correlations
let min = d3.min(correlations.map(d => d.correlation).filter(d => d < 1)),
max = d3.max(correlations.map(d => d.correlation).filter(d => d < 1));
// Position the main chart canvas
let heat = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Redefine width and height with margins in mind
let w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom;
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, w ])
.domain(voters)
.padding(0.05)
.align(0.5);
heat.append("g")
.attr("transform", "translate(0,0)")
.call(d3.axisTop(x))
// Build Y scales and axis:
var y = d3.scaleBand()
.range([ h, 0 ])
.domain(voters)
.padding(0.05)
.align(0.5);
heat.append("g")
.call(d3.axisLeft(y))
.attr("transform", "translate(0" + ", 0)");
// Build rect size scale
var xRectSize = d3.scaleLinear()
.range([x.bandwidth()/5, x.bandwidth()-2])
.domain([min, max]);
var yRectSize = d3.scaleLinear()
.range([y.bandwidth()/5, y.bandwidth()-2])
.domain([min, max]);
// Build color scale
var myColor = d3.scaleLinear()
.range(["#d95f02", "white", "#15b097"])
.domain([min, 0, max]);
heat.selectAll()
.data(correlations, d => d.voterX+':'+d.voterY)
.enter()
.append("rect")
//.attr("x", d => x(d.voterX))
.attr("y", d => y(d.voterY) + ((yRectSize(+d.correlation) + y.bandwidth()) / 2) - yRectSize(+d.correlation))
.attr("x", d => x(d.voterX) + ((xRectSize(+d.correlation) + x.bandwidth()) / 2) - xRectSize(+d.correlation))
.attr("width", d => xRectSize(+d.correlation))
.attr("height", d => yRectSize(+d.correlation))
.style("fill", d => {if (d.correlation == 1) {return "white";}
else return myColor(d.correlation)});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment