Viz - Scale

> (Data|State) Management and Processing > Data Visualization Foundation

1 - 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).

Advertising

3 - Domain - Range Mapping

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

3.2 - 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]);
data/viz/scale.txt ยท Last modified: 2019/01/30 17:08 by gerardnico