pie chart test

with filtering

by juve

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
    <style>

    body {
        font: 10px sans-serif;
    }

    .arc path {
        stroke: #fff;
    }
    </style>

   <button value="cat1">cat1</button>
   <button value="cat2">cat2</button>
   <button value="cat3">cat3</button>

JavaScript

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var csv = null

    function update(cat){
        console.log(cat, "selected");

        var data = csv.filter(function(row){
            return row.category == cat;
        });

        var all = svg.selectAll(".arc")
        .data(pie(data))

        var g = all.enter().append("g")
        .attr("class", "arc");

        g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color(d.data.id); });

        g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function(d) { 
            console.log(d)
            return d.data.id
        });

        all.select("path").attr("d",arc)

        all.exit().remove()

    }

    d3.selectAll("button").on("click",
        function() {
            update(this.value)
        }
    );

    d3.csv("data.csv", function(error, data) {

        data.forEach(function(d) {
            d.value = 1.0*d.value;
        });

        csv = data
        update("cat1")
    });