JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

body {
  font: 10px sans-serif;
}

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

.area {
  fill: steelblue;
}

JavaScript

var data = [['1-May-12', 582.13,342]]

var margin = {
        top : 20,
        right : 20,
        bottom : 30,
        left : 50
    }, width = 400 - margin.left - margin.right, height = 400 - margin.top
            - margin.bottom;

    var parseDate = d3.time.format("%d-%b-%y").parse;

    var x = d3.time.scale().range([ 0, width ]);

    var y = d3.scale.linear().range([ height, 0 ]);
    var y1 = d3.scale.linear().range([ 0,height ]);
    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("left");
    var y1Axis = d3.svg.axis().scale(y1).orient("left");
    
    var area = d3.svg.area().x(function(d) {
        return x(d.date);
    }).y0(0).y1(function(d) {
        return y(d.in);
    });

    
    var area1 = d3.svg.area().x(function(d) {
        return x(d.date);
    }).y0(height).y1(function(d) {
        return y(d.in);
    });
    
    var svg = d3.select("#chart1").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 + ")");
        

        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.in= +d.in;
        });

        x.domain(d3.extent(data, function(d) {
            return d.date;
        }));
        y.domain([ 0, d3.max(data, function(d) {
            return d.in;
        }) ]);

        y1.domain([ 0, d3.max(data, function(d) {
            return d.in;
        }) ]);

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

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

        svg.append("g").attr("class", "y axis").call(yAxis).append("text")
                .attr("transform", "rotate(-90)").attr("y",...