change2.html

---
layout: default
---

<style>

text {
  font: bold 48px monospace;
}

.enter {
  fill: green;
}

/*.update {
  fill: #333;
}*/

</style>

<div id="master_container">	
  <div id='root'></div>

	<div id="circles">
	</div>
</div>

<script>
var root = d3.select('#root')

var dataset = [];
var dataset2 = [];
var numPoints = 100;

var i, p;
var q = 0;
var f = 0;

for (i = 0; i < numPoints; i += 1) {
	p = i / (numPoints - 1) * 100;
	dataset.push({ percent: p, percent2: p});
  dataset2.push({ percent: p, percent2: p});
}

// Function to add to the array.
function updatethedata(element, index, array){ 
  // if (element.percent > 200) {element.percent = element.percent - 100;} else{element.percent = element.percent + 100;};
  element.percent = element.percent + 50;
}
// var data2 = dataset.forEach(updatethedata);

function isOdd(num) { return num % 2;}
function isfive(num) { return num % 5;}


var svg = d3.select("#circles")
	.append("svg")
	.attr("width", "100%")
	.attr("height", "700px");

svg.on('mousemove',function() {
  // var circles2 = svg.selectAll("circle")
  //   .data(dataset2)

  var circles = svg.selectAll(".circle1")
    .data(dataset)

  var coordinates = [0, 0];
  coordinates = d3.mouse(this);
  var x = coordinates[0];
  var y = coordinates[1];
  // console.log(x + ', ' + y)  

  circles.transition().duration(400)
    .delay(function(d, i) {
      return i * 10;
    })
    .attr("cy", function(d, i, f) {      
      if (isfive(f) == 4) {
        if (isOdd(i) == 1) {
          return y  + Math.floor((Math.random() * 50) + 100) + "px";
        } else{
          return y  - Math.floor((Math.random() * 50) + 100) + "px";      
        };      
      } else{
        if (isOdd(i) == 1) {
          return y  + Math.floor((Math.random() * 50) + 5) + "px";
        } else{
          return y  - Math.floor((Math.random() * 50) + 5) + "px";      
        };      
      };          
    });    


})

function update(data, f) {
console.log(f)

// if (isfive(f) == 4) {console.log('f')} else{};

	// DATA JOIN
  // Join new data with old elements, if any.
	var circles = svg.selectAll(".circle1")
		.data(data)

  // ENTER
  // Create new elements as needed, this doesn't fire if not creating anyhting new.
  circles.enter().append("circle")
  .attr("class","circle1")
  .attr("cx", function(d, i) {
      // console.log(d)
      return d.percent +  "%";
    });

  circles.transition()
    // .attr("class", "enter")
    .attr("r", function(d, i) {
      var amount = ((Math.sin(d.percent / 10) + 1) * 5) //+ Math.floor((Math.random() * 1.1) + 1);
      return amount + "%";
    })  
    .attr("fill", function(d, i) { return "hsl(" + (d.percent * 360) + ",100%,50%)"})
    .attr("cy", function(d, i, f) {
      console.log(f)
      if (isfive(f) === 4) {  
        console.log(isfive(f))
        if (isOdd(i) == 1) {
          console.log('h')
          return 50 + Math.floor((Math.random() * 5) + 100) + "%"
        } else{
          return 50 - Math.floor((Math.random() * 5) + 100) + "%"
        };
      } else {
        if (isOdd(i) == 1) {
          return 50 + Math.floor((Math.random() * 5) + 1) + "%"
        } else{
          return 50 - Math.floor((Math.random() * 5) + 1) + "%"
        };
      }        
    })
  .delay(function(d, i) {
    // if (i == ) {} else{};
      return i * 10;
    })  


  // EXIT
  // Remove old elements as needed.
  circles.exit().remove();

}

// First run.
update(dataset)



// Grab a random sample of letters from the alphabet, in alphabetical order.
setInterval(function() {
  f += 1;

  dataset.forEach(updatethedata)
  update(dataset, f)
  // update(d3.shuffle(dataset)
      // .slice(0, Math.floor(Math.random() * 10)));
      // .sort());
}, 1000);
// var data2 = dataset.forEach()



</script>