JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<li data-sizey="3" data-sizex="3" data-col="3" data-row="1">
    <div class="gridster-box" id="box1">
        <div class="handle-resize"></div>
    </div>
</li>

CSS

body {
  font: 10px sans-serif;
}

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

.area {
  fill: steelblue;
}

JavaScript

var jsonResObj = {
               initial_hours: [
                  1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
                ]
              };

var margin = {top: 20, right: 20, bottom: 40, left: 50},
        width = 350 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom,
        days = jsonResObj.initial_hours.length;

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

    var y = d3.scale.linear()
    .domain([0, d3.max(jsonResObj.initial_hours)])
    .range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var area = d3.svg.area()
    .x(function(d) { return x(d.day); })
    .y0(height)
    .y1(function(d) { return y(d.hour); });

    var svg = d3.select("#box1").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 + ")");
    
    var data = [];
    jsonResObj.initial_hours.forEach(function(d,i){
			data.push({day: i, hour: d})
    });

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

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0,0)")
      .call(yAxis);