// Generate random data
var bubbles = [];

for(var i=0;i<100;i++){
  bubbles.push({
    x: Math.random()*100,
    y: Math.random()*100,
    r: Math.random()*5+3
  });
}

// Create visualization
var skeleton = new d3Kit.Skeleton('#chart',
  {
    margin: {top: 60, right: 60, bottom: 60, left: 60},
    initialWidth: 800,
    initialHeight: 460
  },
  ['bubbleClick']
);

var layers = skeleton.getLayerOrganizer();
var dispatch = skeleton.getDispatcher();
var color = d3.scaleOrdinal(d3.schemeCategory10);

layers.create(['content', 'x-axis', 'y-axis']);

var x = d3.scaleLinear()
  .range([0, skeleton.getInnerWidth()]);

var y = d3.scaleLinear()
  .range([0, skeleton.getInnerHeight()]);

var xAxis = d3.axisBottom()
  .scale(x);

var yAxis = d3.axisLeft()
  .scale(y);

var visualize = d3Kit.helper.debounce(function(){
  if(!skeleton.hasData()){
    d3Kit.helper.removeAllChildren(layers.get('content'));
    return;
  }
  var data = skeleton.data();

  x.domain(d3.extent(data, function(d){return d.x;}))
    .range([0, skeleton.getInnerWidth()]);
  y.domain(d3.extent(data, function(d){return d.y;}))
    .range([skeleton.getInnerHeight(), 0]);

  layers.get('x-axis')
    .attr('transform', 'translate(0,' + skeleton.getInnerHeight() + ')')
    .call(xAxis);

  layers.get('y-axis')
    .call(yAxis);

  var selection = layers.get('content').selectAll('circle')
    .data(data);

  selection.exit().remove();

  selection.enter().append('circle')
    .attr('cx', function(d){return x(d.x);})
    .attr('cy', function(d){return y(d.y);})
    .on('click', dispatch.bubbleClick);

  selection
    .attr('cx', function(d){return x(d.x);})
    .attr('cy', function(d){return y(d.y);})
    .attr('r', function(d){return d.r;})
    .style('fill', function(d, i){return color(i);});

}, 10);

skeleton
  // Add this line to avoid resize flickering (https://github.com/twitter/d3kit/issues/11)
  .resizeToFitContainer('width')
  // Enable auto resize
  .autoResize('width')
  // Add handlers
  .on('resize', visualize)
  .on('data', visualize);

skeleton
  // handle bubbleClick event
  .on('bubbleClick', function(d){ alert(JSON.stringify(d)); })
  // set data
  .data(bubbles);