Bar chart to polar area chart

<!DOCTYPE html>
<html >
<head>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.8.2/d3.js"></script>
</head>
<body>
<div id="vis_div_id1" style="position:absolute;"></div>
<div id="vis_div_id2" style="position:absolute;left:500px"></div>
<script type="text/javascript">

var data = d3.range(10).map(Math.random);

var visSVG = d3.select("#vis_div_id1")
        .append("svg:svg")
        .attr("width", w*1.5)
        .attr("height", h*2);

var barsSVG = visSVG.selectAll("g.bar")
        .data(data)
        .enter().append("svg:g")
        .attr("class", "bar")
        .attr("transform", function(d, i) { return "translate("+barX(d, i) + ", "+barY(d, i)+") rotate(0)";});

barsSVG.append("svg:path")
        .attr("stroke", "steelblue")
        .attr("fill-opacity", 0.2)
        .attr("fill", "steelblue")
        .attr("d", function(d, i){return "M0 0L"+barW+" 0L"+barW+" "+barH(d, i)+"L0 "+barH(d, i)+" Z"})
        .attr("width", barW)
        .attr("height", barH);

barsSVG.transition()
        .delay(function(d, i){return 400-i*40})
        .duration(1500)
        .attr("transform", function(d, i) { return "translate("+(w/2) + ", "+(barY(d, i))+") rotate("+36*i+", "+barW/2+", "+barH(d, i)+")"});

var outWidth = function(d, i){
            return Math.tan(((360/data.length)/2)/360*(2*Math.PI))*(barH(d, i));
        };

var visSVG = d3.select("#vis_div_id2")
        .append("svg:svg")
        .attr("width", w*1.5)
        .attr("height", h*2);

var outWidth = function(d, i){
            return Math.tan(((360/data.length)/2)/360*(2*Math.PI))*(barH(d, i));
        };

var barH2 = function(d, i){return Math.sqrt((barW*barH(d, i))/Math.tan((36*Math.PI/180/2)))};
    var barW2 = function(d, i){return Math.tan((36*Math.PI/180/2))*barH2(d,i)};

barsSVG.selectAll("path")
        .transition()
        .delay(1500)
        .duration(500)
        .attr("d", function(d, i){return "M"+(barW/2-outWidth(d, i))+
            " 0L"+(barW/2+outWidth(d, i))+" 0L"+barW/2+" "+barH(d, i)+
            "L"+barW/2+" "+barH(d, i)+" Z"});

</script>
</body>
</html>

Modified http://github.com/mbostock/d3/raw/v1.8.2/d3.js to a secure url

https://github.com/mbostock/d3/raw/v1.8.2/d3.js