2a:null 2b:["$","title",null,{"children":"Scale animated trasisiton experiments | Kostya | Observable"}] 30:[] 2e:{"id":"f35218783aca07c1","slug":"scale-animated-trasisiton-experiments","title":"Scale animated trasisiton experiments","thumbnail":"3c85eaf698486b04391ec6634059c1d75aa9d4832fb94f684bc5bd6a0fee16e9","access_level":"public","create_time":"$D2018-05-27T10:56:08.371Z","update_time":"$D2018-05-31T13:48:48.265Z","view_time":null,"first_public_time":"$D2018-05-31T14:25:11.929Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"10a5086176af0bb0","login":"kkostya","name":"Kostya","avatar_url":"https://avatars-next.observableusercontent.com/f5ff1dfc1cbdafecf8fe126943ef46f7ea62e6d006f5ac9145e91cddb991c06e","tier":"starter_2024"},"version":109,"publish_version":109,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6b1157e2a82619b","login":"kkostya","name":"Kostya","avatar_url":"https://avatars-next.observableusercontent.com/f5ff1dfc1cbdafecf8fe126943ef46f7ea62e6d006f5ac9145e91cddb991c06e","tier":null}],"members":[{"type":"individual","id":"f6b1157e2a82619b","login":"kkostya","name":"Kostya","avatar_url":"https://avatars-next.observableusercontent.com/f5ff1dfc1cbdafecf8fe126943ef46f7ea62e6d006f5ac9145e91cddb991c06e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scale animated trasisiton experiments","cells":[{"id":0,"value":"md`# Scale animated trasisiton experiments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"{\n let element = this;\n const axis = d3.axisBottom(scale);\n if(!element){\n element = DOM.svg(width, height);\n const svg = d3.select(element);\n const g = svg.append(\"g\").attr(\"transform\", `translate(0,${margin.top})`).call(axis);\n } else {\n d3.select(element).select(\"g\").transition(2000).call(axis);\n }\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"scale = {\n let dom = [controls.min, controls.max];\n let range = [margin.left, width - margin.right];\n if(controls.log){ \n return d3.scaleLog().domain(dom).range(range);\n } else {\n return d3.scaleLinear().domain(dom).range(range);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof controls = {\n const form = html``;\n form.set.onclick = () => { \n form.value = {\n min: form.min.valueAsNumber, \n max: form.max.valueAsNumber, \n log: form.log.checked\n };\n form.dispatchEvent(new CustomEvent('input'));\n };\n form.set.onclick();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"controls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"margin = ({top: height / 2, right: 20, bottom: height / 2, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"