bubblechartd3v3

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

<div class="bubblechart light" data-role="bubblechart" data-width="500" data-height="300" data-data="">
            </div>

<script>
      var $this = $('.bubblechart');
      var data  = [{
                    "label": "Chinese",
                    "value": 20
                  }, {
                    "label": "American",
                    "value": 10
                  }, {
                    "label": "Indian",
                    "value": 50
                  }];



          var w = $this.data("width");
          var h = $this.data("height");

      //var data  = $(this)[0].props.data;

      function colores_google(n) {
        var colores_g = ["#ff7276", "#4baad2", "#eaa2a5", "#e75763", "#a6a19e"];
        return colores_g[n % colores_g.length];
      }


        var methods = {
          el: "",
          init: function(el, options){
          
            var clone = options["data"];
            var that = this;
            
            //console.log("clone", clone);
            
            w = options["width"];
            h = options["height"];
            
            methods.el = el;
            
            methods.setup(clone, w, h);
                        //methods.resizeChart(methods.el["selector"]);
          },
          resizeChart: function(selector){
                        //alert(selector);
                        var svg = $(selector + " .bubblechart");

            
            var aspect = svg.width() / svg.height();
            var targetWidth = svg.parent().parent().width();
            
            if(targetWidth!=null){
              svg.attr("width", targetWidth);
              svg.attr("height", Math.round(targetWidth / aspect));
            }
          },
          funnelData: function(data, width, height){
              function getRandom(min, max){
                return...