<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [1,2,3,4];
const yArray = [10,20,30,40];
const trace1 = {
x: xArray,
y: yArray,
mode: 'markers',
marker: {
color: ['red', 'green', 'blue', 'orange'],
size: [20, 30, 40, 50]
}
};
const trace2 = {
x: [1, 2, 3, 4],
y: [15, 30, 45, 60],
mode: 'markers',
marker: {
color: 'rgb(31, 119, 180)',
size: 18,
symbol: ['circle', 'square', 'diamond', 'cross']
},
};
const data = [trace1, trace2];
const layout = {
title: "Plotting Bubbles"
};
Plotly.newPlot('myPlot', data, layout);
</script>