About

Scale in Visualization

Scale map:

  • data value (a domain)
  • to pixels value (a range).

Scale permits data (the domain) to fit the chart area (the pixels range).

Domain - Range Mapping

D3 Scale Domain Range

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]);