How To Use The Same Scale On The Y As The X But Smaller Because Of The Size Difference?

I have the following code snippet: And an alternative jsfiddle: http://jsfiddle.net/laurieskelly/q0ubpmwj/ Both the x and the y use the same domain, but they're not to scale. Thi

Solution 1:

Choose the right side and scale only to it.

var min_dimension = width < height ? width : height;    
var x = d3.scale.linear().range([0, min_dimension]);    
var y = d3.scale.linear().range([min_dimension, 0]);

Here, i've updated fiddle: http://jsfiddle.net/fen1kz/q0ubpmwj/1/

Edit: Ah, since you draw y-line from top, you should adjust only from height:

var x = d3.scale.linear().range([0, height]);    
var y = d3.scale.linear().range([height, 0]);

Solution 2:

Finally figured it out :

var yAxisDomain = maxW/(width/height);

y.domain([0, yAxisDomain]).nice(); 

I needed to get the difference in scale of width and height and then divide the axis width by that to get the correct proportions :)

Updated fiddle :

http://jsfiddle.net/q0ubpmwj/2/