demo D205

Density over a histogram: JavaScript Data Grid Demo

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…

The configuration

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

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

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = LatticeGrid.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.
  // buckets sets the number of histogram bins; curve: true overlays a kernel
  // density estimate drawn straight from the data, with no edges to choose.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'histogram',
    y: 'price',
    buckets: 20,
    curve: true,
    title: 'Price, with a density curve',
  });
</script>