Ejemplo usando Raphaël by aaizemberg

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

  <style>
    #scatterplot
    {
      width:900px;
      height:400px;
      box-shadow: 5px 5px 2px #888888;
      border:1px solid #d3d3d3;
    }
  </style>
  <script>
    function dibujar() {
      var w = 900;
      var h = 400;
      var paper = Raphael(document.getElementById("scatterplot"), w, h);
      var circulos = new Array();
      for (var i=0; i < 100 ; i++) {
        circulos[i] = paper.circle(Math.random() * w, Math.random() * h , 20);
        circulos[i].attr("fill", "#f50"); // color
        circulos[i].attr("stroke", "#fff"); // color del borde
        circulos[i].attr("stroke-width", "3"); // ancho del borde
        circulos[i].attr("fill-opacity","0.5"); // opacidad [0,1] del relleno
        circulos[i].attr("stroke-opacity", "0.3"); // opacidad [0,1] del borde
      }
    }
    window.onload = function () {
       dibujar();
    };
  </script>
</head>

<body>
  <h1>Ejemplo usando Raphaël</h1>
  <div id="scatterplot"></div>
</body>

</html>