       .innerRadius(innerRadius)
       .outerRadius((d) -> radiusScale(d.data?.value||0))
       .cornerRadius(5)
+
+    outerArc = d3.svg.arc()
+      .innerRadius(radius-3*@padding)
+      .outerRadius(radius)
+      .cornerRadius(5)
+    outerpath = svg.select('g').select(".outer")
+      .selectAll("path")
+      .data(pie(data))
+    outerpath.enter()
+      .append('path')
+    outerpath.exit()
+      .remove()
+
+    outerpath
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide)
+      .attr("d", outerArc)
     pathingData = svg.select('g').select(".inner")
       .selectAll("path")
       .data(pie(data))
     pathingData.enter()
       .append('path')
-    console.log pie(@data)
+    pathingData.exit()
+      .remove()
     pathingData
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide)
       .attr("d", arc)
       .attr("fill-opacity", (d) -> opacityScale(d.data.value))
       .on("click", (d) =>

    width = height = @get('size') - 2 * @get('padding')
    tip = d3.tip()
      .attr('class', 'd3-tip')
      .html((d) -> d.data.name)
    svg.call(tip)
    outerRadius = d3.min([width, height])/2
    radius = outerRadius *.80

      .value((d) -> d.weight)
    radiusScale = d3.scale.linear()
      .domain([0,6])
      .range([innerRadius + 3*@padding, radius - 3*@padding])
      .clamp(true)
    opacityScale = d3.scale.linear()
      .domain([0,6])
