How to Calculate and Plot the Fitted Straight Line on a Probability Plot?

Question

I am currently working on plotting a Probability Plot by using Plotly.JS , where the percentiles are represented on the y-axis and the corresponding values are plotted on the x-axis. I am aiming to create a plot that includes a fitted straight line, similar to the example attached below:

Normal Probability Plot

I would greatly appreciate any guidance or insights on how to calculate and plot this fitted straight line on a Probability Plot. Specifically, I am interested in understanding the mathematical calculations or algorithms involved in generating such a line.

Thank you in advance for your help!

I tried multiple distributions to get the fitted line but did not any solution.

score 0 · Answer 1 · answered Jul 15 '23 at 18:30

I was waiting for Someone to answer this question but no one answer this question. So After Too much Trials, I got the solution. Below is the Code:

This is a React component called **Normal Probability Plot** that calculates and plots a fitted straight line on a probability plot. Here's a line-by-line explanation of the code:

import React from "react";
import Plot from "react-plotly.js";
import { calculatePercentiles, NormSInv } from "../utils/statistics";
import jStat from "jStat";

These are import statements for the required dependencies. React is imported from the React library, Plot is imported from the react-plotly.js library, calculatePercentiles this method calculate Percentiles on Rank Bases, Sort the Array in Assending Order use Formula (i-0.5)/n and NormSInv is inverse of Standard Normal Distribution are imported from a custom statistics utility file, and jStat is imported from the jStat library.

const NormalProbabilityPlot = ({ data }) => {
  const percentiles = calculatePercentiles(data); //Return Values as [x, percentile]
  const x = percentiles.map((v) => v[0]);
  const y = percentiles.map((v) => v[1]); //Percentile as Y

This defines a functional component called NormalProbabilityPlot that takes a data prop as input. Inside the component, calculatePercentiles function is used to calculate the percentiles of the data, and x and y are extracted from the percentiles.

const newX = y.map((v) => jStat.normal.inv(v, jStat.mean(x), jStat.stdev(x)));

const theoreticalQuantiles = y.map((v) =>
  NormSInv(v, jStat.mean(x), jStat.stdev(x))
);

These lines calculate the theoretical quantiles using the jStat library. The newX array represents the values on the x-axis of the plot, while theoreticalQuantiles represents the theoretical quantiles corresponding to the percentiles y.

function convertRange(value, fromRange, toRange) {
  var [fromMin, fromMax] = fromRange;
  var [toMin, toMax] = toRange;
  var convertedValue =
    ((value - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;

  return convertedValue;
}

This defines a utility function convertRange that converts a value from one range to another range. It takes a value, fromRange, and toRange as arguments and returns the converted value. This Method Mainly used to Adjust Z-Score to Range of Percentile

const adjustedPercentile = theoreticalQuantiles.map((v) =>
  convertRange(
    v,
    [Math.min(...theoreticalQuantiles), Math.max(...theoreticalQuantiles)],
    [Math.min(...y.map((v) => v * 100)), Math.max(...y.map((v) => v * 100))]
  )
);

This line applies the convertRange function to each value in theoreticalQuantiles array to adjust the percentile values to the desired range.

return (
  <Plot
    data={[
      {
        x,
        y: adjustedPercentile,
        type: "scatter",
        mode: "markers",

        marker: {
          symbol: "cross",
          size: 6,
        },
        hovertemplate: labelsActualData,
      },
      {
        x: newX,
        y: adjustedPercentile,
        type: "scatter",
        mode: "line ",
        marker: {
          symbol: "cross",
          size: 6,
        },
        hovertemplate: theoreticalDataLabel,
      },
    ]}
    layout={{
      grid: {
        ygap: 0.3,
      },
      xaxis: {
        title: "Values",
        visible: false,
      },
      yaxis: {
        title: "Percentage",
        tickvals: [1, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99],
        range: [0, 100],
      },
      showlegend: false,
      autosize: true,
    }}
  />
);

This block returns the Plot component from react-plotly.js that renders the probability plot. It consists of two scatter plots, one for the actual data points and another for the fitted line. The layout object defines the appearance and configuration of the plot.

This component can be used in a React application to display a probability plot with a fitted straight line based on the provided data.

How to Calculate and Plot the Fitted Straight Line on a Probability Plot?

1 Answers1