31: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; }32:[] 2f:{"title":"Rects Stress Test","cells":[{"id":0,"value":"md`# Rects Stress Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`# Svg`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":74,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":76,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":125,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}