JSFiddle - React, Tailwind, and code Playground

by metalshark7

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="line"></div>

CSS

html,body,#line{
 width:100%;
 height:100%;  
 margin:0;
 padding: 0;
}

#line > svg{  
 display:block;
}
.color-us {
  stroke:blue
}
.color-bug {
  stroke:red
}

JavaScript

var chart = new tauCharts.Chart({
        type: 'line',
        x: ['x'],
        y: ['y'],
        color: 'type',

        guide: [
            {
                x: {autoScale: false},
                y: {autoScale: false, min: -1.5, max: 1.5},
                interpolate: 'basis'
            }
        ],

		settings: {
        	animationSpeed: 1
        },

        data: _.times(100, _.identity).reduce(function (memo, i) {
            var x = i * (Math.PI / 100);
            return memo.concat([
                {
                    x: x,
                    y: Math.sin(x),
                    type: 'sin'
                },
                {
                    x: x,
                    y: Math.cos(x),
                    type: 'cos'
                }
            ]);
        }, []),

        plugins: [
            tauCharts.api.plugins.get('trendline')({showPanel:false})
        ]
        });

    chart.renderTo('#line');

    setInterval(function () {
        var inst = chart;
        var data = inst.getData();
        var last = data[data.length - 1];
        var newX = last.x + (Math.PI / 100);
        data.shift();
        data.shift();
        data.push({x: newX, y: Math.sin(newX), type: 'sin'});
        data.push({x: newX, y: Math.cos(newX), type: 'cos'});
        inst.setData(data);
    }, 2000);