JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 400;

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', width / 6)
    .attr('class', 'chart');

var testData1 = [];

for (var i = 0; i < 7; i++) {
    testData1.push([i, Math.random() * 30]);
}

var xDomain = [0, d3.max(testData1, function(d) { return d[0]; })];

var xScale = d3.scale.linear().domain(xDomain).range([0, width]);
var yScale = d3.scale.linear().domain([0,3]).range([0, width / 6]);

svg.selectAll('path.area')
    .data([testData1])
    .enter()
    .append('path')
    .style('fill', '#CDDAEC')
    .attr('class', 'area')
    .attr('d', d3.svg.area()
        .x(function(d) {
            return xScale(d[0])
        })
        // .y(function(d) {
        //     return yScale(d[1])
        // })
        .interpolate('cardinal')
    );