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: [3,6,6,4,1094,59,5,77,93,79,79,12],
  y: [8,9,11,6,24,12,8,3,5,10,10,5],
  mode: 'markers',
  type: 'scatter',
  name: 'Team A',
  text: ["zakład","polska","polski","rząd","ketchup","firma","koncern","złoty","krobia","lato","duży","przemysł"],
  marker: { size: 30,
  symbol : "circle" ,
  color: ["#C06C84","#6C5B7B","#355C7D","#2ab7ca","#f6abb6","#6497b1","#251e3e","#651e3e","#f6cd61","#63ace5","#f9caa7","#009688","#7bc043"],
  opacity: 0.8
  }
};



var data = [ trace ];

var layout = {  
	autosize: true,
  //width: 1200,
  //height: 700,
  xaxis: {title : 'Liczba reakcji',
    range: [0, 1100] 
  },
  yaxis: {title: 'Popularność',
    range: [0, 30]
  },
};

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