pie add/remove categories

by samselikoff

HTML

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

CSS

#chart {
    width: 300px;
    height: 300px;
}

JavaScript

var mydata = [
  {category: 'one', count: 5},
  {category: 'two', count: 15},
  {category: 'three', count: 25}
];


var mychart = PieChart();
redraw();

function redraw() {
  d3.select("#chart")
    .data([mydata])
    .call(mychart);
}

function PieChart() {

    var margin            = {top: 20, right: 20, bottom: 20, left: 20},
        beginDate         = '',
        endDate           = '',
        color             = d3.scale.category10(),
        oneColor          = '',
        labelSize         = '',
        labelColor        = '',
        labelText         = '',
        customLabelEnter  = '',
        customLabelUpdate = '',
        emptyText         = 'Empty!',
        showLegend        = false,
        straightenLabels  = false,
        sliceClasses      = '',
        duration          = 500;

    function chart(selection) {
      selection.each(function(data)
      {
        var width = parseInt(selection.style('width'))-margin.left-margin.right;
        var height = parseInt(selection.style('height'))-margin.top-margin.bottom;
  
        
          
        if (showLegend) {
            radius = (Math.min(width, (height-(24 * data.length))) / 2 );
        } else {
            radius = (Math.min(width, height) / 2 );
        }
        
        arc = d3.svg.arc().outerRadius(radius).innerRadius(radius / 2);
  
        data.forEach(function(d) {
            d.count = +d.count;
        });
  
        var empty = 1;
  
        data.forEach(function(d) {
            if (d.count != 0) {empty = 0;}
        });

        if (empty) {
            var _this = this;
    
            // Select the message svg element, if it exists.
    
            function setMsg() {
                var msg = d3.select(_this).selectAll(".message").data([data]);
                msg.enter()
                    .append("div")
                    .style('padding-top', (height/2)+'px')
                    .style('text-align', 'center')
                    .attr('class', 'message')
     ...