41:null 42:["$","title",null,{"children":"Marching paths | Luiz “Felds” Liscia | Observable"}] 48:[] 46:{"id":"b6636f91c328db05","slug":"animating-paths","title":"Marching paths","thumbnail":"46d605ebb62aa90b8b13632b65cc9da411b33f8779047d8943d4969cd2fa18d3","access_level":"public","create_time":"$D2020-11-10T02:22:40.224Z","update_time":"$D2020-11-28T02:01:40.287Z","view_time":null,"first_public_time":"$D2020-11-10T03:14:07.731Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c15231bb2f0705bf","login":"felds","name":"Luiz “Felds” Liscia","avatar_url":"https://avatars-next.observableusercontent.com/778ad5e80272db3b9c756056608eea1a831fcad38df4413634e0292e94652d4b","tier":"starter_2024","bio":"","following":false},"version":150,"publish_version":150,"role":null,"authored":false,"authors":[{"type":"individual","id":"458974a01c8dd4e5","login":"felds","name":"Luiz “Felds” Liscia","avatar_url":"https://avatars-next.observableusercontent.com/778ad5e80272db3b9c756056608eea1a831fcad38df4413634e0292e94652d4b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"458974a01c8dd4e5","login":"felds","name":"Luiz “Felds” Liscia","avatar_url":"https://avatars-next.observableusercontent.com/778ad5e80272db3b9c756056608eea1a831fcad38df4413634e0292e94652d4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Marching paths","cells":[{"id":0,"value":"md`# Marching paths`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"svgEl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"animationDuration = 341","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = {\n const max = 25;\n const arr = Array(25).fill(0);\n yield arr;\n while (true) {\n await Promises.tick(animationDuration);\n arr.shift();\n arr.push((Math.random() * maxValue) >> 0);\n yield arr;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height=300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"innerWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"innerHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"maxValue = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"xScale = d3\n .scaleLinear()\n .domain([0, data.length - 1])\n .range([0, innerWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"yScale = d3\n .scaleLinear()\n .domain([0, maxValue])\n .range([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"shapeGen = d3\n .area()\n .x((d, i) => xScale(i))\n .y0(d => yScale(d))\n .y1(innerHeight)\n\n // .line()\n // .x((d, i) => xScale(i))\n // .y(d => yScale(d))\n\n .curve(d3.curveBasis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"graph = {\n const g = d3.select(svgEl).select('.graph');\n g.datum(data)\n .transition()\n .duration(animationDuration)\n .attr(\"d\", shapeGen)\n .end();\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 47:"$46:body"