How to flip the Y axis on my D3 graph?

Question

I have this graph :

http://jsfiddle.net/5c4sa6vb/1/

Ive been trying to mess about with it and try flip the y axis. What i need is for the ticks to start at 0,0 at the bottom left. I have tried messing with the domain and range but cant seem to solve my problem :/

var y = d3.scale.linear()
    .range([0, width-200]);

Solution 1

Here's a version that works: fiddle

First, switching the order of the axis domain elements from ([0,whatever]) to ([whatever,0]) will reverse the scale.

Second, a small mistake. You simply were using width in your y scale instead of height. So since the graph isn't square, it wasn't the right length!

Finally, I notice that you have a bunch of extra adjustments tucked in here and there, subtracting 200, the axisMovement variable, an extra g element around your svg, etc. So you'll have an easier time if you clean out those parts that are not needed. The purpose of setting up the margins using the convention that you did is so that these extra tweaks are unnecessary. Taking advantage of elegant little tricks like these is what gets people really hooked on d3 :)

Solution 2

The way to reverse the Y axis in 3D is simple :

change

var y = d3.scale.linear()
    .range([0, width-200]);

for

   var y = d3.scale.linear()
        .range([width-200 , 0]);

just swap the parameters and it should do the trick !

Demo Fiddle

Comments

[thatOneGuy]

cheers man, but as you can see it doesnt start from [0,0] in the bottom left :/ ....

[user3241019]

Have a loot on this answer about the Y axis, it should help you revert and adapt it correctly : stackoverflow.com/questions/20197961/reversed-y-axis-d3

[thatOneGuy]

perfect answer, found it really confusing at first but this helped me out a lot :) thank you

[thatOneGuy]

One more thing if you dont mind, the edits you made are great but the x and y axis dont match, i mean theyre not to scale :/ they both have the same domain but theyre different sizes :/ how do i use the same scale as the x for the y but a smaller size as the height is smaller than the width if you understand me ?

[Dick Fox]

Well... this involves some kind of decision. Since the data are in cm, I see why you'd like the distance representing 1 cm to be the same on the x and y axes. Your data is pretty square (the max of length and width from your data are similar), so to me it would make sense to make the graph square. If, though, you're stuck with this "aspect ratio", you'd have to make the xaxis domain max greater to force the "grid" to be square. But then your data will all be on the left side of the graph, which might also look funny. See what I mean?

[thatOneGuy]

managed to figure it out :) cheers though : stackoverflow.com/questions/31202802/…

[srinivas gowda]

stackoverflow.com/questions/45997405/… can you see this guys

[srinivas gowda]

stackoverflow.com/questions/45997405/… can you see this