Non-uniform Distribution (graph)

Related: https://stackoverflow.com/a/73703230/5113030

by faither

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<span>Hint: Data labels on the right of the graph are selectable.</span>
<br />
<br />
<div id="graph"></div>

JavaScript

var data = [],
    data1 = [],
    data2 = [],
    data3 = [];

for (var i = 0; i < 1000; ++i)
{
  data.push(Math.pow(Math.random(), 0.01) * 1000);
  data1.push(Math.pow(Math.random(), 0.1) * 1000);
  data2.push(Math.pow(Math.random(), 0.5) * 1000);
  data3.push(Math.pow(Math.random(), 4) * 1000);
}

// Chart

Highcharts.chart('graph', {
  chart: {
    type: 'scatter',
    zoomType: 'xy'
  },

  title: {
    text: 'Non-uniform Distribution'
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    scatter: {
      marker: {
        radius: 1,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x} n, {point.y}'
      }
    }
  },

  series: [{
      name: 'Data (0.01)',
      data: data
    },
    {
      name: 'Data (0.1)',
      data: data1
    },
    {
      name: 'Data (0.5)',
      data: data2
    },
    {
      name: 'Data (4)',
      data: data3
    }
  ]

});