JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
- drag to zoom in<br>
- double click to zoom out<br> 
- click on squares to show and hide each line<br><br><br>

<div id="Host"><div class="hostOverview"><div class="charts-wrapper">

    <div id="HadiSampleChart" class="chart">
      <svg class=""></svg> 
    </div>

copywrite: hadi honarvar nazari

</div></div></div>

CSS

#Host .hostOverview .charts-wrapper {
      position: relative;
      padding-right: 30px; }
      #Host .hostOverview .charts-wrapper .title {
        font-size: 16px;
        padding: 2em 0 1em 0;
        line-height: 24px; }
        #Host .hostOverview .charts-wrapper .title i {
          vertical-align: bottom;
          color: #009DDC; }
      #Host .hostOverview .charts-wrapper .chart {
        height: 450px; }
        #Host .hostOverview .charts-wrapper .chart .overlay {
          fill: none;
          pointer-events: all; }
        #Host .hostOverview .charts-wrapper .chart .focus circle {
          fill: none; }
        #Host .hostOverview .charts-wrapper .chart .line {
          fill: none;
          cursor: pointer;
          stroke-width: 2px; }
        #Host .hostOverview .charts-wrapper .chart .crossLine {
          stroke: gray;
          stroke-width: 0.3; }
        #Host .hostOverview .charts-wrapper .chart .grid line {
          stroke: lightgrey;
          stroke-opacity: 0.7;
          shape-rendering: crispEdges; }
        #Host .hostOverview .charts-wrapper .chart .grid path {
          stroke-width: 0; }
        #Host .hostOverview .charts-wrapper .chart .tooltip-obj {
          transition: transform .2s ease-out; }
          #Host .hostOverview .charts-wrapper .chart .tooltip-obj .tooltip {
            display: block;
            border-radius: 2px;
            background: rgba(240, 240, 240, 0.6);
            width: 240px;
            padding: 4px 6px;
            font-size: 13px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
            #Host .hostOverview .charts-wrapper .chart .tooltip-obj .tooltip .time {
              font-weight: bold; }
            #Host .hostOverview .charts-wrapper .chart .tooltip-obj .tooltip .row .circle {
              display: inline-block;
              width: 7px;
              height: 7px;
              border-radius: 20px;
              margin-bottom: 1px; }
     ...

JavaScript

var data = [];
for(var i = -200; i < 200; ++i) {
    data.push({
      time: 1234567000+i*3000, 
      expandingSin: (Math.sin(i*0.3)*7000) * i*i ,
      concave: -Math.pow(Math.random()*20*i+10+i*80,2),
      arcTanConv: (Math.atan(-i)*300000000)+i*2200000+Math.random()*50000000,//-Math.pow(Math.random()*25*i+20+i*100,2),
      power3: Math.pow(Math.random()*10*i+30+i*60,3)/2500,
      convex: Math.pow(Math.random()*15*i+40+i*80,2), 
      sigmoid: (1/(1+Math.pow(Math.E,-i))*1000000000-500000000+Math.random()*50000000)
   })
}
var selector = "#HadiSampleChart"
var width = 800; 
//////////////////////////////////////////////////////////////

var lineChart = function (charData, selectorID, widthInput) {
		var data = charData;
		var	columnsArr = Object.keys(data[0]).filter(function(i) {return i != "time"});
        var colorsArr = ['#e2431e','#e7711b','#f1ca3a','#6f9654','#1c91c0','#43459d'] 
		var data_arr = columnsArr.map(function (e, i) {return [e, colorsArr[i]];}); // zip columns and colors array => [["ribin_odd","#009DDC"],["ribin_even","#E03A3E"],...]
					
		var margin = {top: 30, right: 70, bottom: 70, left: 20},
		    width = (widthInput)? widthInput - margin.left - margin.right:window.innerWidth - 330 - margin.left - margin.right,
		    height = 450 - margin.top - margin.bottom;

		// interpolate type - only change the value not key. 
		var d3Curve = {"curve":d3.curveMonotoneX};// {"curve":d3.curveStep};
		// set the ranges
		var x = d3.scaleLinear().range([0, width ]);
		var y = d3.scaleLinear().range([height, 0]);
		
		// instantiation 
		d3.select(selectorID).selectAll("svg").remove();
		d3.select(selectorID).append("svg");
		var svg = d3.select(selectorID).select("svg")
			    .attr("width", width + margin.left + margin.right)
			    .attr("height", height + margin.top + margin.bottom)
			.append("g")
			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		// clipPath - to crop lines when exceed beyound chart boundaries:...