2e:null 2f:["$","title",null,{"children":"Rects Stress Test | David B. | Observable"}] 34:T4ee,{ const svgNode = svg``; const d3Node = d3.select(svgNode) const circles = d3Node.selectAll('circle') .data(d3.range(Math.round(svgDisplayPointsRemove/1000)+1)) .enter() .append('rect') .attr('width',10) .attr('height',10) .attr('fill',d=>"#"+((1<<24)*Math.random()|0).toString(16)) .attr('x',d=> Math.random()*400) .attr('y',d=> Math.random()*400) const interval = setInterval(()=>{ d3Node.selectAll('.circle-addition').remove() circles.transition() .duration(1000) .attr('x',d=> Math.random()*400) .attr('y',d=> Math.random()*400) .on('end',(d,i,arr)=>{ if(i==arr.length-1){ const additionalCircles = d3Node.selectAll('.circle-addition') .data(d3.range(svgDisplayPointsRemove)) .enter() .append('rect') .attr('class','circle-addition') .attr('width',10) .attr('height',10) .attr('fill',d=>"#"+((1<<24)*Math.random()|0).toString(16)) .attr('x',d=> Math.random()*400) .attr('y',d=> Math.random()*400) .style('display','none') } }) },1100) invalidation.then(() => clearInterval(interval)); yield svgNode; }35:[] 32:{"id":"4731b082f93e6e40","slug":"rects-stress-test","title":"Rects Stress Test","thumbnail":"d38ba055f1cd27189d54db3ff29bff816e5974ace6b10a968c0fdd845bb94c53","access_level":"public","create_time":"$D2019-05-30T19:51:24.537Z","update_time":"$D2019-05-30T20:34:38.432Z","view_time":null,"first_public_time":"$D2019-05-30T20:11:17.024Z","has_unpublished_edits":null,"fork":{"id":"76cca7b51021057a","slug":"points-stress-test","title":"Points Stress Test","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":0,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":170,"publish_version":170,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2ffb534bd0997df8","slug":"stress-tests","title":"Stress/Performance Tests","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"Rects Stress Test","cells":[{"id":0,"value":"md`# Rects Stress Test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# Svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof svgPoints = slider({min:1,max:100000,step:1,value:10,title:'Just rects draw randomly'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"{\n const svgNode = svg``;\n const d3Node = d3.select(svgNode)\n \nconst circles = d3Node.selectAll('circle')\n .data(d3.range(svgPoints))\n .enter()\n .append('rect')\n .attr('width',10)\n .attr('height',10)\n .attr('fill',d=>\"#\"+((1<<24)*Math.random()|0).toString(16))\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400);\n \n \n \n \n \n yield svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"\n\nviewof svgPointsMoving = slider({min:1,max:100000,step:1,value:10,title:'Rects draw randomly and moving randomly'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n const svgNode = svg``;\n const d3Node = d3.select(svgNode)\n \nconst circles = d3Node.selectAll('circle')\n .data(d3.range(svgPointsMoving))\n .enter()\n .append('rect')\n .attr('width',10)\n .attr('height',10)\n .attr('fill',d=>\"#\"+((1<<24)*Math.random()|0).toString(16))\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400);\n \n const interval = setInterval(()=>{\n circles.transition() \n .duration(1000)\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400);\n \n },1000)\n \n invalidation.then(() => clearInterval(interval));\n yield svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"\n\nviewof svgOpacityPointsMoving = slider({min:1,max:100000,step:1,value:10,title:'Moving, but most of them have 0 opacity'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"{\n const svgNode = svg``;\n const d3Node = d3.select(svgNode)\n \nconst circles = d3Node.selectAll('circle')\n .data(d3.range(svgOpacityPointsMoving))\n .enter()\n .append('rect')\n .attr('width',10)\n .attr('height',10)\n .attr('fill',d=>\"#\"+((1<<24)*Math.random()|0).toString(16))\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400)\n .attr('opacity',(d,i)=>i%1000==0?1:0)\n \n const interval = setInterval(()=>{\n circles.transition() \n .duration(1000)\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400);\n \n },1000)\n \n invalidation.then(() => clearInterval(interval));\n yield svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"\nviewof svgDisplayPointsMoving = slider({min:1,max:100000,step:1,value:10,title:'Moving, but most of them have display none set '})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n const svgNode = svg``;\n const d3Node = d3.select(svgNode)\n \nconst circles = d3Node.selectAll('circle')\n .data(d3.range(svgDisplayPointsMoving))\n .enter()\n .append('rect')\n .attr('width',10)\n .attr('height',10)\n .attr('fill',d=>\"#\"+((1<<24)*Math.random()|0).toString(16))\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400)\n .style('display',(d,i)=>i%1000==0?'initial':'none')\n \n const interval = setInterval(()=>{\n circles.transition() \n .duration(1000)\n .attr('x',d=> Math.random()*400)\n .attr('y',d=> Math.random()*400);\n \n },1000)\n \n invalidation.then(() => clearInterval(interval));\n yield svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"\nviewof svgDisplayPointsRemove = slider({min:1,max:100000,step:1,value:10,title:'Moving,but we delete hidden nodes before animating, then add after animation
(seems fastest - if we have some time to hide momentary screen freezing )'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"