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],
  y: [129,8,9,11,6,24,12,8],
  mode: 'markers+text',
  type: 'scatter',
  name: 'Team A',
  text: ['pudliszki','zakład','polska','polski','rząd','ketchup','firma','koncern'],
  marker:  {
    color: "#FFF",
    size: 65,
    line: {
      color: ["#F8B195","#F67280","#C06C84","#6C5B7B","#355C7D","#2ab7ca","#f6abb6","#6497b1"],
      width: 4
    }
  }
};

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);