ALx - 1 year ago 75

Javascript Question

I want to modify an array of numbers and output it to a new range using

`d3.scale`

`easeInOutQuad`

`easeInOutQuad = function (x, t, b, c, d) {`

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

}

So my input array

`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]`

`[0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]`

My code so far:

`var inputArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],`

linearArr = [],

easingArr = [],

easing = d3.interpolate, // ?

min = d3.min(inputArr),

max = d3.max(inputArr),

linearScale = d3.scale.linear()

.domain([min,max])

.range([0,100]),

easingScale = d3.scale.linear()

.domain([min,max])

.interpolate(easing) // ?

.range([0,100]);

for (var i = 0; i < inputArr.length; i++) {

linearArr[i] = linearScale(inputArr[i]);

easingArr[i] = easingScale(inputArr[i]);

}

console.log(linearArr); // 0,10,20,30,40,50,60,70,80,90,100

console.log(easingArr); // 0,10,20,30,40,50,60,70,80,90,100

Thanks for any suggestions/examples of how such an easing function could be used with

`d3.interpolate`

Answer Source

Thanks to this helpful example, it's solved now, so a linear array of numbers can be 'eased':

`linear = [0,25,50,75,100]`

--> `eased = [0,12.5,50,87.5,100]`

Here's the code:

```
var steps = 5,
zStart = 0,
zEnd = 100,
linearArr = [],
easingArr = [],
linearScale = d3.scaleLinear()
.domain([0,1])
.range([zStart,zEnd]),
easingScale = d3.scaleLinear()
.domain([0,1])
.interpolate(easeInterpolate(d3.easeQuadInOut))
.range([zStart,zEnd]);
for (var i = 0; i < steps; i++) {
linearArr[i] = linearScale(i/(steps-1));
easingArr[i] = easingScale(i/(steps-1));
}
console.log("linear (" + linearArr.length + "): " + linearArr);
console.log("easing (" + easingArr.length + "): " + easingArr);
function easeInterpolate(ease) {
return function(a, b) {
var i = d3.interpolate(a, b);
return function(t) {
return i(ease(t));
};
};
}
```