bubble_remove.diff

diff --git a/coffee/vis.coffee b/coffee/vis.coffee
index e55dd2d..d125fe0 100644
--- a/coffee/vis.coffee
+++ b/coffee/vis.coffee
@@ -7,7 +7,9 @@ Bubbles = () ->
   width = 980
   height = 510
   data = []
+  nodeG = null
   node = null
+  labelG = null
   label = null
   margin = {top: 5, right: 0, bottom: 0, left: 0}
   # largest size for our bubbles
@@ -114,11 +116,11 @@ Bubbles = () ->
       svg.attr("height", height + margin.top + margin.bottom )
       
       # node will be used to group the bubbles
-      node = svgEnter.append("g").attr("id", "bubble-nodes")
+      nodeG = svgEnter.append("g").attr("id", "bubble-nodes")
         .attr("transform", "translate(#{margin.left},#{margin.top})")
 
       # clickable background rect to clear the current selection
-      node.append("rect")
+      nodeG.append("rect")
         .attr("id", "bubble-background")
         .attr("width", width)
         .attr("height", height)
@@ -128,7 +130,7 @@ Bubbles = () ->
       # the bubbles
       # - remember that we are keeping the labels in plain html and 
       #  the bubbles in svg
-      label = d3.select(this).selectAll("#bubble-labels").data([data])
+      labelG = d3.select(this).selectAll("#bubble-labels").data([data])
         .enter()
         .append("div")
         .attr("id", "bubble-labels")
@@ -156,7 +158,7 @@ Bubbles = () ->
       d.forceR = Math.max(minCollisionRadius, rScale(rValue(d)))
 
     # start up the force layout
-    force.nodes(data).start()
+    force.nodes(data, (d) -> idValue(d)).start()
 
     # call our update methods to do the creation and layout work
     updateNodes()
@@ -170,7 +172,7 @@ Bubbles = () ->
     # data to the (currently) empty 'bubble-node selection'.
     # if you want to use your own data, you just need to modify what
     # idValue returns
-    node = node.selectAll(".bubble-node").data(data, (d) -> idValue(d))
+    node = nodeG.selectAll(".bubble-node").data(data, (d) -> idValue(d))
 
     # we don't actually remove any nodes from our data in this example 
     # but if we did, this line of code would remove them from the
@@ -195,7 +197,7 @@ Bubbles = () ->
   updateLabels = () ->
     # as in updateNodes, we use idValue to define what the unique id for each data 
     # point is
-    label = label.selectAll(".bubble-label").data(data, (d) -> idValue(d))
+    label = labelG.selectAll(".bubble-label").data(data, (d) -> idValue(d))
 
     label.exit().remove()
 
@@ -306,7 +308,7 @@ Bubbles = () ->
   # adds mouse events to element
   # ---
   connectEvents = (d) ->
-    d.on("click", click)
+    d.on("click", removeBubble)
     d.on("mouseover", mouseover)
     d.on("mouseout", mouseout)
 
@@ -316,6 +318,16 @@ Bubbles = () ->
   clear = () ->
     location.replace("#")
 
+  removeBubble = (d) ->
+    currentId = idValue(d)
+    console.log(currentId)
+    console.log(data.length)
+    data = data.filter (e) -> idValue(e) != currentId
+    console.log(data.length)
+    update()
+    d3.event.preventDefault()
+
+
   # ---
   # changes clicked bubble by modifying url
   # ---