22:null 23:["$","title",null,{"children":"Learn D3: 애니메이션 | Chloe Noh | Observable"}] 28: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).`29: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; }2a:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1593612172333.006,"size":48822}] 26:{"id":"e91313123d4e3052","slug":"learn-d3/6","title":"Learn D3: 애니메이션","thumbnail":"f0499e61c7400c64db3fd0932fa8e0def6f169f77a04d314bc85e9a535f6ac25","access_level":"public","create_time":"$D2020-07-01T14:02:52.333Z","update_time":"$D2020-07-22T13:27:22.841Z","view_time":null,"first_public_time":"$D2020-07-22T13:27:30.703Z","has_unpublished_edits":null,"fork":{"id":"de13bdb9fdabe52a","slug":"learn-d3-animation","title":"Learn D3: Animation","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":"starter_2024","bio":"A back-end software engineer with front-end skill. Interested in data visualization and information architecture to provide clear and efficient information. Nowadays, I lecture on data visualization at Programmers."},"version":1517,"publish_version":1517,"role":null,"authored":false,"authors":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null,"bio":"A back-end software engineer with front-end skill. Interested in data visualization and information architecture to provide clear and efficient information. Nowadays, I lecture on data visualization at Programmers."}],"members":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f2e30c35000ea9b","slug":"learn-d3","title":"Learn D3","owner":{"id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof replay = html`