Rorschach III by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  margin: 0;
}


#button {
  position: absolute;
  top: 20px;
  left: 333px;
}

</style>
<body>

<div id="button">
 <button>Click Until You See What You Want To See</button>
</div>
<br />

<script src="//d3js.org/d3.v3.min.js"></script>
<script>

function randomData(datalist) {

  for (var i = 0; i < 200; i++) {          
      var newNumber = Math.random() * 40;  
      datalist.push(newNumber);            
  }

}

var dataset = [];                            
randomData(dataset);

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width/2])
    .domain([-1, d3.max(dataset) + 1 ]).nice();

var y = d3.scale.linear()
    .range([height, 0])
    .domain([-5, 205]).nice();

var sizeScale = d3.scale.linear()
    .domain([0.0,30.0])
    .range([1, 15]);

var opacityScale = d3.scale.linear()
    .domain([0.0,30.0])
    .range([0.70, 1]);


var circles = d3.select("body")
               .select("svg")
              .selectAll(".circles");


d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + 450 + "," + margin.top + ")")
  .selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("class","circles")
    .attr("r", function(d, i) { return sizeScale(d); })
    .attr("cx", function(d, i) { return x(d); })
    .attr("cy", function(d, i) { return y(i); })
    .attr("transform", "translate(-400, 0) scale(1, 1)");


d3.select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + 450 + "," + margin.top + ")")
  .selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("class","circles")
    .attr("r", function(d, i) { return sizeScale(d); })
    .attr("cx", function(d, i) { return x(d); })
    .attr("cy", function(d, i) { return y(i); })
    .attr("transform", "translate(400, 0) scale(-1, 1)");


function updateData() {

    // Get the data again   
    var newdata = [];          
    randomData(newdata);

      // Scale the range of the data again 
      x.domain([-1, d3.max(newdata) + 1 ]).nice();

    d3.select("body").selectAll("g")
      .selectAll("circle")
        .data(newdata)
      .transition()
      .duration(1500)
      .attr("r",2)
      .attr("cx", function(d, i) { return x(d); })
      .attr("cy", function(d, i) { return y(d); })
      .transition()
      .duration(1500)
      .attr("r",2)
      .attr("cx", width/2)
      .attr("cy", height/2)
      .transition()
      .duration(1500)
      .attr("r",2)
      .attr("cx", function(d, i) { return y(i); })
      .attr("cy", function(d, i) { return y(i); })
      .transition()
      .delay(4500)
      .duration(3000)
      .attr("class","circles")
      .attr("r", function(d, i) { return sizeScale(d); })
      .attr("cx", function(d, i) { return x(d); })
      .attr("cy", function(d, i) { return y(i); })
      ;

}

 d3.selectAll("button").on("click",updateData)


</script>

</body>
</html>