Pie Chart

_.md

[ Launch: Tributary inlet ] 4948108 by vitorbal

config.json

{"description":"Pie Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

    var w = 856,                        //width
    h = 600,                            //height
    r = 150,                            //radius
    color = d3.scale.category20c();     //builtin range of colors

    data = [{"label":"one", "value":20}, 
            {"label":"two", "value":50}, 
            {"label":"three", "value":30}];
    
    var vis = d3.select("svg")
        .data([data])
            .attr("width", w)
            .attr("height", h)
        .append("g")
            .attr("transform", "translate(" + 250 + "," + 250 + ")")

    var arc = d3.svg.arc()
        .outerRadius(r);

    var pie = d3.layout.pie()
        .value(function(d) { return d.value; });

    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
            .append("g")
                .attr("class", "slice");

        arcs.append("path")
                .attr("fill", function(d, i) { return color(i); } )
                .attr("d", arc);

        arcs.append("text")
                .attr("transform", function(d) {
                d.innerRadius = r + 62;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d, i) { return data[i].label; });