Zeichenfläche 1

28:null 29:["$","title",null,{"children":"SVG Animation | Thomas Oberbichler | Observable"}] 2e:Tcd91,svgAnimation({ time, steps: [ { layers: ['axes'] }, { layers: ['axes', 'residual'] }, { layers: ['axes', 'residual', 'current'] }, { layers: ['axes', 'residual', 'current', 'predictor'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter1'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter2'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter3'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter4'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter5'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter6'] }, { layers: ['axes', 'residual', 'current', 'predictor', 'iter6', 'next'] }, ], width: 0.6 * width, data: html`` })2f:[] 2c:{"id":"7d1fc25c92398e43","slug":"svg-animation","title":"SVG Animation","thumbnail":"8cb800908683ca6be767fa2473f8d811a6c88a6fad40747fa0ecb47141ec488a","access_level":"public","create_time":"$D2020-04-10T13:40:49.005Z","update_time":"$D2021-01-19T12:58:27.190Z","view_time":null,"first_public_time":"$D2020-04-10T18:01:10.437Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"63ea0ba327c02e72","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":"starter_2024"},"version":118,"publish_version":118,"role":null,"authored":false,"authors":[{"type":"individual","id":"c69ce5b2b338318d","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":null}],"members":[{"type":"individual","id":"c69ce5b2b338318d","login":"oberbichler","name":"Thomas Oberbichler","avatar_url":"https://avatars-next.observableusercontent.com/265b4716883baf8f5978e349384c2921f054e6d4c37507f37a41a09745720cbe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVG Animation","cells":[{"id":0,"value":"md`# SVG Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`*Create simple step-by-step instruction using SVG.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\n~~~javascript\nimport {svgAnimation} from '@oberbichler/svg-history'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"svgAnimation = function({time, steps, data, width=null, height=null}) {\n const svg = d3.select(data);\n \n if (width) {\n svg.attr('width', width);\n }\n \n if (height) {\n svg.attr('height', height);\n }\n \n for (let i = 0; i < steps.length; i++) {\n for (const layer of steps[i].layers) {\n svg.select(`#${layer}`).attr('visibility', 'hidden');\n }\n }\n \n for (const layer of steps[Math.min(time, steps.length - 1)].layers) {\n svg.select(`#${layer}`).attr('visibility', 'visible');\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof time = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 1,\n description: 'Walk through the steps',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"