flip svg coordinate system

Question

Is there a way to flip the SVG coordinate system so that [0,0] is in the lower left instead of the upper left?

Answer 1

An alternative is to use D3 v4 scaleLinear to create a function that will do the swapping for you.

import * as d3 from "d3";

...

// Set the height to the actual value to where you want to shift the coords.
// Most likely based on the size of the element it is contained within
let height = 1; 
let y = d3.scaleLinear()
  .domain([0,1])
  .range([height,0]);

console.log("0 = " + y(0));       // = 1
console.log("0.5 = " + y(0.5));   // = 0.5
console.log("1 = " + y(1));       // = 0
console.log("100 = " + y(100));   // = -99
console.log("-100 = " + y(-100)); // = 101

See runable code via tonic