bubblechartd3v4

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>BubbleChart I</title>

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

    <!--js-->
    <script>
      $(document).ready(function() {

        var $this = $('.bubblechart');

        var data = [{
          "label": "Chinese",
          "value": 20
        }, {
          "label": "American",
          "value": 10
        }, {
          "label": "Indian",
          "value": 50
        }];

        var width = $this.data('width'),
          height = $this.data('height');

        var color = d3.scaleOrdinal()
          .range(["#ff5200", "red", "green"]);



        var margin = {
            top: 20,
            right: 15,
            bottom: 30,
            left: 20
          },
          width = width - margin.left - margin.right,
          height = height - margin.top - margin.bottom;



        var svg = d3.select($this[0])
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr('class', 'bubblechart')
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var bubbles = svg.append('g').attr('class', 'bubbles');



        var force = d3.forceSimulation()
          .force("collide", d3.forceCollide(12))
          .force("center", d3.forceCenter(width / 2, height / 2))
          .nodes(data)
        //.on("tick", tick);


        var bubbles = svg.append("g")
          .attr("class", "bubbles")


        data = funnelData(data, width, height);

        var padding = 4;
        var maxRadius = d3.max(data, function(d) {
          return parseInt(d.radius)
        });

        var scale = (width / 6) / 100;


        var nodes = bubbles.selectAll("circle")
          .data(data);


        // Enter
        nodes.enter()
         ...