JSFiddle - React, Tailwind, and code Playground

CSS

path, line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

text {
    font-size: 10px;
}

JavaScript

var margin = {top: 10, right: 40, bottom: 30, left: 20}

var width = 500 - margin.left - margin.right
var height = 450 - margin.top - margin.bottom

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

d3.csv('http://d3-js.ru/data/gapminder.csv', function (country) {
    country.gdp = Number(country.gdp)
    country.life = Number(country.life)
    country.population = Number(country.population)
    return country
}, function (countries) {
    
    var x = d3.scale.linear()
        .domain([0, d3.max(countries, function (d) { return d.gdp })])
        .range([0, width])

    var y = d3.scale.linear()
        .domain(d3.extent(countries, function (d) { return d.life }))
        .range([height, 0])

    var r = d3.scale.linear()
        .domain([0, Math.sqrt(d3.max(countries, function (d) { return d.population }))])
        .range([0, 10])
    
    var g = svg.selectAll('g')
        .data(countries)
        .enter()
        .append('g')
    
    g.append('circle')
        .attr('r', function (d) { return r(Math.sqrt(d.population)) })
        .attr('fill', function (d) { return d.color })
        .attr('cx', function (d) { return x(d.gdp) })
        .attr('cy', function (d) { return y(d.life) })
        
    g.append('text')
        .attr('dx', 1)
        .attr('dy', 3)
        .text(function (d) { return d.country })
        .attr('x', function (d) { return x(d.gdp) + r(Math.sqrt(d.population))  })
        .attr('y', function (d) { return y(d.life) })
    
     svg.append('g')
        .attr('transform', 'translate(0,' + (height + 10 ) + ')')
        .call(d3.svg.axis()
            .scale(x)
            .orient('bottom'))
    
     svg.append('g')
        .call(d3.svg.axis()
            .scale(y)
            .orient('left'))
   
})