(function() {
  var D, H, P, T, a, a_bbox, ab, b, b_bbox, base_hue, color_a, color_ab, color_b, color_ba, height, label_a, label_b, randint, svg, width, x;

  randint = function(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  };

  a = randint(1000, 3000);

  b = randint(2000, 4000);

  ab = randint(3000, 5000);

  svg = d3.select('svg');

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

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

  svg.attr({
    viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  x = d3.scale.linear().domain([0, a + b + ab]).range([-width / 2 + 40, width / 2 - 40]);

  H = 40;

  P = 30;

  D = 6;

  T = 10;

  base_hue = 45;

  color_a = d3.hcl(base_hue, 50, 50);

  color_ab = d3.hcl(base_hue + 30, 55, 70);

  color_b = d3.hcl(base_hue + 180, 50, 50);

  color_ba = d3.hcl(base_hue + 180 - 30, 55, 70);

  svg.append('rect').attr({
    "class": 'bar',
    x: x(0),
    y: -H - P / 2,
    width: x(a) - x(0),
    height: H,
    fill: color_a
  });

  svg.append('rect').attr({
    "class": 'bar',
    x: x(a),
    y: -H - P / 2,
    width: x(a + ab) - x(a),
    height: H,
    fill: color_ab
  });

  svg.append('rect').attr({
    "class": 'bar',
    x: x(a),
    y: +P / 2,
    width: x(a + ab) - x(a),
    height: H,
    fill: color_ba
  });

  svg.append('rect').attr({
    "class": 'bar',
    x: x(a + ab),
    y: +P / 2,
    width: x(a + ab + b) - x(a + ab),
    height: H,
    fill: color_b
  });

  svg.append('text').text(d3.format(',')(a)).attr({
    "class": 'label',
    x: x(a / 2),
    dy: '0.35em'
  });

  svg.append('text').text(d3.format(',')(ab) + ' matches').attr({
    "class": 'label',
    x: x(a + ab / 2),
    dy: '0.35em'
  });

  svg.append('text').text(d3.format(',')(b)).attr({
    "class": 'label',
    x: x(a + ab + b / 2),
    dy: '0.35em'
  });

  svg.append('path').attr({
    "class": 'axis',
    d: "M" + (x(0)) + " " + (-H - P / 2 - D) + " l0 " + (-T) + " l" + (x(a + ab) - x(0)) + " 0 l0 " + T
  });

  svg.append('path').attr({
    "class": 'axis',
    d: "M" + (x(a)) + " " + (+H + P / 2 + D) + " l0 " + (+T) + " l" + (x(a + ab + b) - x(a)) + " 0 l0 " + (-T)
  });

  label_a = svg.append('text').text(d3.format(',')(a + ab) + ' (dataset A)').attr({
    "class": 'label',
    x: x((a + ab) / 2),
    y: -H - P / 2 - D - T,
    dy: '0.35em'
  });

  a_bbox = label_a.node().getBBox();

  svg.insert('rect', '.label:last-child').attr({
    "class": 'halo',
    x: a_bbox.x,
    y: a_bbox.y,
    width: a_bbox.width,
    height: a_bbox.height
  });

  label_b = svg.append('text').text(d3.format(',')(b + ab) + ' (dataset B)').attr({
    "class": 'label',
    x: x(a + (b + ab) / 2),
    y: +H + P / 2 + D + T,
    dy: '0.35em'
  });

  b_bbox = label_b.node().getBBox();

  svg.insert('rect', '.label:last-child').attr({
    "class": 'halo',
    x: b_bbox.x,
    y: b_bbox.y,
    width: b_bbox.width,
    height: b_bbox.height
  });

}).call(this);