JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

<div class="chart-content"><svg></svg></div>

CSS

body {
  font: 11px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
}

JavaScript

data = [
    {"Year": 220924800000, "country": "Pakistan", "GDP": 2.34, "Access_toLand":5.4},
    {"Year": 852076800000, "country": "England", "GDP": 2.28, "Access_toLand":13.4},
    {"Year": 946684800000, "country": "Holland", "GDP": 4.32, "Access_toLand":20.4},
    {"Year": 1262304000000, "country": "South Africa", "GDP": 3.37, "Access_toLand":7.2}
  ]

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var minDate, maxDate, dateArray = Array();
  //Filter out years to find min and max for x axis domain
  for(var i=0; i < data.length; i++){
    dateArray.push(data[i].Year);
  }

  minDate = Math.min.apply(Math,dateArray);
  maxDate = Math.max.apply(Math,dateArray);

  // setup x 
  var xValue = function(d) {      
      return d["Year"];
    }, 
    xScale = d3.time.scale().domain([minDate,maxDate]).range([0, width]),
    xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.time.format("%Y")),
    xMap = function(d) { return xScale(xValue(d));}; // data -> display
      
  // setup y
  var yValue = function(d) { return d["GDP"];}, // data -> value
      yScale = d3.scale.linear().range([height, 0]), // value -> display
      yMap = function(d) { return yScale(yValue(d));}, // data -> display
      yAxis = d3.svg.axis().scale(yScale).orient("left");

  // setup fill color
  var cValue = function(d) { return d.country;},
      color = d3.scale.category10();

  // add the graph canvas to the body of the webpage
  var svg = d3.select(".chart-content").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 + ")");

  // add the tooltip area to the webpage
  var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("background", "#ffffcc")
     ...