Visualia

Math

map

Remaps the number from one linear range to another. Inspired by p5 / Processing map() and D3 scaleLinear() functions.

function map(
  value: number,
  start1: number,
  stop1: number,
  start2: number,
  stop2: number
): number;

Usage

First let's create 10 circles with x coordinates [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].

Using map() it is easy to transform x coordinates from 1-10 range to 0-400 range:



 
 





<svg width="400" height="20">
  <circle
    v-for="x in 10"
    :cx="map(x,1,10,0,400)"
    cy="10"
    r="10"
  />
</svg>

Let's also use x to map circle radiuses to 1-20 range:






 



<svg width="400" height="40">
  <circle
    v-for="x in 10"
    :cx="map(x,1,10,0,400)"
    cy="20"
    :r="map(x,1,10,1,20)"
  />
</svg>

Finally, instead of 10, let's have 20 circles. Also use x to map circle opacities to 0.1 - 0.9 range:



 



 



<svg width="400" height="40">
  <circle
    v-for="x in 20"
    :cx="map(x,1,20,0,400)"
    cy="20"
    :r="map(x,1,20,1,20)"
    :opacity="map(x,1,20,0.1,0.9)"
  />
</svg>

Prior art

https://visualia.github.io/visualia_original/#helper-functions_scale

https://designstem.github.io/fachwerk/docs/#/scale