Я проверил ваш код, и нет ошибки. Значения настолько близки, что вы не можете видеть разницу.
Но вы определенно можете улучшить это, улучшив свою цветовую шкалу. Вместо фиксации минимального и максимального значения. Вы можете найти его по данным, как показано ниже:
// Построить цветовую шкалу var myColor = d3.scaleLinear () .range (["# ffffff", "# c60606"]) .domain ([d3.min (data, function (d) {return d.value}), d3.max (data, function (d) {return d.value})])
Вы сможете увидеть, что они незначительны разница в цветах. Я надеюсь, что это решит вашу проблему.
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// Heatmap data loading
//document.getElementById("data_display").innerHTML = csvDataString; //DEBUG
//var data = {{ heatmap_data|tojson }};
data = [{
group: 'CHEMBL325',
variable: 'CHEMBL98',
value: 7.2
}, {
group: 'CHEMBL325',
variable: 'CHEMBL99',
value: 7.43
}, {
group: 'CHEMBL325',
variable: 'CHEMBL27759',
value: 7.31
}, {
group: 'CHEMBL325',
variable: 'CHEMBL2018302',
value: 7.19
}, {
group: 'CHEMBL325',
variable: 'CHEMBL483254',
value: 7.24
}, {
group: 'CHEMBL325',
variable: 'CHEMBL1213490',
value: 7.26
}, {
group: 'CHEMBL325',
variable: 'CHEMBL356769',
value: 7.23
}, {
group: 'CHEMBL325',
variable: 'CHEMBL272980',
value: 7.21
}, {
group: 'CHEMBL325',
variable: 'CHEMBL430060',
value: 7.23
}, {
group: 'CHEMBL325',
variable: 'CHEMBL1173445',
value: 7.23
}, {
group: 'CHEMBL325',
variable: 'CHEMBL356066',
value: 7.26
}, {
group: 'CHEMBL325',
variable: 'CHEMBL1914702',
value: 7.26
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL98',
value: 6.94
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL99',
value: 7.17
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL27759',
value: 7.09
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL2018302',
value: 7.06
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL483254',
value: 7.14
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL1213490',
value: 7.19
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL356769',
value: 7.14
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL272980',
value: 7.13
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL430060',
value: 7.16
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL1173445',
value: 7.14
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL356066',
value: 7.18
}, {
group: 'CHEMBL1937',
variable: 'CHEMBL1914702',
value: 7.17
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL98',
value: 7.18
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL99',
value: 7.37
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL27759',
value: 7.24
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL2018302',
value: 7.22
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL483254',
value: 7.31
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL1213490',
value: 7.35
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL356769',
value: 7.31
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL272980',
value: 7.24
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL430060',
value: 7.29
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL1173445',
value: 7.25
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL356066',
value: 7.3
}, {
group: 'CHEMBL1829',
variable: 'CHEMBL1914702',
value: 7.3
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL98',
value: 5.88
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL99',
value: 6.39
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL27759',
value: 6.3
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL2018302',
value: 6.27
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL483254',
value: 6.33
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL1213490',
value: 6.35
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL356769',
value: 6.25
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL272980',
value: 6.25
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL430060',
value: 6.33
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL1173445',
value: 6.32
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL356066',
value: 6.46
}, {
group: 'CHEMBL3524',
variable: 'CHEMBL1914702',
value: 6.46
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL98',
value: 5.74
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL99',
value: 6.12
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL27759',
value: 6.11
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL2018302',
value: 6.09
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL483254',
value: 6.24
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL1213490',
value: 6.25
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL356769',
value: 6.18
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL272980',
value: 6.18
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL430060',
value: 6.18
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL1173445',
value: 6.18
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL356066',
value: 6.24
}, {
group: 'CHEMBL2563',
variable: 'CHEMBL1914702',
value: 6.23
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL98',
value: 7.36
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL99',
value: 7.58
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL27759',
value: 7.57
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL2018302',
value: 7.59
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL483254',
value: 7.62
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL1213490',
value: 7.56
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL356769',
value: 7.54
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL272980',
value: 7.54
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL430060',
value: 7.51
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL1173445',
value: 7.48
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL356066',
value: 7.49
}, {
group: 'CHEMBL1865',
variable: 'CHEMBL1914702',
value: 7.49
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL98',
value: 5.76
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL99',
value: 6.19
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL27759',
value: 6.19
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL2018302',
value: 6.16
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL483254',
value: 6.12
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL1213490',
value: 6.11
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL356769',
value: 5.98
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL272980',
value: 5.98
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL430060',
value: 5.98
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL1173445',
value: 5.98
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL356066',
value: 5.98
}, {
group: 'CHEMBL2716',
variable: 'CHEMBL1914702',
value: 5.97
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL98',
value: 6.19
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL99',
value: 6.28
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL27759',
value: 6.24
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL2018302',
value: 6.22
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL483254',
value: 6.27
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL1213490',
value: 6.33
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL356769',
value: 6.32
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL272980',
value: 6.29
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL430060',
value: 6.3
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL1173445',
value: 6.29
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL356066',
value: 6.31
}, {
group: 'CHEMBL3192',
variable: 'CHEMBL1914702',
value: 6.31
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL98',
value: 6.14
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL99',
value: 6.42
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL27759',
value: 6.42
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL2018302',
value: 6.38
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL483254',
value: 6.36
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL1213490',
value: 6.33
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL356769',
value: 6.28
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL272980',
value: 6.28
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL430060',
value: 6.28
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL1173445',
value: 6.25
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL356066',
value: 6.23
}, {
group: 'CHEMBL4145',
variable: 'CHEMBL1914702',
value: 6.26
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL98',
value: 6.71
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL99',
value: 7.12
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL27759',
value: 7.01
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL2018302',
value: 6.98
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL483254',
value: 7.04
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL1213490',
value: 7.1
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL356769',
value: 7.0
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL272980',
value: 7.0
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL430060',
value: 7.0
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL1173445',
value: 6.97
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL356066',
value: 6.99
}, {
group: 'CHEMBL5103',
variable: 'CHEMBL1914702',
value: 6.98
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL98',
value: 6.7
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL99',
value: 6.91
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL27759',
value: 6.86
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL2018302',
value: 6.82
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL483254',
value: 6.79
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL1213490',
value: 6.85
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL356769',
value: 6.74
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL272980',
value: 6.72
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL430060',
value: 6.72
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL1173445',
value: 6.72
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL356066',
value: 6.75
}, {
group: 'CHEMBL3310',
variable: 'CHEMBL1914702',
value: 6.76
}];
// set the dimensions and margins of the graph
var margin = {
top: 30,
right: 100,
bottom: 100,
left: 100
},
width = 600 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var myGroups = ["CHEMBL325", "CHEMBL1937", "CHEMBL1829", "CHEMBL3524", "CHEMBL2563", "CHEMBL1865", "CHEMBL2716", "CHEMBL3192", "CHEMBL4145", "CHEMBL5103", "CHEMBL3310"]
var myVars = ["CHEMBL98", "CHEMBL99", "CHEMBL27759", "CHEMBL2018302", "CHEMBL483254", "CHEMBL1213490", "CHEMBL356769", "CHEMBL272980", "CHEMBL430060", "CHEMBL1173445", "CHEMBL356066", "CHEMBL1914702"]
// 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>