Why Is The Color Distribution Different On My D3 Heatmap?

QUESTION: Why is the color distribution on my D3 Heatmap different from the Reference one ? The data is the same, I don't know where I made a mistake. I must have specified the dat

Solution 1:

Unlike the dataviz you're trying to reproduce, your colorScale function is going from 0 to a max value:

const colorScale = d3.scaleQuantile()
    .domain([0, d3.max(tempData, (d) => d.variance + baseTemperature)])
    .range(colors);

Instead of that, use the same math of the dataviz you want to reproduce, setting the minimum value:

const colorScale = d3.scaleQuantile()
    .domain([d3.min(tempData, (d) => d.variance + baseTemperature),
        d3.max(tempData, (d) => d.variance + baseTemperature)
    ])
    .range(colors);

Here is your updated CodePen: https://codepen.io/anon/pen/YVNvPJ?editors=1010