JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
<div class="area"></div>

CSS

.area{
    width: 500px;
    height: 200px;
    background-color: #eee;
}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: lightsteelblue;
}
 
line {
    stroke: black;
}
circle.mark{
    stroke: steelblue;
    fill: #fff;
}

JavaScript

var data = [12, 7, 70, 84, 95, 26, 17, 8, 92, 45, 62, 9, 45, 6, 25, 2, 3, 78, 9, 42, 16, 84, 7, 3];
     
     var size = {
         height: 200,
         width: 500
     }
     
     var scale = {
         x: d3.scale.linear().domain([0, data.length]).range([0, size.width]),
         y: d3.scale.linear().domain([0, d3.max(data)]).range([size.height, 15])        
     }
          
     var chart = d3.selectAll('.area')
       .append('svg:svg')
       .data([data])
       .attr('width', size.width)
       .attr('height', size.height)
       .append('svg:g');
     
     var line = d3.svg.area().x(function(d, i){return scale.x(i);})
     .y(function(d){return scale.y(d);}).y0(size.height).interpolate("basis");
     
     chart.append('svg:path')
          .attr('d', function(d, i){return line(d, i);});
 
    chart.selectAll('circle.mark').data(data).enter().append('svg:circle')
    .attr('class', 'mark')
    .attr('cx', function(d, i){return scale.x(i);})
    .attr('cy', function(d){return scale.y(d);})
    .attr('r', 3.5)