Visualize Data with a Heat Map - First five months missing

JavaScript
1

Tell us what’s happening:

My CodePen project passes all 18 tests, but for some reason January 1973 to May 1973 have not been rendered. The first cell to appear inside the element is June 1973. Since I’m performing the same operations on all the data, and the first five months are present in that data, I cannot think of a reason why they would not appear.

Your code so far
The complete code is here: https://codepen.io/bryanvanb/pen/QWrJmEW
But I suppose the root of the problem must be in this part:

// draw the cells
const cellWidth = xScale(1754) - xScale(1753);
const displace = cellWidth / 2.0;
svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "cell")
  .attr("x", (d) => xScale(d.year) - displace)
  .attr("y", (d) => yScale(d.monthStr))
  .attr("width", cellWidth)
  .attr("height", yScale.bandwidth())
  .style("fill", (d) => myColor(d.temp))
  .attr("data-month", (d) => d.month - 1)
  .attr("data-year", (d) => d.year)
  .attr("data-temp", (d) => d.temp)
  .attr("id", (d) => String(d.year) + d.monthStr)
  .on("mouseover", (event, d) => {
    const [x, y] = d3.pointer(event, svg);
    const temp = d.temp.toFixed(2);
    const variance = (d.variance > 0 ? "+" : "") + d.variance.toFixed(2);
    tooltip
      .style("opacity", 0.9)
      .style("left", x + 10 + "px")
      .style("top", y + "px")
      .attr("data-year", d.year)
      .html(`${d.monthStr} ${d.year}<br>${temp}℃<br>${variance}℃`);
  })
  .on("mouseout", (event, d) => {
    tooltip.style("opacity", 0);
  });

// make sure May 1973 exists and has valid (x,y) coords
console.log(dataset);
console.log(xScale(dataset[4].year) - displace);
console.log(yScale(dataset[4].monthStr));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Data Visualization Projects - Visualize Data with a Heat Map

Link to the challenge:

2

I now know what I did wrong. Because I had already added five <rect> elements to my SVG in the legend, .selectAll("rect") skipped over the first five items.

To fix it, I should either append the <rect>s in my legend and graph body to separate <g> elements, or I should use .selectAll(".cell") to select only elements with the .cell class.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.