Per Capita GDP Bubble Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg width="600" height="600"></svg>
  <script>
    var svg = d3.select("svg"),
        width = +svg.attr('width'),
        height = +svg.attr('height');
    
    var s = d3.scaleLinear()
    	.range([5, 50]);
    
    var color = d3.scaleLinear()
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#007AFF"), d3.rgb('#FEB24C')]);
		
    d3.csv('gapminder_gdp.csv', parse, function(error, data) {
      if (error) throw error;
      
      data = data.slice(0, 100);
      console.log(data);
      
      const extent = d3.extent(data, function(d) { return d.gdp; });
      
      s.domain(extent)
      color.domain(extent);
      
      var simulation = d3.forceSimulation(data)
        .force('charge', d3.forceManyBody().strength(-2))
        .force('center', d3.forceCenter(width / 2, height / 2))
        .force('collision', d3.forceCollide().radius(function(d) {
          return s(d.gdp);
        }))
      	.on('tick', ticked);
      
      function ticked() {
        var u = d3.select('svg')
          .selectAll('circle')
          .data(data, function(d) {
            return d.geo;
          });

u.enter()
          .append('circle')
          .attr('r', function(d) {
            return s(d.gdp);
          })
          .merge(u)
          .attr('cx', function(d) {
            return d.x;
          })
          .attr('cy', function(d) {
            return d.y;
          })
        	.attr('fill', function(d) {
	          return color(d.gdp);
  	      })
         .on("mouseover", function(d){
			     tooltip.html(d.geo +"<br>"+ "$" + d.gdp.toLocaleString());
     		   return tooltip.style("visibility", "visible");
         })
				 .on("mousemove", function(){
           return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX+10)+"px");
        })
 				 .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

u.exit().remove()
      }
      
    });
    
    var tooltip = d3.select('body')
     .append("div")
     .style("position", "absolute")
     .style("visibility", "hidden")
     .style("color", "white")
     .style("padding", "8px")
     .style("background-color", "#626D71")
     .style("border-radius", "6px")
     .style("text-align", "center")
     .style("font-family", "monospace")
     .style("width", "auto")
     .text("");
    
    function parse(d) {
      return {
        year: +d.time,
        geo: d.geo,
        gdp: +d.gdp_per_capita_cppp
      };
    }

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js