Comparing Quantiles for Distribution

Examples of Linear fits are the quantile-quantile (q-q) plot which is a graphical technique for determining if two data sets come from populations with a common distribution. A q-q plot is a plot of the quantiles of the first data set against the quantiles of the second data set. Also, Quantile regression models which is the relationship between a set of predictor (independent) variables and specific percentiles (or "quantiles") of a target (dependent) variable, most often the median.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
Edit this code: edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "mpg", "cyl", "disp", "hp", "drat", "wt", "qsec", "vs", "am", "gear", "carb"],
        [ "Mazda RX4", 21, 6, 160, 110, 3.9, 2.62, 16.46, 0, 1, 4, 4],
        [ "Mazda RX4 Wag", 21, 6, 160, 110, 3.9, 2.875, 17.02, 0, 1, 4, 4],
        [ "Datsun 710", 22.8, 4, 108, 93, 3.85, 2.32, 18.61, 1, 1, 4, 1],
        [ "Hornet 4 Drive", 21.4, 6, 258, 110, 3.08, 3.215, 19.44, 1, 0, 3, 1],
        [ "Hornet Sportabout", 18.7, 8, 360, 175, 3.15, 3.44, 17.02, 0, 0, 3, 2],
        [ "Valiant", 18.1, 6, 225, 105, 2.76, 3.46, 20.22, 1, 0, 3, 1],
        [ "Duster 360", 14.3, 8, 360, 245, 3.21, 3.57, 15.84, 0, 0, 3, 4],
        [ "Merc 240D", 24.4, 4, 146.7, 62, 3.69, 3.19, 20, 1, 0, 4, 2],
        [ "Merc 230", 22.8, 4, 140.8, 95, 3.92, 3.15, 22.9, 1, 0, 4, 2],
        [ "Merc 280", 19.2, 6, 167.6, 123, 3.92, 3.44, 18.3, 1, 0, 4, 4],
        [ "Merc 280C", 17.8, 6, 167.6, 123, 3.92, 3.44, 18.9, 1, 0, 4, 4],
        [ "Merc 450SE", 16.4, 8, 275.8, 180, 3.07, 4.07, 17.4, 0, 0, 3, 3],
        [ "Merc 450SL", 17.3, 8, 275.8, 180, 3.07, 3.73, 17.6, 0, 0, 3, 3],
        [ "Merc 450SLC", 15.2, 8, 275.8, 180, 3.07, 3.78, 18, 0, 0, 3, 3],
        [ "Cadillac Fleetwood", 10.4, 8, 472, 205, 2.93, 5.25, 17.98, 0, 0, 3, 4],
        [ "Lincoln Continental", 10.4, 8, 460, 215, 3, 5.424, 17.82, 0, 0, 3, 4],
        [ "Chrysler Imperial", 14.7, 8, 440, 230, 3.23, 5.345, 17.42, 0, 0, 3, 4],
        [ "Fiat 128", 32.4, 4, 78.7, 66, 4.08, 2.2, 19.47, 1, 1, 4, 1],
        [ "Honda Civic", 30.4, 4, 75.7, 52, 4.93, 1.615, 18.52, 1, 1, 4, 2],
        [ "Toyota Corolla", 33.9, 4, 71.1, 65, 4.22, 1.835, 19.9, 1, 1, 4, 1],
        [ "Toyota Corona", 21.5, 4, 120.1, 97, 3.7, 2.465, 20.01, 1, 0, 3, 1],
        [ "Dodge Challenger", 15.5, 8, 318, 150, 2.76, 3.52, 16.87, 0, 0, 3, 2],
        [ "AMC Javelin", 15.2, 8, 304, 150, 3.15, 3.435, 17.3, 0, 0, 3, 2],
        [ "Camaro Z28", 13.3, 8, 350, 245, 3.73, 3.84, 15.41, 0, 0, 3, 4],
        [ "Pontiac Firebird", 19.2, 8, 400, 175, 3.08, 3.845, 17.05, 0, 0, 3, 2],
        [ "Fiat X1-9", 27.3, 4, 79, 66, 4.08, 1.935, 18.9, 1, 1, 4, 1],
        [ "Porsche 914-2", 26, 4, 120.3, 91, 4.43, 2.14, 16.7, 0, 1, 5, 2],
        [ "Lotus Europa", 30.4, 4, 95.1, 113, 3.77, 1.513, 16.9, 1, 1, 5, 2],
        // ... (data truncated after 29 records for clarity)
      ]

      // Create the configuration for the graph
      var config = {
        "asSampleFactors": ["cyl"],
        "graphType": "Scatter2D",
        "showDecorations": true,
        "stringVariableFactors": ["cyl"],
        "title": "QQ-Plot",
        "xAxis": ["mpg"],
        "yAxis": ["mpg"]
      }

      // Event used to create graph (optional)
      var events = false

      // Functions after rendering graph
      var afterRender = [
        [
          "addQQPlot",
          []
        ]
      ]

      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events, false, afterRender);

    </script>

  </body>

