Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active March 23, 2020 03:40
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 tomshanley/b79c45f3260a150b48523822f027acb3 to your computer and use it in GitHub Desktop.
Save tomshanley/b79c45f3260a150b48523822f027acb3 to your computer and use it in GitHub Desktop.
Download ZIP
heatmap with scales per row
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
console.clear()
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 = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
let x = d3.scaleBand()
.domain([1,2,3])
.range([0, width])
let y = d3.scaleBand()
.domain(["a","b"])
.range([0, height])
let colour = d3.scaleSequential(d3.interpolatePiYG);
let nestedData = Array.from(d3.group(data, d => d.item))
nestedData.forEach(function(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")
.data(item[1])
.enter()
.append("rect")
.attr("x", d => x(d.date))
.attr("y", 0)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => colour(d.value))
.style("stroke", "white")
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment