append/update rects (dots OK)

forked from basilesimon's block: append/update rects (dots OK)

<!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; }));

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>

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