JSFiddle - React, Tailwind, and code Playground

by merillium

HTML

<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv1" class="plotly" align="center" style="width:1200px; height:750px;"></div>
  <div id="myDiv2" class="plotly" align="center" style="width:1200px; height:750px;"></div>
</body>

JavaScript

// Place urls for cvs files here
var url1 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ET.csv';
var x1SeriesName = 'datetime';
var y1SeriesName = 'ET';
var y1NameToBeDisplayed = 'ET';
var y1Mode = 'lines';


var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ndvi.csv';
var x2SeriesName = 'datetime';
var y2SeriesName = 'NDVI';
var y2NameToBeDisplayed = 'NDVI';
var y2Mode = 'lines';


//var url3 = 'XXXX';
//var url4 = 'XXXX';
//var url5 = 'XXXX';


// Section deals with buttons for time range selection
var selectorOptions = {
  buttons: [{
    step: 'month',
    stepmode: 'backward',
    count: 1,
    label: '1m'
  }, {
    step: 'month',
    stepmode: 'backward',
    count: 6,
    label: '6m'
  }, {
    step: 'year',
    stepmode: 'todate',
    count: 1,
    label: 'YTD'
  }, {
    step: 'year',
    stepmode: 'backward',
    count: 1,
    label: '1y'
  }, {
    step: 'all',
  }],
};

// set layout down here
var layout = {
  xaxis: {
    rangeselector: selectorOptions,
    rangeslider: {}
  },
  yaxis: {
    fixedrange: true,
    side: 'right'
  },
  showlegend: false
};

// set display options
var options ={
  showLink: false,
  displayModeBar: false
};

// Next piece of code deals with responsiveness
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
  HEIGHT_IN_PERCENT_OF_PARENT = 97;

var gd3_div1 = d3.select("div[id='myDiv1']")
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT + '%',
    'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
    height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
  });
  
var gd3_div2 = d3.select("div[id='myDiv2']")
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT + '%',
    'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
    height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
  });

var my_Div1 = gd3_div1.node();
var my_Div2 =...