Heat Map - can't figure out how to show cells

1

Stuck trying to show the cells. If someone could just please show me the basic recipe for getting any cell to show that would help kickstart things for me.

Thank you kindly!

2

This does not fix every thing but it gets you on the right path. I found three bugs that were causing you some trouble I made the comments on the code where it needs to be changed. Also forked it in codepen you can check it out there. Good luck. happy coding.

const SVG_CANVAS = d3.select('body')
                      .append('svg')
                      .attr('id','svgCanvas')
                      .attr('width',SVG_WIDTH + MARGIN.right + MARGIN.left)
                      .attr('height',SVG_HEIGHT + MARGIN.top + MARGIN.bottom);
  
  let colorDomain = d3.extent(dataset.monthlyVariance, function(d){
      return d.variance;
    });
  
   let colorScale = d3.scaleLinear()
      .domain(colorDomain)
      .range(["lightblue","blue"]);
  
  // moved up before it is called by "rectangles"
  let xScale = d3.scaleTime()
                .domain(d3.extent(dataset.monthlyVariance, function (d,i) {                       
                  return (new Date(d.year));  // change from dataset.monthlyVariance to d.year
                                  }))
                .range([MARGIN.left,SVG_WIDTH]);
  
  // moved up before it is called by "rectangles"
  let yScale = d3.scaleLinear()
                 .domain([12,1]) 
.range([SVG_HEIGHT,MARGIN.top]) 
  
  let rectangles = SVG_CANVAS.selectAll("rect")
      .data(dataset.monthlyVariance)
      .enter()
      .append("rect"); 
  
  console.log(xScale(dataset.monthlyVariance[1].year));
      
  rectangles.attr("x", function(d){
      return xScale(d.year); // remove * 50
    })
    .attr("y", function(d){
      return yScale(d.month); // remove * 50 
    })
    .attr("width", 50)
    .attr("height", 50). 
    style("fill", function(d){
      return colorScale(d.variance); 
    });
3
4

THANK YOU! I didn’t think about the ordering, for some reason I didn’t think that mattered. But that makes total sense now. You are a kind soul, sir.

1 Like