// source http://jsbin.com/wifaq/6

<!DOCTYPE html>
<html>
<head>
<script src="https://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mikemcl/big.js/big.js"></script>

#minus {
  float:right;
}
</style>
</head>
<body>
  <div style="width:250px; height:30px;">
    <div id="plus">+</div>
    <div id="minus">-</div>
  </div>
<script id="jsbin-javascript">
var data, h, num_partitions, padding, r, renderPie, toggleSelection, updatePartitions, w;

w = 250;

h = 250;

r = 100;

padding = 10;

num_partitions = 1;

data = null;

updatePartitions = function(delta) {
  var index, measure, remove_me;
  num_partitions += delta;
  if (num_partitions < 1) {
    num_partitions = 1;
    return;
  } else {
    measure = 100 / num_partitions;
  }
  switch (delta) {
    case 1:
      index = data.length;
      console.log('index', index);
      data[index] = {
        id: num_partitions,
        value: measure,
        shaded: false
      };
      break;
    case 0:
      if (!data) {
        data = [
          {
            id: num_partitions,
            value: measure,
            shaded: false
          }
        ];
      }
      break;
    case -1:
      remove_me = _.find(data, function(entry) {
        return !entry.shaded;
      });
      if (!remove_me) {
        remove_me = data[data.length];
      }
      index = _.indexOf(data, remove_me);
      data.splice(index, 1);
      console.log("data.length", data.length);
  }
  _.map(data, function(entry, index) {
    entry.value = measure;
    return entry.id = index;
  });
  return renderPie(data);
};

renderPie = function(data) {
  var arc, arcs, pie, vis;
  $('svg').remove();
  vis = d3.select("body").append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + (r + padding) + "," + (r + padding) + ")");
  arc = d3.svg.arc().outerRadius(r);
  pie = d3.layout.pie().value(function(d) {
    return d.value;
  });
  arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
  return arcs.append("svg:path").attr("stroke", "black").attr("stroke-width", "2px").attr("d", arc).attr('data-id', function(d) {
    return d.data.id;
  }).attr("fill", function(d) {
    if (d.data.shaded) {
      return 'grey';
    } else {
      return 'white';
    }
  }).on('click', toggleSelection);
};

toggleSelection = function() {
  var data_entry, id, path;
  path = d3.select(this);
  id = parseInt(path.attr('data-id'));
  data_entry = _.find(data, function(entry) {
    return entry.id === id;
  });
  console.log("data_entry", data_entry);
  data_entry.shaded = !data_entry.shaded;
  console.log("data_entry", data_entry);
  return updatePartitions(0);
};

updatePartitions(0);

$('#plus').click(function() {
  return updatePartitions(1);
});

$('#minus').click(function() {
  return updatePartitions(-1);
});

</script>

#minus {
  float:right;
}</script>

updatePartitions = (delta) ->
  num_partitions += delta
  
  if num_partitions < 1
    num_partitions = 1
    return
  else
    measure = 100 / num_partitions
  
  switch delta
    when 1
      index = data.length
      console.log 'index', index
      data[index] = 
        id: num_partitions
        value: measure
        shaded: false
    when 0
      data = [{id:num_partitions, value:measure, shaded:false}] unless data
    when -1
      remove_me = _.find data, (entry) -> not entry.shaded
      remove_me = data[data.length] unless remove_me
      index = _.indexOf data, remove_me
      data.splice index, 1
      console.log "data.length", data.length
      
  _.map data, (entry, index) -> 
    entry.value = measure
    entry.id = index
    
  renderPie data
    
renderPie = (data) ->
  $('svg').remove()
  
  vis = d3.select("body")
    .append("svg:svg")
    .data([data])
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + (r + padding) + "," + (r + padding) + ")")
 
  arc = d3.svg.arc()
    .outerRadius(r)
 
  pie = d3.layout.pie()
    .value((d) -> d.value )

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

arcs.append("svg:path")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("d", arc)
    .attr('data-id', (d) -> d.data.id )
    .attr("fill", (d) -> if d.data.shaded then 'grey' else 'white')
    .on('click', toggleSelection)

toggleSelection = ->
  path = d3.select(this)
  id = parseInt(path.attr('data-id'))
  data_entry = _.find data, (entry) -> entry.id is id
  console.log "data_entry", data_entry
  data_entry.shaded = not data_entry.shaded
  console.log "data_entry", data_entry
  updatePartitions 0
  
updatePartitions 0
$('#plus').click -> updatePartitions 1
$('#minus').click -> updatePartitions -1</script></body>
</html>

Modified http://jashkenas.github.io/underscore/underscore-min.js to a secure url

Modified http://code.jquery.com/jquery-1.9.1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://rawgit.com/MikeMcl/big.js/master/big.js to https://cdn.jsdelivr.net/gh/mikemcl/big.js/big.js

https://jashkenas.github.io/underscore/underscore-min.js

https://code.jquery.com/jquery-1.9.1.min.js

https://d3js.org/d3.v3.min.js

https://rawgit.com/MikeMcl/big.js/master/big.js