How to flip the Y axis on my D3 graph?

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 :)


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