JSFiddle - React, Tailwind, and code Playground

by Nguyen Duong

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>
</html>

JavaScript

Plotly.d3.csv("https://raw.githubusercontent.com/nguyendn/visualization/master/ExcelFormattedGISTEMPData2CSV.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  
var trace1 = {
  type: "scatter",
  mode: "lines",
  x: unpack(rows, 'Year'),
  y: unpack(rows, 'Glob'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  x: unpack(rows, 'Year'),
  y: unpack(rows, 'NHem'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];
    
var layout = {
  title: 'Custom Range'
};

Plotly.newPlot('myDiv', data, layout);
})