Bubbles

<!DOCTYPE html>
<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 {
     background-color: whitesmoke;
     margin: 0px;
     text-align: center;
   }

svg {
     background-color: white;
   }

figure {
     margin: 5px 0px;
   }

figcaption {
     font-family: sans-serif;
     font-size: 10pt;
   }

text {
     font-family: sans-serif;
     font-size: 10pt;
     fill: black;
   }

.axis text {
     font-size: 9pt;
   }

.bubble text {
    //visibility: hidden;
   }

.bubble circle {
     fill-opacity: 0.75;
     stroke: white;
     stroke-width: 0.5;
   }

.hover text {
     visibility: visible;
   }

.hover circle {
     stroke: red;
     stroke-width: 1;
   }
 </style>
 </head>
  
 <body>
   <figure>
    <svg width="940" height="580"></svg>
    <figcaption>Source: "<a href="https://www.equality-of-opportunity.org/data/">Online Data Table 1</a>" dataset from the <a href="https://www.equality-of-opportunity.org/">Equality of Opportunity</a> project.</figcaption>
  </figure>
  <script>
    var svg = d3.select("svg");
    var g = svg.append("g");
    
    var margin = {
      "top" : 10, "bottom" : 25,
      "left": 35, "right": 10
    };
    
    var legend = { "width": 100, "height": 20 };
    var radius = { "min": 5, "max": 15 };
    
    var plot = {
      "width": svg.attr("width") - margin.left - margin.right,
      "height": svg.attr("height") - margin.top - margin.bottom
    };
    
    g.attr("id", "plot");
    
    d3.csv("mrc_table2.csv",convert, callback);
    
    function convert(row){
      keep = {};
      keep["name"] = row["name"];
      keep["id"] = row["super_opeid"];
      keep["par_q1"] = row["par_q1"];
      keep["k_income"] = row["k_income"];
      keep["par_income"] = row["par_income"];
      keep["mobility_rate"] = row["mobility_rate"]
      return keep;
    }
    
    function toNumber(text){
      text = text.trim();
      text = text.replace(/,/,"");
      return +text;
    }
    
    function callback(error, data){
      if(error) throw error;
      
      data.sort(function(a,b){
        return a.mobility_rate - b.mobility_rate;
      });
      
      var scales = {};
      var axes = {};
      var groups = {};

scales["x"] = d3.scaleLinear()
        .range([0, plot.width])
        .domain([0,50])
      
      scales["y"] = d3.scaleLinear()
        .range([plot.height, 0])
        .domain(d3.extent(data, function(d){return d.k_income}))
        .nice();
      
      scales["radius"] = d3.scaleSqrt()
        .range([5, 15])
        .domain(d3.extent(data, function(d){return d.mobility_rate}))
        .nice();
      
      scales["color"] = d3.scaleSequential(d3.interpolatePuOr)
        .domain(d3.extent(data, function(d){return d.par_income}))
        .nice();
      
      var bubbles = g.selectAll(".bubble")
        .data(data)
        .enter()
        .append("g")
        .attr("id", function(d){return "id-" + d.id;})
        .attr("class", "bubble");
      
      bubbles.append("circle")
        .attr("cx", function(d){return scales.x(d.par_q1);})
        .attr("cy", function(d){return scales.y(d.k_income);})
        .attr("r", function(d){return scales.radius(d.mobility_rate);})
        .style("fill", function(d){return scales.color(d.par_income);})
      
      bubbles.append("text")
        .attr("x", function(d) {return scales.x(d.par_q1);})
        .attr("y", function(d) {return scales.y(d.k_income);})
        .attr("dy", "0.35em")
        .attr("text-anchor", "end")
        .text(function(d) {return d.name;});
    }
    
    
    
    
   </script>
   
  </body>
</html>

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

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