         .append("g")
           .attr("class", "bubble")
           .attr("transform", (d) -> "translate(#{d.x},#{d.y})")
-          .on 'click', (d) ->
+          .on 'click', (d, i) ->
 
             if selectedNode == this
               selectedNode = null
+              $("#tseriesNode#{i}").remove()
               d3.select(this).selectAll("circle").classed("selected", false)
             else 
               if selectedNode != null

              showFlowsOf this


          .on 'mouseover', (d) ->
            if selectedNode == null
              showFlowsOf this

            $(this).tipsy("show")

            data = state.magnAttrs().map (attr, i) => 
                date: dateFromMagnAttr(attr)
                inbound: d.data.totals[state.selMagnAttrGrp]?.inbound?[i] ? 0
                outbound: d.data.totals[state.selMagnAttrGrp]?.outbound?[i] ? 0

            createTimeSeries(d3.select("#tseries"), data)

            $(tipsy.$tip)  # fix vertical position
                .css('top', d3.event.pageY-($(tipsy.$tip).outerHeight()/2))



          .on 'mouseout', (d) ->
            if selectedNode == null
              flows.selectAll("line").remove()
  
            $(this).tipsy("hide")


  "<b>#{recipient}</b> received<br>"+
  "<b>#{magnitudeFormat(d.data[state.selMagnAttr()])}</b> "+
  (if donor.length > 20 then "<span class=sm>from <b>#{donor}</b></span>" else "from <b>#{donor}</b>") +
  "  in #{state.selMagnAttr()} <br>"
  #"<div id=tseries></div>"



