D3 chart being squeezed into small part of SVG

I am building a chart and for some reason, it is being squeezed into one part of the SVG canvas.

I followed the normal process and created a larger canvas that holds all the elements of graph (including labels and axes etc) and then using margins, created a smaller canvas that holds ONLY the graph (no axes but incl some labels). Then using a linear scale, I added the lines expecting it to take up all the space inside the larger canvas minus the margins.

What I’ve tried:

  • expanding the range() of the linear scale but it causes only the smallest change (i.e. the lines expand a little away from each other) which is even more confusing.
  • commenting out all the code that moves labels around to prevent them from overlapping in case that was causing the unexpected results. But that wasn’t the problem.

Clearly, something else is causing the y values to be confined to a smaller space than is apparent. I did copy this code from somewhere else so maybe I missed something when I modified it for my own use: https://gist.github.com/mwburke/9873c09ac6c21d6ac9153e54892cf5ec

And this is my whole code block: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs


I made the mistaken assumption that my dataset values ranged from 0-100 (because it was a percentage column) but actually all the values were actually between 40-75. Once I adjusted domain to be .domain([40, 75]), the lines spread out as expected.

Now I have to make other decisions about whether graph is misleading without 0% value on the axes. But this issue can be closed out.