D3 heatmap Issue with positioning rectangles on graph

1

I have been wrestling with d3 heatmap project for some time. I finally got the axis to work with extra ticks at start and end of axis.But when i try to append rectangles my x coordinates not matching x axis ticks.
Here is my latest version.Any Help would be appreciated.
Latest HeatMap attempt

2

I wish I could be more help! I found this project very frustrating myself. I took some time off but I’m trying to sum up the courage to complete D3 #4 and #5.

I think your error has something to do with your xScale. If you log out d.year in your code, you’ll notice the year is showing up correctly.

svg.selectAll("rect")
  .data(myData)
  .enter()
  .append("rect")
  .attr("x",(d)=> {
    console.log(d.year); // You get years ranging from 1753 up to 2015.
    return xScale(d.year);
})
  .attr("y",(d)=> yScale(d.month-1))
  .attr("height", yScale.bandwidth())
  .attr("width", Math.ceil(w / myData.length))
  .style("fill","#004d4d")

Yet for whattever reason, after being run through the xScale, it’s assigning every cell the exact same value for x, ~788.7513:
<rect x="788.8513772600594" height="40" width="1" style="fill: rgb(0, 77, 77);"></rect>

3

If you look at how xScale is set up, and specifically its domain, you might notice the issue:

const minVal = d3.min(myData, d => yearParser(d["year"]));
const maxVal = d3.max(myData, d => yearParser(d["year"]));
    
const xScale = d3
      .scaleTime()
      .domain([minVal, maxVal])
      .range([padding, w - padding]);

The scale maps a date instance like minVal and maxVal to a position on the axis.

When you then use the scale, the function expects a similar date instance as an argument.

.attr("x",(d)=> {
-    return xScale((d["year"]));
+    return xScale(yearParser(d["year"]));
})

Let me know if it helps and good luck on the rest of the visualization.

You can do this :slightly_smiling_face:

4

Thank you both for replying to my question on d3 heatmap rectangles positioning. I figured it out myself a day ago that i forgot to parse d.year with yearParser in the x coordinate.It finally displayed properly after changing my code as bornotofrappe mentioned in his example.above.

1 Like