JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<h1>Stocks</h1>

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

CSS

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;
}

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")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("pointer-events", "all")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")"),

        clip = chart.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("id", "clip-rect")
        .attr("x", "0")
        .attr("y", "0")
        .attr("width", width)
        .attr("height", height);
            
    var chartBody = chart.append("g")
        .attr("clip-path", "url(#clip)")
   ...