svg data flow

dabblet.css

/* svg data flow */
path { stroke:red; stroke-width:1ex;
	animation:rotate 10s infinite }
@keyframes rotate {50%{transform:rotateX(180deg)}}
svg { position:absolute; top:0; left:0; width:100%; height:100%;
	transform:rotateX(180deg) }
body { position:relative; width:100%; height:0; padding-bottom:56.25%;
	overflow:visible }
	
*{background:rgba(255,0,0,.3)}
* {	perspective:200px; transform-style:preserve-3d }

dabblet.html

<svg viewBox="-50 -50 100 100"/>

dabblet.js

Plot = ([x, y]) => {    
	with (document)        
		E = e => createElement(e),        
		Q = s => querySelector(s),        
		U = e => Q(e) || E(e),        
		s = U`svg`,        
		p = E`path`,        
		p.setAttribute('d', `m${30*Math.sin(x/Math.PI)} 0v${y/2}`),
		s.appendChild(p),        
		body.appendChild(s)
	return [x, y]}

////
(({0:data}) => data.split`
`
////
.map(s=>[
	+s.match(/T(\d+)/)[1],
	+s.match(/\d+$/)[0]
])
.map(Plot)
////
)`2017-05-12T14	65
2017-05-12T15	87
2017-05-12T16	76
2017-05-12T17	70
2017-05-12T18	50
2017-05-12T19	41
2017-05-12T20	44
2017-05-12T21	49
2017-05-12T22	46
2017-05-12T23	37
2017-05-13T00	29
2017-05-13T01	28
2017-05-13T02	32
2017-05-13T03	31
2017-05-13T04	78
2017-05-13T05	80
2017-05-13T06	61
2017-05-13T07	63
2017-05-13T08	65
2017-05-13T09	64
2017-05-13T10	62
2017-05-13T11	56
2017-05-13T12	58
2017-05-13T13	63
2017-05-13T14	81
2017-05-13T15	100
2017-05-13T16	92
2017-05-13T17	80
2017-05-13T18	50
2017-05-13T19	45
2017-05-13T20	46
2017-05-13T21	54
2017-05-13T22	53
2017-05-13T23	42
2017-05-14T00	33
2017-05-14T01	27
2017-05-14T02	29
2017-05-14T03	26
2017-05-14T04	72
2017-05-14T05	86
2017-05-14T06	64
2017-05-14T07	60
2017-05-14T08	60
2017-05-14T09	60
2017-05-14T10	59
2017-05-14T11	55
2017-05-14T12	57
2017-05-14T13	65
2017-05-14T14	79
2017-05-14T15	100
2017-05-14T16	91
2017-05-14T17	82
2017-05-14T18	55
2017-05-14T19	49
2017-05-14T20	50
2017-05-14T21	48
2017-05-14T22	43
2017-05-14T23	32
2017-05-15T00	28
2017-05-15T01	27
2017-05-15T02	20
2017-05-15T03	33
2017-05-15T04	61
2017-05-15T05	58
2017-05-15T06	51
2017-05-15T07	54
2017-05-15T08	48
2017-05-15T09	43
2017-05-15T10	41
2017-05-15T11	41
2017-05-15T12	41
2017-05-15T13	43
2017-05-15T14	50
2017-05-15T15	57
2017-05-15T16	50
2017-05-15T17	46
2017-05-15T18	39
2017-05-15T19	36
2017-05-15T20	39
2017-05-15T21	39
2017-05-15T22	37
2017-05-15T23	32
2017-05-16T00	24
2017-05-16T01	20
2017-05-16T02	27
2017-05-16T03	30
2017-05-16T04	66
2017-05-16T05	68
2017-05-16T06	66
2017-05-16T07	70
2017-05-16T08	57
2017-05-16T09	52
2017-05-16T10	42
2017-05-16T11	41
2017-05-16T12	44
2017-05-16T13	42
2017-05-16T14	48
2017-05-16T15	51
2017-05-16T16	44
2017-05-16T17	39
2017-05-16T18	39
2017-05-16T19	36
2017-05-16T20	39
2017-05-16T21	41
2017-05-16T22	36
2017-05-16T23	29
2017-05-17T00	24
2017-05-17T01	16
2017-05-17T02	20
2017-05-17T03	34
2017-05-17T04	68
2017-05-17T05	63
2017-05-17T06	58
2017-05-17T07	66
2017-05-17T08	54
2017-05-17T09	48
2017-05-17T10	40
2017-05-17T11	40
2017-05-17T12	39
2017-05-17T13	38
2017-05-17T14	42
2017-05-17T15	47
2017-05-17T16	40
2017-05-17T17	36
2017-05-17T18	36
2017-05-17T19	36
2017-05-17T20	38
2017-05-17T21	40
2017-05-17T22	35
2017-05-17T23	30
2017-05-18T00	25
2017-05-18T01	20
2017-05-18T02	23
2017-05-18T03	27
2017-05-18T04	59
2017-05-18T05	63
2017-05-18T06	55
2017-05-18T07	53
2017-05-18T08	50
2017-05-18T09	41
2017-05-18T10	39
2017-05-18T11	35
2017-05-18T12	37
2017-05-18T13	39
2017-05-18T14	44
2017-05-18T15	45
2017-05-18T16	40
2017-05-18T17	36
2017-05-18T18	35
2017-05-18T19	35
2017-05-18T20	38
2017-05-18T21	39
2017-05-18T22	37
2017-05-18T23	34
2017-05-19T00	26
2017-05-19T01	23
2017-05-19T02	19
2017-05-19T03	39
2017-05-19T04	71
2017-05-19T05	67
2017-05-19T06	70
2017-05-19T07	65
2017-05-19T08	52
2017-05-19T09	46
2017-05-19T10	40
2017-05-19T11	40
2017-05-19T12	40`

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"javascript"}