JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

path.line
{
    fill: none;
    stroke: #000;
}

JavaScript

var visits = [{'datestamp': 1000, 'visits': 1234},
{'datestamp': 1050, 'visits': 1868},
{'datestamp': 1100, 'visits': 1561},
{'datestamp': 1150, 'visits': 1899},
{'datestamp': 1200, 'visits': 1545},
{'datestamp': 1250, 'visits': 1421},
{'datestamp': 1300, 'visits': 1378},
{'datestamp': 1350, 'visits': 1601},
{'datestamp': 1400, 'visits': 1058},
{'datestamp': 1450, 'visits': 2401},
{'datestamp': 1500, 'visits': 1551},
{'datestamp': 1550, 'visits': 1561},
{'datestamp': 1600, 'visits': 1751},
{'datestamp': 1650, 'visits': 1595},
{'datestamp': 1700, 'visits': 1851},
{'datestamp': 1750, 'visits': 1254},
{'datestamp': 1800, 'visits': 1568}];

        var width = 400,
            height = 200,
            padding = 10;

        var extentVisits = d3.extent(visits, function(obj){
            return obj['visits'];
        });

        var extentDates = d3.extent(visits, function(obj){
            return obj['datestamp'];
        });

        var yScale = d3.scale.linear()
            .domain(extentVisits)
            .range([height - padding, padding]);

        var xScale = d3.scale.linear()
            .domain(extentDates)
            .range([0, width]);

        var line = d3.svg.line()
            .x(function(d) {
                return xScale(d['datestamp']);
            })
            .y(function(d) {
                return yScale(d['visits']);
            })

        d3.select('#chart')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .append("g")
            .attr("transform", "translate(5,5)")
            .append('svg:path')
            .datum(visits)
            .attr("class", "line")
            //.attr("fill", "none")
            //.attr("stroke", "#000")
            .attr('d', line);