</html>
Edit this code: edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "y" : {
            "data" : [
              [21,6,160,110,3.9,2.62,16.46,0,1,4,4],
              [21,6,160,110,3.9,2.875,17.02,0,1,4,4],
              [22.8,4,108,93,3.85,2.32,18.61,1,1,4,1],
              [21.4,6,258,110,3.08,3.215,19.44,1,0,3,1],
              [18.7,8,360,175,3.15,3.44,17.02,0,0,3,2],
              [18.1,6,225,105,2.76,3.46,20.22,1,0,3,1],
              [14.3,8,360,245,3.21,3.57,15.84,0,0,3,4],
              [24.4,4,146.7,62,3.69,3.19,20,1,0,4,2],
              [22.8,4,140.8,95,3.92,3.15,22.9,1,0,4,2],
              [19.2,6,167.6,123,3.92,3.44,18.3,1,0,4,4],
              [17.8,6,167.6,123,3.92,3.44,18.9,1,0,4,4],
              [16.4,8,275.8,180,3.07,4.07,17.4,0,0,3,3],
              [17.3,8,275.8,180,3.07,3.73,17.6,0,0,3,3],
              [15.2,8,275.8,180,3.07,3.78,18,0,0,3,3],
              [10.4,8,472,205,2.93,5.25,17.98,0,0,3,4],
              [10.4,8,460,215,3,5.424,17.82,0,0,3,4],
              [14.7,8,440,230,3.23,5.345,17.42,0,0,3,4],
              [32.4,4,78.7,66,4.08,2.2,19.47,1,1,4,1],
              [30.4,4,75.7,52,4.93,1.615,18.52,1,1,4,2],
              [33.9,4,71.1,65,4.22,1.835,19.9,1,1,4,1],
              [21.5,4,120.1,97,3.7,2.465,20.01,1,0,3,1],
              [15.5,8,318,150,2.76,3.52,16.87,0,0,3,2],
              [15.2,8,304,150,3.15,3.435,17.3,0,0,3,2],
              [13.3,8,350,245,3.73,3.84,15.41,0,0,3,4],
              [19.2,8,400,175,3.08,3.845,17.05,0,0,3,2],
              [27.3,4,79,66,4.08,1.935,18.9,1,1,4,1],
              [26,4,120.3,91,4.43,2.14,16.7,0,1,5,2],
              [30.4,4,95.1,113,3.77,1.513,16.9,1,1,5,2],
              [15.8,8,351,264,4.22,3.17,14.5,0,1,5,4],
              [19.7,6,145,175,3.62,2.77,15.5,0,1,5,6],
              [15,8,301,335,3.54,3.57,14.6,0,1,5,8],
              [21.4,4,121,109,4.11,2.78,18.6,1,1,4,2]
            ],
            "smps" : ["mpg","cyl","disp","hp","drat","wt","qsec","vs","am","gear","carb"],
            "vars" : ["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"]
         }
      }

      // Create the configuration for the graph
      var config = {
        "asSampleFactors": ["cyl"],
        "graphType": "Scatter2D",
        "showDecorations": true,
        "stringVariableFactors": ["cyl"],
        "title": "QQ-Plot",
        "xAxis": ["mpg"],
        "yAxis": ["mpg"]
      }

      // Event used to create graph (optional)
      var events = false

      // Functions after rendering graph
      [
        [
          "addQQPlot",
          []
        ]
      ]
      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "linearfit1",
    data = {
      "y": {
        "data": [
          [21, 6, 160, 110, 3.9, 2.62, 16.46, 0, 1, 4, 4],
          [21, 6, 160, 110, 3.9, 2.875, 17.02, 0, 1, 4, 4],
          [22.8, 4, 108, 93, 3.85, 2.32, 18.61, 1, 1, 4, 1],
          [21.4, 6, 258, 110, 3.08, 3.215, 19.44, 1, 0, 3, 1],
          [18.7, 8, 360, 175, 3.15, 3.44, 17.02, 0, 0, 3, 2],
          [18.1, 6, 225, 105, 2.76, 3.46, 20.22, 1, 0, 3, 1],
          [14.3, 8, 360, 245, 3.21, 3.57, 15.84, 0, 0, 3, 4],
          [24.4, 4, 146.7, 62, 3.69, 3.19, 20, 1, 0, 4, 2],
          [22.8, 4, 140.8, 95, 3.92, 3.15, 22.9, 1, 0, 4, 2],
          [19.2, 6, 167.6, 123, 3.92, 3.44, 18.3, 1, 0, 4, 4],
          [17.8, 6, 167.6, 123, 3.92, 3.44, 18.9, 1, 0, 4, 4],
          [16.4, 8, 275.8, 180, 3.07, 4.07, 17.4, 0, 0, 3, 3],
          [17.3, 8, 275.8, 180, 3.07, 3.73, 17.6, 0, 0, 3, 3],
          [15.2, 8, 275.8, 180, 3.07, 3.78, 18, 0, 0, 3, 3],
          [10.4, 8, 472, 205, 2.93, 5.25, 17.98, 0, 0, 3, 4],
          [10.4, 8, 460, 215, 3, 5.424, 17.82, 0, 0, 3, 4],
          [14.7, 8, 440, 230, 3.23, 5.345, 17.42, 0, 0, 3, 4],
          [32.4, 4, 78.7, 66, 4.08, 2.2, 19.47, 1, 1, 4, 1],
          [30.4, 4, 75.7, 52, 4.93, 1.615, 18.52, 1, 1, 4, 2],
          [33.9, 4, 71.1, 65, 4.22, 1.835, 19.9, 1, 1, 4, 1],
          [21.5, 4, 120.1, 97, 3.7, 2.465, 20.01, 1, 0, 3, 1],
          [15.5, 8, 318, 150, 2.76, 3.52, 16.87, 0, 0, 3, 2],
          [15.2, 8, 304, 150, 3.15, 3.435, 17.3, 0, 0, 3, 2],
          [13.3, 8, 350, 245, 3.73, 3.84, 15.41, 0, 0, 3, 4],
          [19.2, 8, 400, 175, 3.08, 3.845, 17.05, 0, 0, 3, 2],
          [27.3, 4, 79, 66, 4.08, 1.935, 18.9, 1, 1, 4, 1],
          [26, 4, 120.3, 91, 4.43, 2.14, 16.7, 0, 1, 5, 2],
          [30.4, 4, 95.1, 113, 3.77, 1.513, 16.9, 1, 1, 5, 2],
          [15.8, 8, 351, 264, 4.22, 3.17, 14.5, 0, 1, 5, 4],
          [19.7, 6, 145, 175, 3.62, 2.77, 15.5, 0, 1, 5, 6],
          [15, 8, 301, 335, 3.54, 3.57, 14.6, 0, 1, 5, 8],
          [21.4, 4, 121, 109, 4.11, 2.78, 18.6, 1, 1, 4, 2]
        ],
        "smps": ["mpg", "cyl", "disp", "hp", "drat", "wt", "qsec", "vs", "am", "gear", "carb"],
        "vars": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"]
      }
    },
    config = {
      "asSampleFactors": ["cyl"],
      "graphType": "Scatter2D",
      "showDecorations": True,
      "stringVariableFactors": ["cyl"],
      "title": "QQ-Plot",
      "xAxis": ["mpg"],
      "yAxis": ["mpg"]
    },
    after_render = [
      [
        "addQQPlot",
        []
      ]
    ],
    width = 600,
    height = 600
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder 
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "linearfit1",
    data = {
      "y": {
        "data": [
          [21, 6, 160, 110, 3.9, 2.62, 16.46, 0, 1, 4, 4],
          [21, 6, 160, 110, 3.9, 2.875, 17.02, 0, 1, 4, 4],
          [22.8, 4, 108, 93, 3.85, 2.32, 18.61, 1, 1, 4, 1],
          [21.4, 6, 258, 110, 3.08, 3.215, 19.44, 1, 0, 3, 1],
          [18.7, 8, 360, 175, 3.15, 3.44, 17.02, 0, 0, 3, 2],
          [18.1, 6, 225, 105, 2.76, 3.46, 20.22, 1, 0, 3, 1],
          [14.3, 8, 360, 245, 3.21, 3.57, 15.84, 0, 0, 3, 4],
          [24.4, 4, 146.7, 62, 3.69, 3.19, 20, 1, 0, 4, 2],
          [22.8, 4, 140.8, 95, 3.92, 3.15, 22.9, 1, 0, 4, 2],
          [19.2, 6, 167.6, 123, 3.92, 3.44, 18.3, 1, 0, 4, 4],
          [17.8, 6, 167.6, 123, 3.92, 3.44, 18.9, 1, 0, 4, 4],
          [16.4, 8, 275.8, 180, 3.07, 4.07, 17.4, 0, 0, 3, 3],
          [17.3, 8, 275.8, 180, 3.07, 3.73, 17.6, 0, 0, 3, 3],
          [15.2, 8, 275.8, 180, 3.07, 3.78, 18, 0, 0, 3, 3],
          [10.4, 8, 472, 205, 2.93, 5.25, 17.98, 0, 0, 3, 4],
          [10.4, 8, 460, 215, 3, 5.424, 17.82, 0, 0, 3, 4],
          [14.7, 8, 440, 230, 3.23, 5.345, 17.42, 0, 0, 3, 4],
          [32.4, 4, 78.7, 66, 4.08, 2.2, 19.47, 1, 1, 4, 1],
          [30.4, 4, 75.7, 52, 4.93, 1.615, 18.52, 1, 1, 4, 2],
          [33.9, 4, 71.1, 65, 4.22, 1.835, 19.9, 1, 1, 4, 1],
          [21.5, 4, 120.1, 97, 3.7, 2.465, 20.01, 1, 0, 3, 1],
          [15.5, 8, 318, 150, 2.76, 3.52, 16.87, 0, 0, 3, 2],
          [15.2, 8, 304, 150, 3.15, 3.435, 17.3, 0, 0, 3, 2],
          [13.3, 8, 350, 245, 3.73, 3.84, 15.41, 0, 0, 3, 4],
          [19.2, 8, 400, 175, 3.08, 3.845, 17.05, 0, 0, 3, 2],
          [27.3, 4, 79, 66, 4.08, 1.935, 18.9, 1, 1, 4, 1],
          [26, 4, 120.3, 91, 4.43, 2.14, 16.7, 0, 1, 5, 2],
          [30.4, 4, 95.1, 113, 3.77, 1.513, 16.9, 1, 1, 5, 2],
          [15.8, 8, 351, 264, 4.22, 3.17, 14.5, 0, 1, 5, 4],
          [19.7, 6, 145, 175, 3.62, 2.77, 15.5, 0, 1, 5, 6],
          [15, 8, 301, 335, 3.54, 3.57, 14.6, 0, 1, 5, 8],
          [21.4, 4, 121, 109, 4.11, 2.78, 18.6, 1, 1, 4, 2]
        ],
        "smps": ["mpg", "cyl", "disp", "hp", "drat", "wt", "qsec", "vs", "am", "gear", "carb"],
        "vars": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"]
      }
    },
    config = {
      "asSampleFactors": ["cyl"],
      "graphType": "Scatter2D",
      "showDecorations": True,
      "stringVariableFactors": ["cyl"],
      "title": "QQ-Plot",
      "xAxis": ["mpg"],
      "yAxis": ["mpg"]
    },
    after_render = [
      [
        "addQQPlot",
        []
      ]
    ],
    width = 600,
    height = 600
  )
)
CanvasXpress Logo

CanvasXpress a stand-alone JavaScript Library for Data Analytics. Built for the purpose of reproducible research with a sophisticated and unobtrusive user interface. Full and effortless audit trail of data, configuration and all user interactions in every visualization.

©2025 All Rights Reserved. CanvasXpress®

Documentation
Examples Docs Learn Api Spec Quality Accessibility Updates Changelog
Company
Contact License Governance Support Regulated & GxP Admin
Information
Terms of Use Privacy policy References
⇧