frontend + d3
Published
Edited
Sep 19, 2019
md`# D3 Tween Animation for Numeric Expression
## numeric interpolation with ease in/out animation
- https://github.com/d3/d3-interpolate
- https://github.com/d3/d3-ease
- by sungryeol park
`
viewof easeType = html`<select>
<option selected>easeLinear
<option>easePolyIn
<option>easePolyOut
<option>easePolyInOut
<option>easeQuadIn
<option>easeQuadOut
<option>easeQuadInOut
<option>easeCubic
<option>easeCubicIn
<option>easeCubicOut
<option>easeCubicInOut
<option>easeSinIn
<option>easeSinOut
<option>easeSinInOut
<option>easeCircleIn
<option>easeCircleOut
<option>easeCircleInOut
<option>easeExpIn
<option>easeExpOut
<option>easeExpInOut
<option>easeBackIn
<option>easeBackOut
<option>easeBackInOut
</select>`
viewof min = slider({min: 0, max: 10000000, value: 0, step: 1})
viewof max = slider({min: 0, max: 10000000, value: 500000, step: 1})
number = {
let interpolationCount = 0;
while(interpolationCount < 1) {
interpolationCount += 0.01
const easedCount = d3[easeType](interpolationCount)
// call with .requestAnimationFrame() in real-life usage
// https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
yield d3.interpolateRound(min,max)(easedCount)
}
}
d3 = require('d3@v5')
import {slider, color, input} from '@jashkenas/inputs'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
