Heat Map y-axis

1

Hello guys i just need a suggestion for the y-axis in the Heat Map project.
This is my current y-axis :

Capture
Capture505×532 4.34 KB

It doesn’t look like the one in solution. Can somebody tell me suggestion on how i can make it
look more like in solution, (i want December for example to be above x axis so that it can point to the middle of the cell/rectangle).

I used scaleLinear for y-axis. Should i use some other scale?

1 Like
2

I am having the same problem! (I am using scaleTime()).

I have been googling ways to format the ticks, but I have not found anything helpful.

3

Hey @jennnico, i came up with this “hacky” solution (https://codepen.io/danilonovakovic/full/OoLzrJ/)
hackySolution
and it worked. But since then i’ve been learning more and more about d3 and i believe that proper way/solution would be to use scaleBand, which is basically like ‘normal’ scale except it gives you ability to set padding on ticks.
You can read more about it here https://d3indepth.com/scales/

I hope this helped you. :smiley:

2 Likes
4

Thank you for your help! You definitely gave me some ideas. I didn’t even know you could set the range that way!

I tried it your way and it moved the ticks to the right place, but then my y-axis wasn’t meeting my x-axis any more! (I noticed you didn’t have that problem!) Anyway, I did some searching and ended up drawing a line on top of my Y-axis.

 //Resource: https://stackoverflow.com/questions/48027481/d3-js-extend-bottom-axis-line-to-origin
 svg.append('line').classed('connecting-line', true)
          .attr('y1', h-padding)
          .attr('y2', padding)
          .attr('x1', padding)
          .attr('x2', padding)
          .style('stroke', 'black')

Thanks, again!

1 Like