Arc to rect

Transition from a pie chart to a bar chart

by christopheviau

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<div class="viz"></div>

CSS

rect{fill:skyblue}

JavaScript

var data = [1, 2, 3, 4, 5];

var x = 100;
var y = 150;

var rootSVG = d3.select('.viz')
    .append('svg')
    .attr('width', 800)
    .attr('height', 800);

var triPath = function(d, i){    
    var r = 100;
    var angle = d/d3.sum(data)*360;
    //console.log(angle);
    var angleRad = angle * (Math.PI/180);
    var w = Math.tan(angleRad/2) * r;
    return 'M'+(0)+' '+(0)+
    'L'+(-w)+' '+(-r)+
    'Q'+(0)+' '+(-r)+
    ','+(w)+' '+(-r)+
    'L'+(0)+' '+(0)+
    'Z'};
var rectPath = function(d, i){
    return 'M'+(-r/2)+' '+(0)+
    'L'+(-r/2)+' '+(-r)+
    'Q'+(0)+' '+(-r)+
    ','+(r/2)+' '+(-r)+
    'L'+(r/2)+' '+(0)+
    'Z'};
var arcPath = function(d, i){
    return 'M'+(0)+' '+(0)+
    'L'+(-r/2)+' '+(-r)+
    'Q'+(0)+' '+(-r-r/2)+
    ','+(r/2)+' '+(-r)+
    'L'+(0)+' '+(0)+
    'Z'};

var vizGroup = rootSVG.append('g')
    .attr('transform', 'translate('+(x)+' '+y+')');

var arcs = vizGroup.selectAll('path')
    .data(data)
    .enter().append('path')
    .style('stroke', 'gray')
    .style('fill', 'aliceblue')
    .attr('transform', function(d, i){
        var prevDataSum = d3.sum(data.slice(0, i));
        var currentAngle = prevDataSum/d3.sum(data)*360;
        console.log(currentAngle);
        //return 'rotate('+(d/d3.sum(data)*360+currentAngle)+')';})
        return 'rotate('+(currentAngle)+')';})
    .attr('d', triPath);

arcs.transition()
    .delay(300)
    .duration(500)
    //.attr('d', arcPath);