block by biovisualize 2297636

Bar chart to polar area chart

Full Screen

index.html

<!DOCTYPE html>
<html >
<head>
    <script type="text/javascript" src="//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 w = 400,
        h = 250,
        barW = w / data.length-10,
        barH = function(d, i){return h / d3.max(data)*d},
        barX = function(d, i){return w / data.length * i;},
        barY = function(d, i){return h - barH(d);};

    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 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-barW2(d, i))+" "+(barH(d, i)-barH2(d, i))+
            "L"+(barW/2+barW2(d, i))+" "+(barH(d, i)-barH2(d, i))+
            "L"+barW/2+" "+barH(d, i)+
            "L"+barW/2+" "+barH(d, i)+
            "Z"});

    var visSVG = d3.select("#vis_div_id2")
        .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 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>