Why is the color distribution different on my D3 Heatmap?

Question

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 data range incorrectly ?

---

CODE:

<script type="text/javascript">   
        d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(error, json) {
          if (error) {
              return console.warn(error);
          }
          visualizeThe(json);
        });

        function visualizeThe(data) {

            const baseTemperature = data.baseTemperature;
            const tempData = data.monthlyVariance;

            const margin = {
                top: 10,
                right: 85,
                bottom: 45,
                left: 70
            }

            const w = 1250 - margin.left - margin.right;
            const h = 500 - margin.top - margin.bottom;
            const barWidth = Math.ceil(w / tempData.length);


            const colors = ["#5e4fa2", "#3288bd", "#66c2a5", "#abdda4", "#e6f598", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d53e4f", "#9e0142"];
            const buckets = colors.length;
            const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            const  minTime = d3.min(tempData, (d) => new Date(d.year,1,1,0,0));
            const  maxTime = d3.max(tempData, (d) => new Date(d.year,1,1,0,0));

            const xScale = d3.scaleTime()
                .domain([minTime, maxTime]) 
                .range([margin.left, w]);   

            const xAxis = d3.axisBottom(xScale).ticks(20);

            const svg = d3.select("#results")
                .append("svg")
                .attr("width",  w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom);

            const div = d3.select("body")
                .append("div")  
                .attr("class", "tooltip")               
                .style("opacity", 0);

            svg.append("g")
                .attr("transform", "translate(0," + (h+margin.top) + ")")
                .call(xAxis);

            const monthsLabels = svg.selectAll("monthLabel")
                .data(months)
                .enter()
                .append("text")
                .text((d) => d)
                .attr("x", 100)
                .attr("y", (d,i) => i * h/12 + 30)
                .style("text-anchor", "end")
                .attr("transform", "translate(-40," +0+ ")")
                .style("font-size", 10);

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

          var heatMap = svg.selectAll("month")
              .data(tempData, (d) => d);

          heatMap.append("title");

          var rects = heatMap.enter()
              .append("rect")
              .attr("x", (d) => xScale(new Date(d.year,1,1,0,0)))
              .attr("y", (d) => d.month * h/12 - margin.bottom + margin.top -1)
              .attr("width", barWidth + 3)
              .attr("height", h/12 - 2)
              .style("fill", colors[0]);

          rects.transition().duration(1000)
              .style("fill", (d) => colorScale(d.variance + baseTemperature));

          heatMap.select("title").text((d) => d.value );

//          heatMap.exit().remove();   

              svg.append("text")             
                  .attr("transform",
                        "translate(" + (w/2) + " ," + 
                        (h+ margin.top + 45) + ")")
                  .style("text-anchor", "middle")
                  .text("Years");

              svg.append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", -5)
                  .attr("x",0 - (h / 2))
                  .attr("dy", "1em")
                  .style("text-anchor", "middle")
                  .text("Months");       
            }

    </script>

Answer 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