JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="test-graph"></div>

CSS

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
			
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

JavaScript

var testData = [
        {
            date: "2013-06-25",
            programs: 1
        },
        {
            date: "2013-06-26",
            programs: 2
        },
        {
            date: "2013-06-27",
            programs: 3
        },
        {
            date: "2013-06-28",
            programs: 0
        },
        {
            date: "2013-06-29",
            programs: 0
        },
        {
            date: "2013-06-30",
            programs: 0
        },
        {
            date: "2013-07-01",
            programs: 1
        },
        
        {
            date: "2013-07-02",
            programs: 3
        },
        {
            date: "2013-07-03",
            programs: 1
        },
        {
            date: "2013-07-04",
            programs: 4
        },
        {
            date: "2013-07-05",
            programs: 0
        },
        {
            date: "2013-07-06",
            programs: 0
        },
        {
            date: "2013-07-07",
            programs: 0
        },
        {
            date: "2013-07-08",
            programs: 1
        },
        {
            date: "2013-07-09",
            programs: 2
        },
        {
            date: "2013-07-10",
            programs: 2
        },
        {
            date: "2013-07-11",
            programs: 4
        },
        {
            date: "2013-07-12",
            programs: 4
        },
        {
            date: "2013-07-13",
            programs: 0
        },
        {
            date: "2013-07-14",
            programs: 0
        },
        {
            date: "2013-07-15",
            programs: 2
        },
        {
            date: "2013-07-16",
            programs: 2
        },
        {
            date: "2013-07-17",
            programs: 1
        },
        {
            date: "2013-07-18",
            programs: 5
        },
        {
            date: "2013-07-19",
            programs: 1
        },
        {
            date: "2013-07-20",
    ...