d3 transitioning from bar to pie and back

Question

LIVE DEMO

So I have this notion that all single axis data should be allowed to be displayed in all the basic ways; and at the very least from a pie to a bar. Ideally this would be an animated transition, but thats were the difficulty comes in.

Getting a pie chart to work is easy enough, as is getting a bar chart. Here is what I have so far:

# fields
width   = 750
height  = width/2
margin  = 20
radius  = (height-(margin*2))/2

# helpers
pie     = d3.layout.pie().value (d) -> d 
arc     = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius/4)
x       = d3.scale.linear().domain([0, 100]).range [0, width]

$http.get('/Classification_Top_10_by_Count.json').success (data) ->

    percents = (parseFloat item.Percent for item in data).sort d3.ascending

    svg      = d3.select('#svgStage').append('svg')         
        .attr('width', width+(margin*2))
        .attr('height', height+(margin*2))

    svg.data([percents])

    g = svg.append('g')
        .attr('transform', "translate(#{radius},#{radius})")

    paths   = g.selectAll 'path'

    paths.data(pie).enter().append('path')
        .attr('d', arc)

    toBars = ->
        g.selectAll('path').transition().duration(2000) 
            .attr 'd', (d, index) ->
                # this is over complex because I was playing with it.
                cord = 
                    tl : [0,          index*20]
                    tr : [d.value*20, index*20]
                    br : [d.value*20, index*20-20]
                    bl : [0,          index*20-20]
                oCord = [
                    cord.tl
                    cord.tr 
                    cord.br 
                    cord.bl
                ]
                "M #{oCord[0][0]}, #{oCord[0][2]}
                A 0, 0 0 0, 0 #{oCord[1][0]}, #{oCord[1][3]}
                L #{oCord[2][0]}, #{oCord[2][4]}
                A 0, 0 0 0, 0 #{oCord[3][0]}, #{oCord[3][5]}
                Z"  

Obviously for this to work its got to be path element to path element, and the transition is working now. Problem is it looks like crap. The moment it starts it looks garbled, until it over and becomes decent bar chart.

I've been looking at this : http://d3-example.herokuapp.com/examples/showreel/showreel.html Which demonstrates a bar transitioning to a donut in much the way I would like. Looking at the source code, this is accomplished through a custom tween. (view source line 518)

Now I'm in over my head. What is going on here? How can I get this transition to work? Has anyone else out there dealt with this problem?

---

UPDATE

Just to be clear, below illustrations the intention of my transition abit more clearly.

---

Bounty clarity. I added a bounty to this question because I need an explanation of what was going wrong. Superboggly did that, so he got the bounty. However Amit Aviv's approach is superior, so I accept his answer as the most correct. I have also +1ed both.

Answer 1

Here is my take: http://jsfiddle.net/amitaviv99/x6RWs/42/

My approach was to approximate both the arcs & bars using cubic bezier curves, with the exact same number of control points. The code is somewhat complicated, and need some work. But the result is quite smooth.

Here is an excerpt (SO requires..)

var bezierArc = function(radiusIn, radiusOut, startAngle, endAngle){
    var arcIn = makeCompArc(radiusIn, startAngle, endAngle);
    var arcIOut = makeCompArc(radiusOut, startAngle, endAngle);
    var lines = makeBezierDoubleLine(radiusIn, radiusOut, startAngle, endAngle);
    var path = [arcIn, lines[0], arcOut, lines[1]].join(' ');

    return path;
}

Answer 2

D3 does a pretty good job of interpolating between paths, but it was having trouble with your original before and after path so instead of taking over the whole tweening process myself I thought maybe we could come up with better paths to make the job easier for D3. My result.

The first thing is to look at the svg arc path element. It basically goes like this:

A rx,ry a f1,f2 x,y 

you can read the details here. This will draw an arc from wherever you are (previous final coordinate) to the coordinates x,y. But the things to focus on are that the first two numbers are the implied ellipse's radii and the last part before the end coordinates, that I've marked f1,f2, are flags and so not interpolate-able.

So the main weirdness in the transition from your code is because you are trying to interpolate between

A rx,ry, 0 0,1

A 0,0 0 0,0

You will immediately see a smoother transition if you set your end-path to A0,0 0 0,1 in the one case.

To make the pieces fit together a bit better I animated the pie's inner radius so that the segments looked more like the bars but curved, then I let D3 figure out the curve-to-bar transition but without switching the arc flag. Then you want the bars to have flat ends. The path will have a flatter arc if you increase your implied ellipses radii! So I simply used 100,100. My final transition-to path for the bars looks like:

"M " + oCord[0][0] + "," + oCord[0][1] + 
"A100,100 0 0,1 " + oCord[1][0] + "," + oCord[1][1] + 
"L " + oCord[2][0] + "," + oCord[2][1] + 
"A100,100 0 0,0 " + oCord[3][0] + "," + oCord[3][1] + 
"Z";

Then To actually, properly, flatten the endpoints I have a second transition (they run serially) to zero the Arc segments of the path. I suspect there is a better way to do this kind of cleanup with D3 transitions, but a transition with duration 0 also works.

To get the reverse to work nicely I set the paths to the flattened-arc-curves from above. Having the large radius and correct flags means the D3-computed transition back to the doughnut chart works well. Then I simply animate the inner radius back out.