Y-axis to be inverted

Question

I am using two.js library in javascript to make a system coordinates, and i want the Y-axis to be inverted. Now 0,0 is at the top left but I want it to be at the bottom left

Answer 1

var two = new Two({
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

two.scene._matrix.manual = true;
two.scene._matrix.translate(0, two.height).scale(1, -1);

var rect = two.makeRectangle(0, 0, 50, 50);
var circ = two.makeCircle(0, 50, 25);

Answer 2

var y = d3.scale.linear().domain([0,100]).range([0,300]);
console.log( y(0), y(50), y(100) );
//-> [0, 150, 300]

var y2 = d3.scale.linear().domain([0,100]).range([450,150]);
console.log( y2(0), y2(50), y2(100) );
//-> [450, 300, 150]

The first example maps increasing x to increasing y, which is not what you wanted. The second one maps increasing x to decreasing y. (It also offsets x=100 to y=150, in case you needed padding.)

Another one answer:

I recommend using an inverted range for the y-scale, so that it always encodes position:

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

When you compute the "y" attribute of a rect, you can use the y-scale directly. For the height attribute, you'll have to use height - y(d), but that seems reasonable to me. When you use an inverted range this way, you can also use the scale with a d3.svg.axis, and it will do the right thing.