demo D205

Density over a histogram in htmx

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 htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

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

<div id="chart" style="height: 340px"></div>
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="histogram-with-curve-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="symbol">Symbol</th>
      <th data-field="desk">Desk</th>
      <th data-field="price">Price</th>
      <th data-field="bid">Bid</th>
      <th data-field="volume">Volume</th>
      <th data-field="notional">Notional</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="INS-0000000"><td>ELMW.G0</td><td>Rates</td><td>462.0258</td><td>461.2688</td><td>239420</td><td>110618217</td></tr>
    <tr data-id="INS-0000001"><td>RVNS.A1</td><td>Credit</td><td>241.8711</td><td>241.7978</td><td>119353</td><td>28868041</td></tr>
    <tr data-id="INS-0000002"><td>NRTH.E2</td><td>Commodities</td><td>98.9614</td><td>98.8353</td><td>160242</td><td>15857773</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

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

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('histogram-with-curve-table'), {
    columns: [
      { field: 'symbol', title: 'Symbol', layout: { width: 120 } },
      { field: 'desk', title: 'Desk', filter: { type: 'set' } },
      { field: 'price', title: 'Price', type: 'number' },
      { field: 'bid', title: 'Bid', type: 'number' },
      { field: 'volume', title: 'Volume', type: 'number' },
      { field: 'notional', title: 'Notional', type: 'number',
        format: { style: 'currency', currency: 'USD' }, total: 'sum' },
    ],
  });

  // curve draws a density estimate over the bars; buckets sets the bins. The
  // chart reads the same grid, so both follow the filters in place.
  createChart({ grid, container: '#chart', type: 'histogram', y: 'price', buckets: 20, curve: true });
</script>