Viz - Scale

Javascript

• Scale x

MAX_X = 10; // Max value
WIDTH = 10; // Max Length / color
let x = ( val => val / MAX_X * WIDTH );

• Scale Y

MAX_Y = 10; // Max Value
HEIGHT = 20; // Max Length / color
// The scale is negative here (goes from 10 to 0)
let y = ( val => HEIGHT - val / MAX_Y * HEIGHT );

• Example Output

console.log("X");
console.log("  * at 0: "+x(0));
console.log("  * at 5: "+x(5));
console.log("  * at 10: "+x(10));
console.log("Y: ");
console.log("  * at 0: "+y(0));
console.log("  * at 5: "+y(5));
console.log("  * at 10: "+y(10));

d3

Same in D3 - Scale

let x = scaleLinear().domain([0, MAX_X]).range([0, WIDTH]);
let y = scaleLinear().domain([0, MAX_Y]).range([HEIGHT, 0]);