heatmap with scales per row

<!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>

<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>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-array.v2.min.js