gistfile1.js

function drawBubble (selector, dispatch, dimension, group) {
  var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = parseInt(d3.select(selector).style("width"))  - margin.left - margin.right,
    height = parseInt(d3.select(selector).style("height"))  - margin.top - margin.bottom;

  var onClick;

  var color = d3.scale.category20();

  var bubble = d3.layout.pack()
    .sort(null)
    .size([width, height])
    .padding(1.5);

  var t = d3.transition()
      .duration(750);

  var svg = d3.select(selector),
        g = svg.select('g');

  if (!svg.empty()) {
    svg.select('svg').remove()
  }

  g = svg.append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .attr('class', 'bubble')
    .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  var reset = g.append('text')
    .attr('class', 'reset')
    .style('display', 'none')
    .attr('y', 10)
    .attr('x', 20)
    .text('reset')
    .on('click', click)

  function click(d) {

    dimension.filter(d ? d.key : null);
    dispatch.redraw();

    svg.selectAll('circle').classed('active', false)
    if(!d) {
      return reset.style('display', 'none');
    }


    svg.select('.' + btoa(unescape(encodeURIComponent(d.key))).replace(/=/g, '')).classed('active', true)
    reset.style('display', 'block')
  }

  var node = g.selectAll('.node')
    .data(bubble.nodes({ children: group.all() }).filter(function(d) { return !d.children; }))

  node.enter().append('g')
    .attr('class', 'node')
    .attr('transform', function(d) {return 'translate(' + d.x + ',' + d.y + ')'; });

  node.append('title')
    .text(function(d) { return d.key; });

  node.append('circle')
    .attr('class', function (d) { return btoa(unescape(encodeURIComponent(d.key))).replace(/=/g, '')})
    .attr('r', function(d) { return d.r; })
    .style('fill', function(d) { return color(d.key); })

  node.append('text')
    .attr('dy', '.3em')
    .attr('class', 'label')
    .style('text-anchor', 'middle')

  dispatch.on('redraw.' + selector, function () {
    var reset = g.selectAll('.reset')

    node = g.selectAll('.node')
      .data(bubble.nodes({ children: group.all() }).filter(function(d) { return !d.children; }))

    node
      .attr('class', 'node')
      .transition(t)
      .attr('transform', function(d) {return 'translate(' + d.x + ',' + d.y + ')'; });

    node.select('circle')
      .on('click', click)
      .transition(t)
      .attr('r', function(d) { return d.r; })
      .style('fill', function(d) { return color(d.key); })

    node.select('text')
      .attr('dy', '.3em')
      .style('text-anchor', 'middle')
      .text(function(d) { return d.key.substring(0, d.r / 3); })
      .on('click', click)

  })
}