JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div></div>

CSS

body {
        font: 10px sans-serif;
    }

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

    .area {
        fill: lightsteelblue;
    }

    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
    }

    .dot {
        fill: white;
        stroke: steelblue;
        stroke-width: 1.5px;
    }

    .bar {
        fill: #ca57ac;
    }

    .bar:hover {
        fill: #dd98cb;
    }

    .bar:last-child {
        display: none;
    }

JavaScript

const rawData = [
    1992,
    1999,
    2003,
    2011,
    2013,
    2015
  ];

  var data = [];


  var margin = {top: 40, right: 40, bottom: 40, left: 40},
      width  = 600 - margin.left - margin.right,
      height = 250 - margin.top - margin.bottom;

  for (let i = 0; i <= rawData.length; i++) {
    data.push({x: i, y: Math.pow(i / (width / height), 1.5)});
  }


  var x = d3.scaleLinear()
      .domain([0, rawData.length])
      .range([0, width]);

  var y = d3.scaleLinear()
      .domain([Math.pow((rawData.length) / (width / height), 1.5), 0])
      .range([0, height]);

  var line = d3.line()
      .x(function (d) {
        return x(d.x);
      })
      .y(function (d) {
        return y(d.y);
      })
      .curve(d3.curveBasis);

  var area = d3.area()
      .x(line.x())
      .y1(line.y())
      .y0(y(0))
      .curve(d3.curveBasis);

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

  svg.append("path")
      .attr("class", "area")
      .attr("d", area);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  svg.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(y));

  svg.append("path")
      .attr("class", "line")
      .attr("d", line);

  svg.selectAll(".dot")
      .data(data.filter(function (d) {
        return d;
      }))
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", line.x())
      .attr("cy", line.y())
      .attr("r", 3.5);