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")
                 ...