demo D201

Is this column normal? in Web Component

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 web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

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

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

<div id="chart" style="height: 340px"></div>
<lattice-grid row-key="id" style="display: block; height: 320px; margin-top: 14px"></lattice-grid>

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

  const el = document.querySelector('lattice-grid');
  el.config = {
    columns: [
      { field: 'symbol', title: 'Symbol', layout: { pin: 'start', width: 120 } },
      { 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' },
    ],
  };
  el.rows = rows;  // an array of instrument records

  // A quantile-quantile plot: points on the line are normal, and the reference
  // runs through the quartiles rather than a least-squares fit. The chart reads
  // el.grid, the live grid inside the element, so it follows the filtered rows.
  createChart({ grid: el.grid, container: '#chart', type: 'qq', y: 'price' });
</script>