Why Is My Heatmap Not Showing Up Correctly?

SITUATION IMAGE: SITUATION: My heatMap D3.js graph does not show up correctly. What have I done wrong ? There are 0 errors in the console. I can't find the bug. It's most proba

Solution 1:

The problems so far:

1. Your xScale range is wrong, it should be:

   .range([margin.left, w]); 
   

2. You are hardcoding the x position of the x axis;

3. Your rectangles' y position have a wrong magic number;

4. You have to use the xScale for positioning your rectangles:

   .attr("x", (d) =>xScale(newDate(d.year,1,1,0,0)))
   

Although the best idea here is creating a parser to convert d.year to a date.

Also, I'm increasing the width of the rectangles, from 1px to 2px.

Here is your updated CodePen: https://codepen.io/anon/pen/mmONrK?editors=1000

Solution 2:

Here you go: https://codepen.io/anon/pen/qmqeWR

The lines I changed:

.attr("x", (d,i) => (i-d.month) * barWidth + 70)
.attr("y", (d) => (d.month * h/12 -30))
.attr("width", barWidth*12)

Note that this may not be accurate (that is, the correct data may not line up with the correct year), since I'm not sure how you set it all up. I just fiddled with it until I got the chart to display, you can debug it from here.