JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.18.0.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JavaScript

// raw population data

let taipeiRain2022 = [0.1,0.1,0,0.1,0.5,8,5,0.1,0.1,0.1,6,0.1,0.5,0,0.1,0.1,6,3,0.5,0.1,32.5,44.5,0.1,3.5,0,0,0,0.1,5.5,6.5,0.1,11,3,29,3.5,0.5,0.1,6.5,0.5,11,0.5,0,0.1,14,38.5,0.5,0.5,1,7,15,27,26.5,22,34,0.5,0,0,0,0,0,0,0,0,0,0.1,21.5,0,0,0,0,0,0,0,0,0,4,0.5,0,0,2.5,4,21.5,0.1,0.5,14.5,42,75,11.5,0,0,0.1,23,10.5,0,0,0.1,0,0.1,0,0,0.1,0,0,57,0.1,0.1,0.1,0.1,4,2.5,0.1,0,0.1,5.5,6,0,0.1,0,0,0.1,6,24,0.1,1,0.1,0.1,0,0.1,0.1,4.5,13,40,4.5,27,15,43.5,8.5,0,0.5,0,1.5,0.5,0.1,50.5,123.5,68.5,45,0.5,0,0,8.5,0,0,0,0,0,15.5,49.5,47,7,2.5,1.5,11,0,1,8.5,6.5,0,0,0,0,0,0.1,1,47.5,18.5,4,13.5,0,0,0,0,12.5,0.1,7.5,46,0,3,0,0,0.1,0,0,0,0,0,0,0,7,3,27.5,0,0,0,0,0,0,0,1.5,13.5,0.5,0,69.5,27,0,46.5,0,0,0.1,0,0,0,0.1,0.1,0,0.1,8,1.5,0,0.1,0.1,0,0,0,0,9.5,45.5,0,0,9.5,0,0.5,1,2,31.5,35,37,1,3,0,0,0,0,33,47,26,25,7.5,0,0,1,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0,0,14.5,1,13.5,0.5,1,1.5,0.1,1.5,0.5,9,19,257,4.5,0.1,0.1,0,1,17.5,4,0,0,0,0.5,11,3,45,44,15.5,0.1,0,0.1,0.1,0.1,0.1,2,0,0,0.1,0,0,0,0,0.1,0,0,0,0.1,0.1,0,6.5,67,28.5,0.1,0,0,0.1,0.1,3.5,3,0.5,0,0.1,0.5,2.5,6,5,2,10,1.5,8,2.5,16.5,10,12.5,0.1,0,0,0.1,0,0,0,0,0,0,0.1,5.5,0.5,0.5,]

// describe how to display the data here
// add the raw data to the property called x
var hist1 = {
  x: taipeiRain2022,
  type: 'histogram',
  marker: {
    color: "#b0e7ff",
    line: {
      color: "#00b0fc",
      width: 2
    }
  },
  xbins: {
    end: Math.max(...taipeiRain2022),
    size: 30,
    start: 0
  }
};

// add your histogram to an array here
var data = [hist1];

// adjust some more controls over the display of your histogram
var layout = {
  bargap: 0.1,
  bargroupgap: 0,
  barmode: "overlay",
  title: "The amount of rain in Taipei on each day in 2022",
  xaxis: {
    title: "Rainfall (mm)"
  },
  yaxis: {
    title: "Days"
  }
};

// call Plotly to display your histogram
Plotly.newPlot('myDiv', data, layout);