Skip to content

Instantly share code, notes, and snippets.

Last active March 23, 2020 03:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tomshanley/b79c45f3260a150b48523822f027acb3 to your computer and use it in GitHub Desktop.
heatmap with scales per row
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
var data = [
{item: "a", date: 1, value: 50},
{item: "a", date: 2, value: 30},
{item: "a", date: 3, value: 35},
{item: "b", date: 1, value: 10},
{item: "b", date: 2, value: 50},
{item: "b", date: 3, value: 35},
let width = 500
let height = width
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
let x = d3.scaleBand()
.range([0, width])
let y = d3.scaleBand()
.range([0, height])
let colour = d3.scaleSequential(d3.interpolatePiYG);
let nestedData = Array.from(, d => d.item))
colour.domain(d3.extent(item[1], d => d.value))
let g = svg.append("g")
.attr("transform", "translate(0," + y(item[0]) + ")")
let squares = g.selectAll("rect")
.attr("x", d => x(
.attr("y", 0)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => colour(d.value))
.style("stroke", "white")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment