JSFiddle - React, Tailwind, and code Playground

by TTTT

HTML

<script src="http://tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/data-noise-example.csv"></script>
<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/libraries/d3.csv.js"></script>
<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/libraries/d3.js"></script>
<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/libraries/d3.time.js"></script>
<link rel="stylesheet" href="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/style.css">
<link rel="stylesheet" href="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/1/style.svg.css">
		<div id="ChartContainer" class="TextCenter"></div>
		<br/>
		<div class="TextCenter">
			<span id="noiseValue"></span><br/><br/>
			<span id="coordValue"></span>
			<br/><br/>
			<a href="" onclick="ReDrawTest();return false">Test redraw</a>
		</div>

JavaScript

//Start example: http://mbostock.github.io/d3/talk/20111018/area-gradient.html

function parseDate(unix_timestamp){return new Date(unix_timestamp*1000);}
var svg, m, w, h, x, y, xAxis, yAxis, area, line, gradient, margin, varData,
//parseDate = d3.time.format('%Y-%m-%d').parse,
format = d3.time.format('%Y')

function CreateSvg()
{
	margin = {top: 79, right: 80, bottom: 160, left: 79};
	//m = [79, 80, 160, 79];
    w = 1280 - margin.right - margin.left;
    h = 800 - margin.top - margin.bottom;
    
	//Scales. Note the inverted domain for the y-scale: bigger is up!
	x = d3.time.scale().range([0, w]);
    y = d3.scale.linear().range([h, 0]);
    xAxis = d3.svg.axis().scale(x).orient('bottom').tickPadding(6).tickFormat(d3.time.format('%Y/%m/%d %H:%M:%S')).ticks(30); //.tickSize(-h, 0)
    yAxis = d3.svg.axis().scale(y).orient('left').tickSize(w).tickPadding(6);

	area = d3.svg.area()
		.interpolate('step-after')
		.x(function(d) { return x(d.date); })
		.y0(y(0))
		.y1(function(d) { return y(d.value); });

	line = d3.svg.line()
		.interpolate('step-after')
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y(d.value); });

	svg = d3.select('#ChartContainer').append('svg:svg')
		.attr('width', w + margin.right + margin.left)
		.attr('height', h + margin.top + margin.bottom)
		.append('svg:g')
		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	gradient = svg.append('svg:defs').append('svg:linearGradient')
		.attr('id', 'gradient')
		.attr('x2', '0%')
		.attr('y2', '100%');

	gradient.append('svg:stop')
		.attr('offset', '40%')
		.attr('stop-color', '#f00')
		.attr('stop-opacity', .5);

	gradient.append('svg:stop')
		.attr('offset', '100%')
		.attr('stop-color', '#0f0')
		.attr('stop-opacity', 1);

	svg.append('svg:clipPath')
		.attr('id', 'clip')
		.append('svg:rect')
		.attr('x', x(0))
		.attr('y', y(1))
		.attr('width', x(1) - x(0))
		.attr('height', y(0) - y(1));

	svg.append('svg:g')
		.attr('class', 'y...