                 #.style 'color' color
                 .call arcTween, arc, 2*Math.PI*percent
             arcValue.style('fill', color)  
-
-
-            # if (colorIsRed)
-            #     arcValue.transition()
-            #         .style 'fill', 'red'   
-            # else
-            #     arcValue.transition()
-            #         .style 'fill', 'chartreuse'
 
         arcTween = (transition, arc, newAngle) ->
             console.log("arcTween. newAngle: #{newAngle}")

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

        # Append 
        drawArc = (arc, colorIsRed) ->
            color = defaultArcColor
            if colorIsRed
                color = 'red'

            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, false)

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

            @actualArc = createArc(attrs.actual, outerRadius, outerThickness)
            colorIsRed = arcColorIsRed(attrs.actual, attrs.expected)
            @actualArcValue = drawArc(@actualArc, colorIsRed)
            @text = drawText(attrs.actual)

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

                # .attr("cx", 250)
                # .attr("cy", 250)
                .attr("r", radius)
                .style("fill", defaultCircleColor)

        # Draw the percentage text on top of the circle
        drawText = (percent) ->
            console.log("drawText: #{percent}")

            # 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) ->
