# Viz - Scale

Scale in Visualization

• Line with numbers (Major and minor Grid)

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

### 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 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,... Statistics - Scale

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

pysal/legendgram color scale shown as a distribution 