2a:T5f2,md`전환(transition)을 정의할 때 우리는 명시적으로 interpolator를 (위에서 [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween)를 사용한 것처럼) 지정하거나 D3가 ([*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr)또는 [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)을 사용해서) 선택하도록 할 수 있습니다. 명시적으로 활용하면 [zooming(확대/축소)](/@d3/d3-interpolatezoom), [gamma-corrected RGB blending(감마 보정 RGB 혼합)](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma), [shape blending(모양 혼합)](/@mbostock/hello-flubber)과 같은 고급 interpolation 메소드가 가능합니다. When defining a transition, you can either specify the interpolator explicitly (as above using [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween)) or let D3 choose (using [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) or [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)). Being explicit allows more advanced interpolation methods such as [zooming](/@d3/d3-interpolatezoom), [gamma-corrected RGB blending](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma), or even [shape blending](/@mbostock/hello-flubber).`2b:T55d,viewof timeframe = { const form = html``; form.onchange = () => form.dispatchEvent(new CustomEvent("input")); // Safari form.oninput = event => { switch (form.radio.value) { case "2009": form.value = [new Date("2009-01-01"), new Date("2010-01-01")]; break; case "2010": form.value = [new Date("2010-01-01"), new Date("2011-01-01")]; break; case "2011": form.value = [new Date("2011-01-01"), new Date("2012-01-01")]; break; default: form.value = d3.extent(data, d => d.date); break; } }; form.oninput(); return form; }2c:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1593612172333.006,"size":48822}] 29:{"title":"Learn D3: 애니메이션","cells":[{"id":168,"value":"md`# Learn D3: 애니메이션\n# Learn D3: Animation\n\n종이에 그려진 그래픽과 달리 컴퓨터 그래픽은 정적일 필요가 없습니다; 프랑켄슈타인의 괴물처럼 애니메이션으로 활기를 띄도록 할 수 있습니다! ✨ \nUnlike graphics drawn on paper, computer graphics needn’t be static; like Frankenstein’s monster, they can come alive through animation! ✨`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof replay = html`