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>