// Generated by CoffeeScript 1.10.0
(function() {
  var height, svg, width, zoom, zoomable_layer;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  zoomable_layer = svg.append('g');

  zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
    return zoomable_layer.attrs({
      transform: d3.event.transform
    });
  });

  svg.call(zoom);

  zoomable_layer.append('circle').attrs({
    r: 100,
    cx: width / 2,
    cy: height / 2,
    fill: 'teal'
  });

  zoomable_layer.append('text').text('4').attrs({
    x: width / 2,
    y: height / 2
  });

  zoomable_layer.append('circle').attrs({
    r: 60,
    cx: 2 * width / 5,
    cy: height / 3,
    fill: 'orange'
  }).on('click', function() {
    return d3.select(this).attrs({
      fill: 'red'
    });
  });

}).call(this);