JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JavaScript

var trace = {
  x: [167,4,6,6,4,90,6,6,9,3,11,8,6,6,0,0,6,0,0,0,37,6,0,41,4,10,1,0,0,0,0,2,0,10,4,0],
  y: [129,8,9,11,6,24,12,8,3,5,10,10,5,8,8,3,6,2,1,8,15,3,1,18,5,4,6,8,1,1,4,5,0,6,7,0],
  mode: 'markers',
  type: 'scatter',
  name: 'Team A',
  text: ['pudliszki','zakład','polska','polski','rząd','ketchup','firma','koncern','złoty','krobia','lato','duży','przemysł','sos','koncentrat','państwo','prywatyzacja','majątek','branża','pomidorowy','dobry','produkt','tytoniowy','pomidor','pierwszy','amerykański','cebula','smak','bank','gostyń','wszyscy','rok','osp','spożywczy','minuta','tłuszczowy'],
  marker: { size: 30,
  symbol : "square" ,
  color: ["#F8B195","#F67280","#C06C84","#6C5B7B","#355C7D","#2ab7ca","#f6abb6","#6497b1","#251e3e","#651e3e","#f6cd61","#63ace5","#f9caa7","#009688","#7bc043","#aaaaaa","#c99789","#ff6f69","#536872","#3c2f2f","#3c2f2f","#f37735","#d11141","#76b4bd","#ff3377","#29a8ab","#3d1e6d","#8d5524","#343d46","#8dbdff","#e3c9c9","#cecbcb","#cbdadb","#A7226E","#2F9599","#FF8C94"],
  opacity: 0.85
  }
};

var data = [ trace ];

var layout = {  
  autosize: false,
  width: 1200,
  height: 700,
  xaxis: {title : 'Liczba reakcji',
    range: [0, 180] 
  },
  yaxis: {title: 'Popularność',
    range: [0, 140]
  },
};

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