demo D201

Is this column normal? in ESM

A Q-Q plot against a line through the quartiles

type: 'qq', y

This draws a Q-Q plot of a column against a line through its quartiles, to judge whether it is normally distributed. It answers 'is this column normal' visually, so you can see how far the data departs from the assumption before relying on it.

Building…

Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div id="grid" style="height: 340px"></div>
<div id="chart" style="height: 340px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';

  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'symbol', title: 'Symbol' },
      { field: 'desk', title: 'Desk', filter: { type: 'set' } },
      { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
      { field: 'bid', title: 'Bid', type: 'number', format: { decimals: 4 } },
      { field: 'ask', title: 'Ask', type: 'number', format: { decimals: 4 } },
      { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
      { field: 'notional', title: 'Notional', type: 'number',
        format: { style: 'currency', currency: 'USD' }, total: 'sum' },
    ],
    rows,  // instruments: symbol, desk, price, bid, ask, volume, notional
  });

  // A chart reads the grid's filtered rows and redraws when the grid changes.
  // A Q-Q plot reads y alone: points on the line are normally distributed.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'qq',
    y: 'price',
    title: 'Q-Q plot of price',
  });
</script>