Viz - Scale

Utah Teapot

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





Discover More
Card Puncher Data Processing
D3 - Scale

scale in D3. D3’s scales simplify visual encoding. They map data value (a domain) to pixels value (a range). These scales supports both ordinal and quantitative (linear, logarithmic, exponential,...
Scale
Statistics - Scale

Scale Or unit of variable, coefficient: m km ... from 0->inf into 0->1: See mmalex/status/916313043767906304?s=03tanh(mmalex) see
Utah Teapot
Viz - Legend

pysal/legendgram color scale shown as a distribution



Share this page:
Follow us:
Task Runner