D3 Examples - bubbles

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
  // one dimension (color) 3 metrics (x, y, radius)
  var canvasElement = document.createElement('canvas');
  var ctx = canvasElement.getContext('2d');
  ctx.canvas.width = 300;
  ctx.canvas.height = 150;
  canvasElement.id = 'myViz';
  document.body.appendChild(canvasElement);
    
  // Config: figure out pointStyle
  // make labels optional and maybe allow selection of color scales
  // figure out how to color scale by category
  var data = [["red", 10, 10, 10], ["blue", 10, 20, 10]];
  var uniqueColors = ["red", "blue"];
  
  var datasets = []
  uniqueColors.forEach(function(dim){
    dataObj = {"label": dim,
               "backgroundColor": "rgb(255, 99, 132)",
               "borderColor": "rgb(255, 99, 132)"}
    dataObj["data"] = data.filter(function(d){return d[0]===dim}).map(function(d){return {x:d[1], y:d[2], r: d[3]};});
   datasets.push(dataObj);
                                                                                  
  })
    
  console.log(dataObj);
  
  var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'bubble',
​
      // The data for our dataset
      data: {
          datasets: datasets
      },
​
      // Configuration options go here
      options: {}
  });
​
​
  </script>
</body>
​
    