TheMcMurder/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is something I created just for fun using d3js. It serves no actual purpose.

  
## index.html
<!DOCTYPE html>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>


  var width = $(window).width();
  var height = $(window).height();

  var radius = 45
  var num_of_colors = 20

  var in_each_row = (Math.floor(width/(radius*2)))
  var num_of_rows = (Math.floor(height/(radius*2)))


  var num_of_circles = in_each_row * num_of_rows

  // console.log( "there are " + in_each_row + " in each row")

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)

  var color = d3.scale.category20();

  var dataset = []

  for (var i =0; i < num_of_circles; i++){
   dataset.push(15)
}

var all_circles = svg.selectAll("circle")
.data(dataset)


all_circles.enter()
.append("circle")
.attr("cx", function(d, i){
   return (i%in_each_row+.5)*(radius *2)
})
.attr("cy", function(d, i){

    return (Math.floor(i/in_each_row) + .5)*(radius *2)
})
.attr("id", function(d, i){
    return "circle_" + i;
})
.attr("r", radius)
.attr("opacity", ".5")
.attr("fill", function(d, i){
  return color(i%num_of_colors)
})

var interval = setInterval(selectRandom, 500)


function selectRandom(){
    var random_number = Math.floor(Math.random()*num_of_circles);
    var options = Math.round(Math.random()*3)
    var selection = svg.select("#circle_" + random_number)
    var selection_2
    var selection_temp;
    var movements = false;
    // selection.transition().duration(100).attr("fill", "white")
    // .transition().duration(1400).attr("fill", "black")
    if (random_number%in_each_row == 0){
        //left edge
        if (options == 0 && random_number > in_each_row){//top
            selection_2 = svg.select("#circle_" + (random_number - in_each_row))
            // .transition().duration(500).delay(1500).attr("fill", "white")
            movements = true;
        }else if (options == 1){//right
            selection_2 = svg.select("#circle_" + (random_number + 1))
            movements = true;
        }else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
            selection_2 = svg.select("#circle_" + (random_number + in_each_row))
            movements = true;
        }


    }else if((random_number +1)%(in_each_row) == 0){
        //right edge
          if (options == 0 && random_number > in_each_row){//top
            selection_2 = svg.select("#circle_" + (random_number - in_each_row))
            // .transition().duration(500).delay(1500).attr("fill", "white")
            movements = true;
        }else if (options == 1){//left
            selection_2 = svg.select("#circle_" + (random_number - 1))
            movements = true;
        }else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
            selection_2 = svg.select("#circle_" + (random_number + in_each_row))
            movements = true;
        }
    }else{
        //middle
        options = Math.round(Math.random()*4)
           if (options == 0 && random_number > in_each_row){//top
            selection_2 = svg.select("#circle_" + (random_number - in_each_row))
            // .transition().duration(500).delay(1500).attr("fill", "white")
            movements = true;
        }else if (options == 1){//left
            selection_2 = svg.select("#circle_" + (random_number - 1))
            movements = true;
        }else if (options == 2){//right
            selection_2 = svg.select("#circle_" + (random_number + 1))
            movements = true;
        }else if (options == 3 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
            selection_2 = svg.select("#circle_" + (random_number + in_each_row))
            movements = true;
        }
    }


    if(movements){
        //movements
        if (selection != null && selection_2 != null){
            var TRANS = svg.transition().duration(250)
            selection_temp = selection;
            TRANS.select("#" + selection.attr("id"))
            .attr("cx", selection_2.attr("cx"))
            .attr("cy", selection_2.attr("cy"))
            .attr("id", selection_2.attr("id"))

            TRANS.select("#" + selection_2.attr("id"))
            .attr("cx", selection_temp.attr("cx"))
            .attr("cy", selection_temp.attr("cy"))
            .attr("id", selection_temp.attr("id"))
        }

    }


}


