31:[] 2f:{"title":"Scale animated trasisiton experiments","cells":[{"id":0,"value":"md`# Scale animated trasisiton experiments`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":72,"value":"controls","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"margin = ({top: height / 2, right: 20, bottom: height / 2, left: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}