JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<!DOCTYPE html>
<html>
<head>

<title>Stocks</title>
<style>

html {
    min-width: 1040px;
}

body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    margin: 1em auto 4em auto;
    width: 960px;
}

text {
  font: 10px sans-serif;
}

line {
    shape-rendering: crispEdges;
}

.dot {
    stroke: #000;
}

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

</style>

<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>    

</head>
<body>

<h1>Stocks</h1>

<p id="chart"></p>

<script type="text/javascript">


var t = 0, // start time (seconds since epoch)
    v = 50, // start value
    xMin = 0, xMax = 80,
    yMin = 0, yMax = 100
    data = d3.range(xMax).map(next); // starting dataset
  
 function next() {
    return {
        time: t++,
        value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
    };
}

var format = d3.time.format("%d/%m/%Y");

var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
    width = 960 - margin.right,
    height = 500 - margin.top - margin.bottom;

    
/*
d3.csv("aapl_daily_2011.csv", function(csvData) {
    
    var xMin = 0,
        xMax = 0,
        yMin = 0,
        yMax = 0,
        sampleSize = csvData.length,
        data = [];
    
    for (var i = 0; i < sampleSize; ++i)
    {
        var dt = format.parse(csvData[i].Date);
        console.log(dt);
    }

});
*/
    
    
    var xScale = d3.scale.linear().
        domain([xMin, xMax]). // your data minimum and maximum
        range([0, width]); // the pixels to map to, e.g., the width of the diagram.

    var yScale = d3.scale.linear().
        domain([yMax, yMin]). 
        range([0, height]); 
        
    var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(10, d3.format(",d")),
        yAxis = d3.svg.axis().orient("left").scale(yScale);

        
    var chart = d3.select("#chart").append("svg")
        .attr("class", "chart")
     ...