D3 Examples - All of the Lights D3 Edition

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>   
</head>
<body>
    <center>
        <svg id='svg'></svg>
    </center>
    
</body>
<style>
    #svg{
        width: 1250px;
        height: 1200px;
    }
​
</style>
<script>
function colorMe(){
    return 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')'
    setTimeout(colorMe, 200)
}
function createD(){
    d3.selectAll('circle').remove()
    for(var i = 1; i <= 37; i++){
        if(i != 37){
            if(i <= 17){
            d3.select('#svg').append('circle').attr('r','30').attr('cx',500).attr('cy',(10* i * 2 + 200).toString()
                ).attr('stroke','black').attr('class', 'out').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
​
            d3.select('#svg').append('circle').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + (i * (Math.PI/37))) * 400).attr('cy',(10*i * 2+ 200).toString()
                ).attr('stroke','black').attr('class','in').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
            }
            else{
            d3.select('#svg').append('circle').attr('r','30').attr('cx',500).attr('cy',(10* i * 2+ 200).toString()
                ).attr('stroke','black').attr('class', 'out').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
​
            d3.select('#svg').append('circle').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + (i * (Math.PI/37))) * 400).attr('cy',(10*i * 2+ 200).toString()
                ).attr('stroke','black').attr('class','in').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
​
            }
        }
    }
    }
​
​
​
function createTrans(){
            createD()
            d3.selectAll('circle').transition().duration(1000).each(function (d,i){
            // rgb(Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255))
            console.log(d3.select(this).attr('class'), i)
            new_i = (i+1)/2
            if (d3.select(this).attr('class') == 'in'){
                if( new_i <= 17){
​
​
                d3.select(this).transition().delay(1000).duration(1000).attr('fill','red').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + (new_i * (Math.PI/17))) * 200).attr('cy',(10* new_i * 2+ 200).toString()
                ).attr('stroke','black').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
                }
                else{
​
                d3.select(this).transition().delay(1000).duration(1000).attr('fill','red').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + ( (new_i-17) * (Math.PI/17))) * 200).attr('cy',(320 + 10*(new_i -17 )* 2+ 200).toString()
                ).attr('stroke','black').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
​
​
​
                }
            }
            else{
                d3.select(this).transition().delay(1000).on('start', function(){d3.select(this).remove()})
            }
        })
            
    setTimeout(createTrans, 2500)
​
​
}
function changeBack(){
    d3.select('body').style('background-color', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
    setTimeout(changeBack, 200)
}
​
setTimeout(function(){
    setTimeout(createTrans, 1000)
},500)
​
setTimeout(changeBack, 200)
​
​
​
​
​
</script>
</html>
    