Am trying to make a Heatmap but am getting this result where similar name with different value is presented once on the Heatmap.

The printing down is to show me the results . The heatmap should look like squares EXAMPLE:

My code is,

<script> ...

  data = [{% for Bindll in tarname %} {group: '{{ Bindll.targetnameassignedbycuratorordatasource }}',
             variable:'{{ Bindll.zincidofligand}}',
             value: {{Bindll.ki_nm}}
            }, {% endfor %}];
var myGroups = [{% for Bindll in tarname %} "{{ Bindll.targetnameassignedbycuratorordatasource }}",  {% endfor %}]
  var myVars = [{% for Bindll in tarname %} "{{ Bindll.zincidofligand}}", {% endfor %}]
 
  // Build X scales and axis:
  var x = d3.scaleBand()
    .range([0, width])
    .domain(myGroups)
    .padding(0.01);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(60)")
    .style("text-anchor", "start");

  // Build Y scales and axis:
  var y = d3.scaleBand()
    .range([height, 0])
    .domain(myVars)
    .padding(0.01);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Build color scale
  var myColor = d3.scaleLinear()
    .range(["#ffffff", "#c60606"])
    .domain([d3.min(data, function(d) { return d.value}), d3.max(data, function(d) { return d.value})])

  //Read the data and add 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("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .style("fill", function(d) {
      return myColor(d.value)
    })

</script>

any help is appreciated.