Animated grid with d3 squares randomly shift around and change color style body min height 500px style script type text javascript src https d3js org d3 v7 min js script script src https cdnjs cloudflare com ajax libs underscore js 1 4 4 underscore min js script div class svg container div script type text javascript var container svg rect gridWidth 800 gridHeight 800 cellSize 15 var container d3 select svg container var svg container append svg attr width gridWidth attr height gridHeight var createRandomRGB function var red Math floor Math random 256 toString var green Math floor Math random 256 toString var blue Math floor Math random 256 toString var rgb rgb red green blue return rgb var createGrid function width height var numberOfRectsPerRow Math floor width cellSize 1 numberOfRectsPerColumn Math floor height cellSize 1 rangeHorizontal _ range numberOfRectsPerRow rangeVertical _ range numberOfRectsPerColumn _ each rangeVertical function i _ each rangeHorizontal function j var randomColor createRandomRGB svg append rect attr class cell attr width cellSize attr height cellSize attr x cellSize j 1 j attr y cellSize i 1 i style fill randomColor var changeColorOfACell function var cellToBeChanged pickRandomCell var randomColor createRandomRGB d3 select cellToBeChanged transition duration 800 on start lock on end unlock style fill randomColor var getPlusOrMinus function var sign Math random 0 5 1 1 return sign var moveCell function direction var cellToBeMoved pickRandomCell var currentX cellToBeMoved x baseVal value var currentY cellToBeMoved y baseVal value var change getPlusOrMinus cellSize 1 var newX currentX change var newY currentY change var selectedCell d3 select cellToBeMoved if direction x selectedCell transition duration 1500 on start function lock call this lockedX on end function unlock call this lockedX attr x newX else selectedCell transition duration 1500 on start function lock call this lockedX on end function unlock call this lockedX attr y newY var pickRandomCell function var cells d3 selectAll cell each function d i cells push this var numOfCells cells length var randomNumber Math floor Math random numOfCells var randomCell cells randomNumber return randomCell So when you select the next random class if it s transitioning you can t select it i e locked function lock _ lockClass d3 select this classed cell false function unlock _ lockClass d3 select this classed cell true createGrid gridWidth gridHeight window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval function moveCell x 50 window setInterval function moveCell x 50 window setInterval function moveCell y 50 window setInterval function moveCell y 50 console log ready script
fill randomColor var getPlusOrMinus function var sign Math random 0 5 1 1 return sign var moveCell function direction var cellToBeMoved pickRandomCell var currentX cellToBeMoved x baseVal value var currentY cellToBeMoved y baseVal value var change getPlusOrMinus cellSize 1 var newX currentX change var newY currentY change var selectedCell d3 select cellToBeMoved if direction x selectedCell transition duration 1500 on start function lock call this lockedX on end function unlock call this lockedX attr x newX else selectedCell transition duration 1500 on start function lock call this lockedX on end function unlock call this lockedX attr y newY var pickRandomCell function var cells d3 selectAll cell each function d i cells push this var numOfCells cells length var randomNumber Math floor Math random numOfCells var randomCell cells randomNumber return randomCell So when you select the next random class if it s transitioning you can t select it i e locked function lock _ lockClass d3 select this classed cell false function unlock _ lockClass d3 select this classed cell true createGrid gridWidth gridHeight window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval changeColorOfACell 1 window setInterval function moveCell x 50 window setInterval function moveCell x 50 window setInterval function moveCell y 50 window setInterval function moveCell y 50 console log ready script