demo D205

Density over a histogram in Web Component

A kernel density estimate over the bars, so binning and data separate

curve: true, buckets

This draws a kernel density estimate over a histogram of the same column, so the smooth shape and the binning are kept separate. It shows the underlying distribution without being misled by the choice of bin widths.

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

  // buckets sets the bar count; curve overlays a density estimate that has no
  // bin edges, so the shape it shows does not depend on where the bins fell. The
  // chart reads el.grid, the live grid inside the element, so both follow the
  // filtered rows.
  createChart({ grid: el.grid, container: '#chart', type: 'histogram', y: 'price', buckets: 20, curve: true });
</script>