plotly.jsでjitterグラフを書く

<div id="plot"></div>


<script>
const x = [0.5044528083813796, 0.49845872001357217, 0.4975016307388196, 0.5037510959564327, 0.4993219647633076, 0.50068155349606, 0.4977053870478837, 0.49718326250416833, 0.5007650843940975, 0.49773498865211385, 0.4951870445205525, 0.5046823671036484, 0.5011188386517081, 0.497133688616183, 0.49570519328218066, 0.49511830268928736, 0.4999495045661435, 0.5040788571123462, 0.49889019026034875, 0.4986065504776591, 0.5038025055164407, 0.49746132733779613, 0.4983757753323853, 0.4982843058261668, 0.4999374809403563, 0.5046458389327603, 0.5018365766216479, 0.5043385808190287, 0.5045928838954434, 0.5041046348766577]

const y = [0.06439827631207162, 0.8441770694666793, 0.6813720832439308, 0.35060322424095514, 0.467048139705174, 0.620017287284704, 0.43537821196553583, 0.6101188972669156, 0.10748073863992014, 0.1533138955978588, 0.924650205508083, 0.8318203188022997, 0.41327132327091964, 0.32264726003151, 0.981510178301915, 0.5302127996786907, 0.18248359923337865, 0.4986798917953422, 0.9969050555031109, 0.3475448875799958, 0.4952059981669982, 0.5242979748824359, 0.39555263242199123, 0.07230858219753711, 0.7025945737378793, 0.6630819589030152, 0.5002874785404181, 0.34318587894609187, 0.8780836274864896, 0.47641057294064315]

Plotly.newPlot("plot", [{
    type: "scatter",
    mode: "markers",
    x: x,
    y: y,
    marker: {
        size: 8,
        color: y,
        colorscale: "Portland",
    }
    }], {
    xaxis: {
        range: [0.4, 0.6],
        tickvals: [0.5],
        ticktext: ["Sample"],
        tickfont: {size: 18},
    },
    yaxis: {
        title: {text: "Value", font: {size: 18}}
    }
});
</script>

@sandbox_bp.route("/jitter_data")
def jitter_data():
    jitter = 0.01
    y1 = np.random.random(30).tolist()

    x1 = (0.5 + np.random.rand(len(y1)) * jitter - jitter / 2.0).tolist()

    y2 = np.random.random(30).tolist()
    x2 = (0.6 + np.random.rand(len(y2)) * jitter - jitter / 2.0).tolist()

    return jsonify({
        "x": x1 + x2,
        "y": y1 + y2,
    })