JSFiddle - React, Tailwind, and code Playground

by Iblasi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
    <div id="body">
				<div id="D3JS_graph">
            <div id="D3JS_graph_plot" ></div>
        </div>
    </div>
 	</body>

CSS

body{
    font: 12px Arial, Helvetica, sans-serif;
}

#body{
    margin:  0;
    padding: 0;
    position: absolute;
    width :800px;
    height:500px;
}

#D3JS_graph{
    width :800px;
    height:500px;
}

#D3JS_graph_plot{
    width :100%;
    height:100%;
    top:5%;
}

.axis path,
.axis line{
  fill: none;
  stroke: black;
}

.tick line{
    opacity: 1;
    stroke-linecap:round;
    stroke-dasharray:2, 3;
    stroke:grey;
}

JavaScript

var timestamp_last = (Math.floor(Date.now() / (1000 * 60 * 15)) * (60 * 15));
console.log('timestamp_last: ' + timestamp_last);
console.log('Random: ' + Math.sin(timestamp_last));

setInterval(function(){
  //var timestamp_update = (Math.floor(Date.now() / (1000 * 60 * 15)) * (60 * 15));
  var timestamp_update = timestamp_last + (60 * 15);	// Trick not to wait during 15 min

  if (timestamp_last  !=  timestamp_update){
    timestamp_last = timestamp_update;
    console.log('timestamp_last: ' + timestamp_last);
    D3JS_Update_fig(timestamp_last)
  }
},15000);

    
var D3JS_xscale, D3JS_yscale, SAFIP_width;
var D3JS_lower_x_Axis;
var D3JSP_line_function;
var D3JS_tickFmt = d3.time.format("%H:%M");
var D3JS_array_of_lines =[];//en este array guardamos todas las lineas organizadas en objetos

$(window).load(function() {

      D3JS_Read_JSON_data()
      console.log('D3JS_array_of_lines: ')
      console.log(D3JS_array_of_lines)

      D3JS_yscale = d3.scale.linear().domain([-1,1]);

      var chart_width  = $('#D3JS_graph_plot').width(),
          chart_height = $('#D3JS_graph_plot').height();

      D3JS_plotgraph('#D3JS_graph_plot', chart_width, chart_height, D3JS_array_of_lines);

});

function D3JS_Read_JSON_data(){
  	// Define JSON meta parameters
    //var timestamp = data["meta"]["timestamp"]
		var timestamp = (Math.floor(Date.now() / (1000 * 60 * 15)) * (60 * 15));

    // Look for all data on JSON
    var props = ["dataA", "dataB"];
    for (var i = 0; i < props.length; i++) {
      prop = props[i];

      // Define object
      var array_line = [];
      for(var j = 0; j < 60; j++) {
        id_tmstmp = parseInt((timestamp + j*60)*1000);
        var obj={
                  value: Math.sin(id_tmstmp)*(1-i*0.5),
                  time : new Date(new Number(id_tmstmp)) // In miliseconds
              }
        array_line.push(obj);
      }
      D3JS_array_of_lines.push({name:prop, line:array_line});
    }
    return D3JS_array_of_lines;
}


function...