dq-ps pie chart random

randomly updating pie chart with attrTween transitions

by Simon060694

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<body>
    <div id="pie"/>
</body>

JavaScript

var keys = [
  "White"
  , "Unknown" ];

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

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

svg.append("g").attr("class", "slices");

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

var arc = d3.arc()
  .outerRadius(radius * 1.0)
  .innerRadius(radius * 0.5);

var outerArc = d3.arc()
  .innerRadius(radius * 0.5)
  .outerRadius(radius * 1);

var key = function(d) { return d.data.label; };

//var color = d3.scaleOrdinal(d3.schemeCategory10)
var color = d3.scaleOrdinal(d3.schemePastel1)
    //.domain(["Assigned", "Complete", "Overdue", "Terminated", "Awaiting Review", "Attached"])
    .domain(keys);
    //.range(["#1abc9c", "#27ae60", "#e74c3c", "#f1c40f", "#34495e", "#3498db", "#8e44ad"]);

update(makeData());

var inter = setInterval(function() {
    update(makeData());
  }, 2000);

function mergeWithFirstEqualZero(first, second){

  var secondSet = d3.set();

  second.forEach(function(d) { secondSet.add(d.label); });

  var onlyFirst = first
    .filter(function(d){ return !secondSet.has(d.label) })
    .map(function(d) { return {label: d.label, value: 0}; });

  var sortedMerge = d3.merge([ second, onlyFirst ])
    .sort(function(a, b) {
        return d3.ascending(a.label, b.label);
      });

  return sortedMerge;
}

function makeData() {

  var data = Array();

  for (i = 0; i < keys.length; i++) {
    if (Math.random() < 0.7) {
      var ob = {};
      ob["label"] = keys[i];
      ob["value"] = randomCount(1, 100);
      data.push(ob);
    }
  }

  var sortedData = data.sort(function(a, b) {
      return d3.ascending(a.label, b.label);
    });

  return sortedData;
}

function randomCount(min, max) {

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function update(data) {

    var duration = 500;

  ...