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="4000ft" style="width: 480px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JavaScript

var trace2 = {
  r: [1.8, 0.6, .7, 1.0 , 0.8 , 4.9 , 69.5 , 20.8 ],
  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: 'Prevailing Summit Wind Direction with NW Winds at 4000',
  font: {size: 16},
  showlegend: false,
  radialaxis: {ticksuffix: '%'},
  orientation: 270
};

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