2a:null 2b:["$","title",null,{"children":"D3 Tween Animation for Numeric Expression | sungryeol park(max) | Observable"}] 30:[] 2e:{"id":"529faaadbfdfdd9c","slug":"d3-tween-animation-for-numeric-expression","title":"D3 Tween Animation for Numeric Expression","thumbnail":"9dcfb05a5bfec6dc4b9e229371d72986ef25b6cfe4f8e28a9f3e5bd7e847ad8d","access_level":"public","create_time":"$D2019-09-18T09:46:41.999Z","update_time":"$D2019-09-19T07:55:58.407Z","view_time":null,"first_public_time":"$D2019-09-18T09:56:18.813Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"798948a27f41b861","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":"starter_2024"},"version":50,"publish_version":50,"role":null,"authored":false,"authors":[{"type":"individual","id":"b63c1c32bcb2615c","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":null}],"members":[{"type":"individual","id":"b63c1c32bcb2615c","login":"rabelais","name":"sungryeol park(max)","avatar_url":"https://avatars-next.observableusercontent.com/827c5661c54130c43dbd18c77323f1f23a062c6948ca7c22724445280a3753f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"D3 Tween Animation for Numeric Expression","cells":[{"id":0,"value":"md`# D3 Tween Animation for Numeric Expression\n## numeric interpolation with ease in/out animation\n- https://github.com/d3/d3-interpolate\n- https://github.com/d3/d3-ease\n- by sungryeol park\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof easeType = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"viewof min = slider({min: 0, max: 10000000, value: 0, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof max = slider({min: 0, max: 10000000, value: 500000, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"number = {\n let interpolationCount = 0;\n while(interpolationCount < 1) {\n interpolationCount += 0.01\n const easedCount = d3[easeType](interpolationCount)\n // call with .requestAnimationFrame() in real-life usage\n // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\n yield d3.interpolateRound(min,max)(easedCount)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"d3 = require('d3@v5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import {slider, color, input} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"