JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hook"></div>

CSS

svg { background: #DDD; border: 1px solid #BBB; }

JavaScript

// Data
  var data = [
     { name:"Ireland", income:53000, life: 78, pop:6378, color: "green"},
     { name:"Norway",  income:73000, life: 87, pop:5084, color: "blue" },
     { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
  ];
// Create SVG container
  var svg = d3.select("#hook").append("svg")
        .attr("width", 120)
        .attr("height", 120)
        .style("fill", "#D0D0D0");
// Create SVG elements from data !
    svg.selectAll("circle")                  // create virtual circles
      .data(data)                            // bind data
    .enter()                                 // for each row...
      .append('circle')                      // bind circle & data row such as... 
        .attr("id", function(d) { return d.name })           // set the circle's id according to the country name
        .attr("cx", function(d) { return d.income /1000  })  // set the circle's horizontal position according to income 
        .attr("cy", function(d) { return d.life })           // set the circle's vertical position according to life expectancy 
        .attr("r",  function(d) { return d.pop /1000 *2 })   // set the circle's radius according to country's population 
        .attr("fill",function(d) { return d.color });        // set the circle's color according to country's color