D3 Heatmapで色の分布が異なるのはなぜですか？

Question

QUESTION：

なぜD3ヒートマップ上の色分布は、リファレンスと異なるのですか？

データは同じですが、私はどこでミスをしたのか分かりません。

データ範囲を間違って指定する必要がありますか？

---

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

あなたが再現しようとしているDATAVIZとは異なり、あなたのcolorScale関数は0から最大値に起こっている。その代わりに

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

最小値を設定して、再生するデータビジュアルの同じ数値を使用してください：

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

はここにあなたの更新CodePenです：https://codepen.io/anon/pen/YVNvPJ?editors=1010