D3 Examples - append/update rects (dots OK)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    text { font-family: sans-serif; color: grey;  }
  </style>
</head>
​
<body>
  <script>
var data = [
  {
    label: 'foo',
    amount: 8
  },
  {
    label: 'bar',
    amount: 6
  },
  {
    label: 'lol',
    amount: 1
  }
];
var circles = []
var width = 500;
var height = 500;
var color = d3.scaleOrdinal(d3.schemeCategory10);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(50,50)");
​
// append 1 rect for each label
function update(dataset){
  var x = d3.scaleBand().rangeRound([0, width])
      .domain(dataset.map(function(d) { return d.label; }));
​
  var data = dataset.map(function(d) {
    var circles = d3.range(d.amount).map(function(i) {
      return {
        x: (i % 5)*20,
        y: (i / 5 >> 0)*20
      }
    });
    return {
      label: d.label,
      dots: circles
    };
  });  
  
  var g  = svg.selectAll('g')
      .data(data);
  
  g.transition()
    .attr('class', function(d) { return d.label })
      .attr('transform', function(d) { 
        return 'translate(' + x(d.label) + ',150)'  
      });
  
  g.enter()
      .append('g') 
      .attr('class', function(d) { return d.label })
      .attr('transform', function(d) { 
        return 'translate(' + x(d.label) + ',150)'  
      })
  .attr('fill', function(d) { return color(d.label)})
  .append('text')
  .text(function(d) {return d.label});
  
  g.exit().transition().remove();
  
  var dots = g.selectAll('circle')
    .data(function(d) {return d.dots});
  
  dots.transition()
      .attr('r', 5)
      .attr('cx', function(d) {
        return (10 + d.x);
      })
      .attr('cy', function(d) {
        return (20 + d.y);
      })
      //.attr('fill', 'lightcoral');
​
      dots.exit().transition()
      .attr('r', 0)
      .remove();
  
    dots.enter().append('circle')
    .attr('r', 5)
    .attr('cx', function(d) {
      console.log(d)
      return (10 + d.x);
    })
    .attr('cy', function(d) {
      return (20 + d.y);
    })
    //.attr('fill', 'lightblue');
}
update(data);
/*
setInterval(function() {
  function n() {return Math.random() * (40 - 1) + 1}
  newdata = [
    {
      label: 'con',
      amount: n()
    },
    {
      label: 'lab',
      amount: n()
    },
    {
      label: 'lib',
      amount: n()
    },
    {
      label: 'lol',
      amount: n()
    }
  ];
  update(newdata);
}, 1500);
*/
  </script>
</body>
​
    