JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div class="plot">
    <svg></svg>
</div>

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
svg {
    border:solid 1px red;
}

.plot{
    height:500px;
}

svg{
    height:100%;
    width:100%;
}

JavaScript

var data = [{ date:'1-May-12',close:200.13},
{ date:'30-Apr-12',close:	583.98},
{ date:'27-Apr-12',close:	603.00},
{ date:'26-Apr-12',close:	607.70},
{ date:'25-Apr-12',close:	610.00},
{ date:'24-Apr-12',close:	560.28},
{ date:'23-Apr-12',close:	571.70},
{ date:'20-Apr-12',close:	572.98},
{ date:'19-Apr-12',close:	587.44},
{ date:'18-Apr-12',close:	608.34},
{ date:'17-Apr-12',close:	609.70},
{ date:'16-Apr-12',close:	580.13},
{ date:'13-Apr-12',close:	605.23},
{ date:'12-Apr-12',close:	622.77},
{ date:'11-Apr-12',close:	626.20},
{ date:'10-Apr-12',close:	628.44},
{ date:'9-Apr-12',close:   636.23},
{ date:'5-Apr-12',close:   633.68},
{ date:'4-Apr-12',close:   624.31},
{ date:'3-Apr-12',close:   629.32},
{ date:'2-Apr-12',close:   618.63},
{ date:'30-Mar-12',close:	599.55},
{ date:'29-Mar-12',close:	609.86},
{ date:'28-Mar-12',close:	617.62},
{ date:'27-Mar-12',close:	614.48},
{ date:'26-Mar-12',close:	606.98},
{ date:'23-Mar-12',close:	596.05},
{ date:'22-Mar-12',close:	599.34},
{ date:'21-Mar-12',close:	602.50}];
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 100
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

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

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

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

var line = d3.svg.line()
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.close);
});

var svg = d3.select("svg")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")").
	attr('class', 'main-container');


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

x.domain(d3.extent(data, function (d) {
    return d.date;
}));
y.domain([150, 700]);

svg.append("g")
    .attr("class", "x axis")
   ...