</script>
</body>
	<!DOCTYPE html>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>


	var width = $(window).width();
	var height = $(window).height();

	var radius = 45
	var num_of_colors = 20

	var in_each_row = (Math.floor(width/(radius*2)))
	var num_of_rows = (Math.floor(height/(radius*2)))


	var num_of_circles = in_each_row * num_of_rows

	// console.log( "there are " + in_each_row + " in each row")

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	var color = d3.scale.category20();

	var dataset = []

	for (var i =0; i < num_of_circles; i++){
	dataset.push(15)
	}

	var all_circles = svg.selectAll("circle")
	.data(dataset)


	all_circles.enter()
	.append("circle")
	.attr("cx", function(d, i){
	return (i%in_each_row+.5)(radius 2)
	})
	.attr("cy", function(d, i){

	return (Math.floor(i/in_each_row) + .5)(radius 2)
	})
	.attr("id", function(d, i){
	return "circle_" + i;
	})
	.attr("r", radius)
	.attr("opacity", ".5")
	.attr("fill", function(d, i){
	return color(i%num_of_colors)
	})

	var interval = setInterval(selectRandom, 500)


	function selectRandom(){
	var random_number = Math.floor(Math.random()*num_of_circles);
	var options = Math.round(Math.random()*3)
	var selection = svg.select("#circle_" + random_number)
	var selection_2
	var selection_temp;
	var movements = false;
	// selection.transition().duration(100).attr("fill", "white")
	// .transition().duration(1400).attr("fill", "black")
	if (random_number%in_each_row == 0){
	//left edge
	if (options == 0 && random_number > in_each_row){//top
	selection_2 = svg.select("#circle_" + (random_number - in_each_row))
	// .transition().duration(500).delay(1500).attr("fill", "white")
	movements = true;
	}else if (options == 1){//right
	selection_2 = svg.select("#circle_" + (random_number + 1))
	movements = true;
	}else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
	selection_2 = svg.select("#circle_" + (random_number + in_each_row))
	movements = true;
	}






	}else if((random_number +1)%(in_each_row) == 0){
	//right edge
	if (options == 0 && random_number > in_each_row){//top
	selection_2 = svg.select("#circle_" + (random_number - in_each_row))
	// .transition().duration(500).delay(1500).attr("fill", "white")
	movements = true;
	}else if (options == 1){//left
	selection_2 = svg.select("#circle_" + (random_number - 1))
	movements = true;
	}else if (options == 2 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
	selection_2 = svg.select("#circle_" + (random_number + in_each_row))
	movements = true;
	}
	}else{
	//middle
	options = Math.round(Math.random()*4)
	if (options == 0 && random_number > in_each_row){//top
	selection_2 = svg.select("#circle_" + (random_number - in_each_row))
	// .transition().duration(500).delay(1500).attr("fill", "white")
	movements = true;
	}else if (options == 1){//left
	selection_2 = svg.select("#circle_" + (random_number - 1))
	movements = true;
	}else if (options == 2){//right
	selection_2 = svg.select("#circle_" + (random_number + 1))
	movements = true;
	}else if (options == 3 && (Math.ceil(random_number/in_each_row) < num_of_rows)){//bottom
	selection_2 = svg.select("#circle_" + (random_number + in_each_row))
	movements = true;
	}
	}






	if(movements){
	//movements
	if (selection != null && selection_2 != null){
	var TRANS = svg.transition().duration(250)
	selection_temp = selection;
	TRANS.select("#" + selection.attr("id"))
	.attr("cx", selection_2.attr("cx"))
	.attr("cy", selection_2.attr("cy"))
	.attr("id", selection_2.attr("id"))

	TRANS.select("#" + selection_2.attr("id"))
	.attr("cx", selection_temp.attr("cx"))
	.attr("cy", selection_temp.attr("cy"))
	.attr("id", selection_temp.attr("id"))
	}

	}


	}


	</script>
	</body>