JSFiddle - React, Tailwind, and code Playground

by mdorfma2

HTML

<!-- D3.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <!-- jQuery -->  
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <!-- Plotly.js -->   
  <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>

JavaScript

var trace1 = {
  x: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105],
  y: [.57, .29, .26, .32, .38, .40, .42, .41, .39, .43, .46],
  name: 'Ratio',
  type: 'scatter'
};
var data = [trace1];
var layout = {
  title: 'Ratio of 4000\' Wind Speed to Summit Wind Speed Vs Summit Wind Speed',
  xaxis: {
    title: 'Average Summit Wind Speed (mph)',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  yaxis: {
    title: '4000\' Wind Speed/Summit Wind Speed',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  }
};
Plotly.newPlot('myDiv', data, layout);