 
         transitionBothArcs = ->
             console.log("transitionBothArcs")
-
+            sanitizeInputs()
             transitionActualArc()
             transitionExpectedArc()
 
         transitionExpectedArc = ->
             console.log("transitionExpectedArc")
-
-            transitionArc(@expectedArc, @expectedArcValue, attrs.expected, defaultDuration, 0)
+            color = getActualArcColor(attrs.actual, attrs.expected)
+            if (color != defaultActualArcColor)
+                transitionArc(@actualArc, @actualArcValue, attrs.actual, defaultDuration, color)
+            transitionArc(@expectedArc, @expectedArcValue, attrs.expected, defaultDuration, defaultExpectedArcColor)
 
         transitionActualArc = ->
             console.log("transitionActualArc")
-            colorIsRed = arcColorIsRed(attrs.actual, attrs.expected)
-            transitionArc(@actualArc, @actualArcValue, attrs.actual, defaultDuration, colorIsRed)
-            transitionText(attrs.actual)      
+            color = getActualArcColor(attrs.actual, attrs.expected)
+            transitionArc(@actualArc, @actualArcValue, attrs.actual, defaultDuration, color)
+            @textPercent.transition()
+                .text attrs.actual*100+"%"      
 
-        transitionArc = (arc, arcValue, percent, duration, colorIsRed) ->
-            console.log("transitionArc")
-            color = defaultArcColor
-            if (colorIsRed)
-                color = 'red'
+        transitionArc = (arc, arcValue, percent, duration, color) ->
+            console.log("transitionArc. percent: #{percent}")
 
             arcValue.transition()
                 .delay defaultDelay

svgHeight = 500
svgWidth = 500
innerRadius = 75
outerRadius = 100
circleRadius = 50
innerPercent = .15
outerPercent = .50
innerThickness = 10
outerThickness = 20
defaultArcColor = 'chartreuse'
defaultDuration = 750
defaultDelay = 500

actualArc = {}
expectedArc = {}

            arc = d3.svg.arc()
                .innerRadius radius - thickness
                .outerRadius radius
                .cornerRadius cornerRadius
                .startAngle 0
                #.endAngle 2*Math.PI*percent

        drawArc = (arc, color) ->
            console.log("drawArc")

            arcValue = svg.append 'path'
                .datum
                    endAngle: 0
                .style 'fill', color
                .attr 'd', arc

        drawExpectedArc = ->
            console.log("drawExpectedArc")

            @expectedArc = createArc(attrs.expected, innerRadius, innerThickness)
            @expectedArcValue = drawArc(@expectedArc, defaultExpectedArcColor, false)

        drawActualArc = ->
            console.log("drawActualArc")

            @actualArc = createArc(attrs.actual, outerRadius, outerThickness)
            color = getActualArcColor(attrs.actual, attrs.expected)
            @actualArcValue = drawArc(@actualArc, color)
            @textPercent = drawText(attrs.actual)

        drawBothArcs = ->
            console.log("drawBothArcs")
