                 # .attr("cx", 250)
                 # .attr("cy", 250)
                 .attr("r", radius)
-                .style("fill", "purple")
+                .style("fill", defaultCircleColor)
 
         # Draw the percentage text on top of the circle
         drawText = (percent) ->
             console.log("drawText: #{percent}")
-            # svg.append("text")
-            #     .text(percent)
 
-        transitionText = (text) ->
-            console.log("transitionText")
+            # Progress label
+            svg.append("text")
+                .text "Progress"
+                .attr "font-size", defaultTextFontSize
+                .attr "font-family", "sans-serif"
+                .attr "fill", defaultTextColor
+                .style "text-anchor", "middle"
+                .attr("transform", "translate(0, 15)")
 
+            # Percent value
+            svg.append("text")
+                .text percent*100+"%"
+                .attr "font-size", defaultTextPercentFontSize
+                .attr "font-family", "sans-serif"
+                .attr "fill", defaultTextColor
+                .style "text-anchor", "middle"
+                .attr("transform", "translate(0, -5)") 
 
         # Create and return SVG arc 
         createArc = (percent, radius, thickness) ->


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

            transitionActualArc()
            transitionExpectedArc()

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

            transitionArc(@expectedArc, @expectedArcValue, attrs.expected, defaultDuration, 0)

        transitionActualArc = ->
            console.log("transitionActualArc")
            colorIsRed = arcColorIsRed(attrs.actual, attrs.expected)
            transitionArc(@actualArc, @actualArcValue, attrs.actual, defaultDuration, colorIsRed)
            transitionText(attrs.actual)      

        transitionArc = (arc, arcValue, percent, duration, colorIsRed) ->
            console.log("transitionArc")
            color = defaultArcColor
            if (colorIsRed)
                color = 'red'

            arcValue.transition()
                .delay defaultDelay

                    arc d

        # return color based on values of actual and expected percents
        getActualArcColor = (actualPercent, expectedPercent) ->
            console.log("getActualArcColor: #{actualPercent}, #{expectedPercent}")

            console.log("checking color: actual: #{actualPercent}, #{expectedPercent}")
            if expectedPercent - actualPercent > .5
                console.log("50% delta")
                return default50DeltaColor
            if expectedPercent - actualPercent > .25
                console.log("25% delta")
                return default25DeltaColor

            defaultActualArcColor

        sanitizeInputs = ->
            console.log("sanitizeInputs before: #{attrs.actual}, #{attrs.expected}")
            if (isNaN attrs.actual)
                attrs.actual = 0
            if (isNaN attrs.expected)
                attrs.expected = 0

            if (attrs.actual > 1)
                attrs.actual = 1
            if (attrs.actual < 0)
                attrs.actual = 0

            if (attrs.expected > 1)
                attrs.expected = 1
            if (attrs.expected < 0)
                attrs.expected = 0

            console.log("sanitizeInputs after: #{attrs.actual}, #{attrs.expected}")

        # Create circle, innerArc, & outerArc
        svg = d3.select('svg')
            .append('g')
                .attr("transform", "translate(#{svgWidth/2}, #{svgHeight/2})") 

        console.log("Actual: #{attrs.actual}")
        console.log("Expected: #{attrs.expected}")
        sanitizeInputs()
        drawCircle(innerPercent, circleRadius)
        drawBothArcs()
        scope.$watch 'expected', transitionBothArcs
        scope.$watch 'actual', transitionBothArcs

