D3 Examples - update dots on canvas

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; }
  </style>
</head>
​
<body>
  <div id="vis"></div>
  <script>
    var data = [
  {
    label: 'foo',
    amount: 8
  },
  {
    label: 'bar',
    amount: 6
  },
  {
    label: 'lol',
    amount: 1
  }
];
var base = d3.select("#vis");
var width = 400;
var chart = base.append("canvas")
  .attr("width", 400)
  .attr("height", 300);
var context = chart.node().getContext("2d");
​
// Create an in memory only element of type 'custom'
var detachedContainer = document.createElement("custom");
​
// Create a d3 selection for the detached container
var dataContainer = d3.select(detachedContainer);
​
// Function to create our custom data containers
function drawCustom(data) {
  var scale = d3.scaleBand().rangeRound([0, width])
    .domain(data.map(function(d) { 
      return d.label; 
    }));
  
  var dataBinding = dataContainer
    .selectAll("custom.circle")
    .data(data);
  
  dataBinding
    .attr("r", 0)
    .transition()
    .duration(1000)
    .attr("r", function(d) {return d.amount*5})
    .attr("fillStyle", "lightblue");
  
  dataBinding.enter()
      .append("custom")
      .classed("circle", true)
      .attr("cx", function(d) {
            return scale(d.label) + 80;
        })
      .attr("cy", 100)
      .attr("r", function(d) {return d.amount*5})
      .attr("fillStyle", "lightcoral");
  
  dataBinding.exit()
    .attr("r", function(d) {return d.amount*5})
    .transition()
    .duration(1000)
    .attr("r", 0)
    .attr("fillStyle", "lightgrey");
}
​
// Function to render out to canvas our custom
// in memory nodes
function drawCanvas() {
​
  // clear canvas
  context.fillStyle = "#fff";
      context.rect(0,0,chart.attr("width"),chart.attr("height"));
  context.fill();
  
  // select our dummy nodes and draw the data to canvas.
  var elements = dataContainer.selectAll("custom.circle");
  elements.each(function(d) {
    var node = d3.select(this);
    context.beginPath();
    context.fillStyle = node.attr("fillStyle");
    context.arc(node.attr("cx"), node.attr("cy"), node.attr("r"),0,2*Math.PI);
    context.fill();
    context.closePath();
  })
}
​
d3.timer(drawCanvas);
drawCustom(data);
setInterval(function() {
  function n() {return Math.random() * (10 - 1) + 1}
  newdata = [
    {
      label: 'con',
      amount: 10
    },
    {
      label: 'lab',
      amount: n()
    },
    {
      label: 'lib',
      amount: n()
    },
    {
      label: 'lol',
      amount: n()
    }
  ];
  drawCustom(newdata);
}, 1500);
​
  </script>
</body>
​
    