d3.jsテスト

ソースコード

<p>
<svg width="500" height="500">
    <rect width="100%" height="100%" fill="red" />
</svg>
</p>
<input type="button" value="start" onclick="draw()">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  var dataset = d3.range(200).map(function(d) {
    return rand(120);
  });

  var w = 500;
  var h = 500;

function draw(){
  d3.select("svg").remove();
  var svg = d3.select("body").append("svg").attr({width: w, heigth: h});

  svg.selectAll("circle")
     .data(dataset)
     .enter()
     .append("circle")
     .attr({
     cx: function(d){return rand(w);},
     cy: function(d){return rand(h);},
     r: 0,
     fill: function(d) {
           return "rgb("+ rand(256)+","+rand(256)+","+rand(256)+ ")";
     }})
  .transition()
  .delay(function(d, i){
    return i * 25;
  })
  .duration(25)
  //.ease("bounce")
  .attr({
    r: function(d) {return d;}
  })
}

function rand(n){
  return Math.floor(Math.random() * n);
}
</script>

Google Data Explorerでは物足りなくなってきたので、d3.jsを調査中。
なんかおもしろいデータ落ちてないかな