Estoy tratando de hacer un mapa de calor, pero obtengo este resultado donde se presenta un nombre similar con un valor diferente una vez en el mapa de calor.

La impresión hacia abajo es para mostrarme los resultados. El mapa de calor debería verse como cuadrados EJEMPLO:

mi código es,

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

cualquier ayuda es apreciada.