Tell us what’s happening:
Hello, I’m stuck and don’t know what to do. The heatmap is displayed correctly, but the first two months of 1753 are missing. I’ve displayed circles with the same data, and the circles are there. When I use console.log(data.monthlyVariance.filter(d => d.year === 1753 && (d.month === 1 || d.month === 2)));, the two months are correctly shown. However, in the rect elements, using console.log does not show the first two months of 1753. Can someone please help me?
Your code so far
const rectHeight = (height - 2 * padding) / 12;
const rectWidth = (width - 2 * padding) / (maxYear - minYear);
d3.select(svg)
.selectAll("rect")
.data(data.monthlyVariance)
.enter()
.append("rect")
.attr("x", (d) => {
const x = xScale(parseDate(d.year.toString()));
console.log("Rect X:", x);
return x;
})
.attr("y", (d) => yScale(d.month)) //<-- here is 1753 month 1 & 2 not included
.attr("width", rectWidth)
.attr("height", rectHeight)
.attr("class", "cell")
.attr("data-month", (d) => d.month-1)
.attr("data-year", (d) => d.year)
.attr("data-temp", (d) => tempBase + d.variance)
.attr("fill", (d) => colorScale(tempBase + d.variance));
console.log(data.monthlyVariance.filter(d => d.year === 1753 && (d.month === 1 || d.month === 2)));
d3.select(svg)
.selectAll(“circle”)
.data(data.monthlyVariance)
.enter()
.append(“circle”)
.attr(“cx”, (d) => xScale(parseDate(d.year.toString())))
.attr(“cy”, (d) => yScale(d.month))
.attr(“r”, 5)
.attr(“fill”, “red”);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Data Visualization Projects - Visualize Data with a Heat Map