JSFiddle - React, Tailwind, and code Playground

by mdorfma2

HTML

<!-- Numeric.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  
  <div id="MtWashSummit" style="width: 480px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="5300ft" style="width: 480px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="4000ft" style="width: 480px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JavaScript

var trace1 = {
  r: [20.0, 21.4, 22.0, 28.2, 25.4, 30.1, 42.6, 31.1],
  t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
  marker: {color: 'rgb(106,81,163)'},
  type: 'area'
};

var data = [trace1];

var layout = {
  title: 'Mount Washington Summit',
  font: {size: 16},
  showlegend: false,
  radialaxis: {ticksuffix: ' mph'},
  orientation: 270
};

Plotly.newPlot('MtWashSummit', data, layout);

var trace2 = {
  r: [3.7, 4.2, 3.4, 4.4 , 5.3 , 7.5 , 8.2 , 7 ],
  t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
  marker: {color: 'rgb(106,81,163)'},
  type: 'area'
};

var data = [trace2];

var layout = {
  title: '5300 Ft, Mount Washington Auto Road',
  font: {size: 16},
  showlegend: false,
  radialaxis: {ticksuffix: ' mph'},
  orientation: 270
};

Plotly.newPlot('5300ft', data, layout);

var trace3 = {
  r: [2.8, 2.4, 2.8, 3.0 , 4.0 , 6.7 , 7.3 , 16.3 ],
  t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
  marker: {color: 'rgb(106,81,163)'},
  type: 'area'
};

var data = [trace3];

var layout = {
  title: '4000 Ft, Mount Washington Auto Road',
  font: {size: 16},
  showlegend: false,
  radialaxis: {ticksuffix: ' mph'},
  orientation: 270
};

Plotly.newPlot('4000ft', data, layout);