score:1

Accepted answer

Your y-axis is being created but is crammed to the left because of the way your elements are positioned right now. I've made some minor changes to make the positioning of the different elements better. You can adjust further as per your needs.

  1. Updated the range for the y-scale to constrict it to match the positioning of your matrix text elements

    var scaleY = d3.scalePoint().domain(['User 1', 'User 2', 'User 3', 'User 4', 'User 5', 'User 6', 'User 7'])
    .range([45, 350]);
    
  2. Pushed the Y axis further to the right

    var gY = svg.append("g")
      .attr("transform", "translate(60,0)") //pushed right to start at 60
      .attr("class", "yAxis")
      .call(yAxis);
    
  3. Added some padding to your text elements when they're being appended so they align properly.

    var numbers = svg.selectAll("numbers").data(data).enter().append("text")
            .attr("x",function(d,i) { return (i % m)*50 + 10 + r + 80; }) //added padding of 80 
    

JSFiddle - https://jsfiddle.net/a8hqb08y/

P.S. I would suggest using margins for better flexibility with positioning elements so you dont have to worry about things being cut off.


Related Query

More Query from same tag