var OPTIONS = {
  margin: {top: 0, right: 0, bottom: 0, left: 0}
};

var EVENTS = [];

var DotInABox = d3Kit.factory.createChart(OPTIONS, EVENTS, function(skeleton) {

  skeleton
    .autoResize('both')
    .autoResizeToAspectRatio(3/2);

  var rect = skeleton.getRootG()
    .append('rect')
    .style('fill', '#fff');

  var circle = skeleton.getRootG()
    .append('circle')
    .attr('fill', 'red');

  skeleton.on('resize', function() {
    var width = skeleton.getInnerWidth();
    var height = skeleton.getInnerHeight();

    rect
      .transition()
      .duration(1000)
      .attr('width', width)
      .attr('height', height);

    circle
      .transition()
      .duration(1000)
      .attr('cx', width / 2)
      .attr('cy', height / 2)
      .attr('r', 3/5/2 * skeleton.height());
  });

});

var chart = new DotInABox('#chart');