D3 Pie to Bar Transition

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<svg></svg>

CoffeeScript

o = 
  width: 600
  height: 400
  margin: {left: 20, right: 20, bottom: 20, top: 20}

o.H = o.height + o.margin.top + o.margin.bottom
o.W = o.width + o.margin.left + o.margin.right

svg = d3.select("svg")
  .attr("width", o.W)
  .attr("height", o.H)
  .append("g")
  .attr("transform", "translate(#{o.margin.left}, #{o.margin.top})")
    

data = d3.range(4)

arc = d3.svg.arg()
  .innerRadius(20)
  .outerRadius(30)
    
pie = svg
  .attr
    transform: "translate(#{o.width/2}, #{o.height/2})"
  
pie.selectAll("path")
  .data(data).enter()
  .append("path")
  .attr("d", arc)