JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<script src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script>
<div id="chart_div"></div>

JavaScript

/**
 * @params {[number, number][]} xyData
 */
function drawChart(xyData) {
  const chartRootEl = document.getElementById('chart_div');
  if (!chartRootEl) {
    throw new Error('not found #chart_div');
  }
  const data = [{
    x: xyData.map(i => i[0]),
    y: xyData.map(i => i[1]),
    type: 'scatter',
    mode: 'markers',
    marker: {size: 20},
  }];
  const layout = {
    title: 'X と Y の散布図',
    hovermode: 'closest',
    xaxis: {
      automargin: true,
      title: "X",
    },
    yaxis: {
      automargin: true,
      title: "Y",
    },
  };

  Plotly.newPlot(chartRootEl, data, layout);
}
document.addEventListener('DOMContentLoaded', () => drawChart(readData()))

function readData()
{
return [
    [141,962],
    [580,603],
    [890,697],
    [900,511],
    [739,414],
    [313,992],
    [256,809],
    [244,874],
    [256,18],
    [813,580],
    [727,761],
    [817,157],
    [880,3],
    [445,932],
    [87,749],
    [545,157],
    [596,890],
    [37,712],
    [447,546],
    [85,9],
    [798,441],
    [78,118],
    [475,768],
    [410,314],
    [478,577],
    [528,439],
    [185,481],
    [786,469],
    [297,549],
    [588,511],
    [822,527],
    [423,930],
    [561,210],
    [879,165],
    [924,431],
    [752,822],
    [794,328],
    [289,652],
    [389,868],
    [265,633],
    [769,232],
    [342,140],
    [780,82],
    [832,371],
    [280,892],
    [35,622],
    [537,462],
    [325,534],
    [791,930],
    [469,710],
    [47,36],
    [240,103],
    [472,301],
    [734,448],
    [213,894],
    [191,140],
    [501,116],
    [430,555],
    [80,605],
    [284,121],
    [564,93],
    [788,937],
    [755,132],
    [100,851],
    [620,607],
    [918,860],
    [252,475],
    [957,12],
    [325,929],
    [448,156],
    [868,576],
    [247,744],
    [901,450],
    [374,749],
    [231,812],
]



}