D3 heatmap Issue with positioning rectangles on graph

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

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.

  .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))

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>

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
      .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:

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