Number

Statistics

LineUp-lite computes the following statistics for a numerical attribute:

export interface INumberStats extends IBoxPlot, INumericStats<number> {}

see INumberStats API Docs

Generator Function

The stats generator function has the following signature. It returns a function that can be used to compute statistics for a given array.

export function numberStatsGenerator(
  options: NumberStatsOptions = {}
): (arr: readonly number[] | Float32Array | Float64Array) => INumberStats;

see numberStatsGenerator API Docs

Example

Live Editor

// import { numberStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75]; const stats = compute(data); return <pre>{JSON.stringify(stats, null, 2)}</pre>; }

// import { numberStatsGenerator } from '@lineup-lite/components';

function Example() {
  const compute = numberStatsGenerator();
  const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75];
  const stats = compute(data);

  return <pre>{JSON.stringify(stats, null, 2)}</pre>;
}

Result

{
  "min": 1,
  "max": 98,
  "count": 19,
  "missing": 0,
  "items": [
    43,
    78,
    45,
    38,
    33,
    47,
    45,
    65,
    56,
    98,
    58,
    1,
    58,
    66,
    57,
    85,
    32,
    45,
    75
  ],
  "mean": 53.94736842105263,
  "variance": 454.04986149584494,
  "median": 56,
  "q1": 44,
  "q3": 65.5,
  "iqr": 21.5,
  "outlier": [
    1,
    98
  ],
  "whiskerHigh": 85,
  "whiskerLow": 32,
  "hist": [
    {
      "count": 1,
      "items": [
        1
      ],
      "x0": 1,
      "x1": 17.166666666666668,
      "label": "1 - 17.167",
      "color": "hsl(206, 64%, 29%)"
    },
    {
      "count": 2,
      "items": [
        32,
        33
      ],
      "x0": 17.166666666666668,
      "x1": 33.333333333333336,
      "label": "17.167 - 33.333",
      "color": "hsl(206, 64%, 40%)"
    },
    {
      "count": 6,
      "items": [
        38,
        43,
        45,
        45,
        45,
        47
      ],
      "x0": 33.333333333333336,
      "x1": 49.5,
      "label": "33.333 - 49.5",
      "color": "hsl(206, 64%, 51%)"
    },
    {
      "count": 5,
      "items": [
        56,
        57,
        58,
        58,
        65
      ],
      "x0": 49.5,
      "x1": 65.66666666666667,
      "label": "49.5 - 65.667",
      "color": "hsl(206, 64%, 62%)"
    },
    {
      "count": 3,
      "items": [
        66,
        75,
        78
      ],
      "x0": 65.66666666666667,
      "x1": 81.83333333333334,
      "label": "65.667 - 81.833",
      "color": "hsl(206, 64%, 73%)"
    },
    {
      "count": 2,
      "items": [
        85,
        98
      ],
      "x0": 81.83333333333334,
      "x1": 98,
      "label": "81.833 - 98",
      "color": "hsl(206, 64%, 84%)"
    }
  ],
  "flatMissing": 0,
  "flatItems": [
    43,
    78,
    45,
    38,
    33,
    47,
    45,
    65,
    56,
    98,
    58,
    1,
    58,
    66,
    57,
    85,
    32,
    45,
    75
  ],
  "depth": 1,
  "flatCount": 19,
  "maxBin": {
    "count": 6,
    "items": [
      38,
      43,
      45,
      45,
      45,
      47
    ],
    "x0": 33.333333333333336,
    "x1": 49.5,
    "label": "33.333 - 49.5",
    "color": "hsl(206, 64%, 51%)"
  }
}

Visualization

Cell

NumberBar React component, NumberColor React component, or NumberSymbol React component.

Live Editor

// import { numberStatsGenerator, NumberBar, NumberColor, NumberSymbol } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75]; const stats = compute(data); return ( <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gridGap: 10 }}> <NumberBar value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberColor value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberSymbol value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} /> {/* */} <NumberBar value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberColor value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberSymbol value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} /> {/* */} <NumberBar value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberColor value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} /> <NumberSymbol value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} /> </div> ); }

// import { numberStatsGenerator, NumberBar, NumberColor, NumberSymbol } from '@lineup-lite/components';

function Example() {
  const compute = numberStatsGenerator();
  const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75];
  const stats = compute(data);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gridGap: 10 }}>
      <NumberBar value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberColor value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberSymbol value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} />
      {/* */}
      <NumberBar value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberColor value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberSymbol value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} />
      {/* */}
      <NumberBar value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberColor value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} />
      <NumberSymbol value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} />
    </div>
  );
}

Result

43

43

43

78

78

78

45

45

45

Aggregation

Histogram React component or BoxPlot React component

Live Editor

// import { numberStatsGenerator, Histogram, BoxPlot } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75]; const stats = compute(data); return ( <div> <Histogram s={stats} style={{ height: 100 }} /> <BoxPlot s={stats} style={{ height: 100 }} /> </div> ); }

// import { numberStatsGenerator, Histogram, BoxPlot } from '@lineup-lite/components';

function Example() {
  const compute = numberStatsGenerator();
  const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75];
  const stats = compute(data);

  return (
    <div>
      <Histogram s={stats} style={{ height: 100 }} />
      <BoxPlot s={stats} style={{ height: 100 }} />
    </div>
  );
}

Result

​

Interactive Summary

FilterRangeHistogram React component or FilterRangeBoxPlot React component

Live Editor

// import { numberStatsGenerator, FilterRangeHistogram, FilterRangeBoxPlot } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75]; const stats = compute(data); const [filterValue, setFilter] = React.useState(null); const filtered = filterValue ? data.filter( (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1]) ) : data; const filteredStats = numberStatsGenerator({ min: stats.min, max: stats.max })(filtered); return ( <div> <FilterRangeHistogram s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} summary style={{ height: 100 }} /> <FilterRangeBoxPlot s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} summary style={{ height: 100 }} /> </div> ); }

// import { numberStatsGenerator, FilterRangeHistogram, FilterRangeBoxPlot } from '@lineup-lite/components';

function Example() {
  const compute = numberStatsGenerator();
  const data = [43, 78, 45, 38, 33, 47, 45, 65, 56, 98, 58, 1, 58, 66, 57, 85, 32, 45, 75];
  const stats = compute(data);

  const [filterValue, setFilter] = React.useState(null);
  const filtered = filterValue
    ? data.filter(
        (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1])
      )
    : data;
  const filteredStats = numberStatsGenerator({ min: stats.min, max: stats.max })(filtered);

  return (
    <div>
      <FilterRangeHistogram
        s={filteredStats}
        preFilter={stats}
        filterValue={filterValue}
        setFilter={setFilter}
        summary
        style={{ height: 100 }}
      />
      <FilterRangeBoxPlot
        s={filteredStats}
        preFilter={stats}
        filterValue={filterValue}
        setFilter={setFilter}
        summary
        style={{ height: 100 }}
      />
    </div>
  );
}

Result

​

Composite: Stacked Bar

StackedBar React component

Live Editor

// import { StackedBar } from '@lineup-lite/components'; function Example() { return ( <div> <StackedBar value={asStackedValue(0.5, [ { ratio: 0.5, color: 'darkgreen' }, { ratio: 0.5, color: 'darkblue' }, ])} /> <StackedBar value={asStackedValue(0.5, [ { ratio: 0.2, color: 'darkgreen' }, { ratio: 0.8, color: 'darkblue' }, ])} /> <StackedBar value={asStackedValue(0.7, [ { ratio: 0.5, color: 'darkgreen' }, { ratio: 0.5, color: 'darkblue' }, ])} /> <StackedBar value={computeWeightedSum([0.2, 0.8])} /> <StackedBar scale={normalize(0, 8)} value={computeWeightedSum([2, 4])} /> </div> ); }

// import { StackedBar } from '@lineup-lite/components';

function Example() {
  return (
    <div>
      <StackedBar
        value={asStackedValue(0.5, [
          { ratio: 0.5, color: 'darkgreen' },
          { ratio: 0.5, color: 'darkblue' },
        ])}
      />
      <StackedBar
        value={asStackedValue(0.5, [
          { ratio: 0.2, color: 'darkgreen' },
          { ratio: 0.8, color: 'darkblue' },
        ])}
      />
      <StackedBar
        value={asStackedValue(0.7, [
          { ratio: 0.5, color: 'darkgreen' },
          { ratio: 0.5, color: 'darkblue' },
        ])}
      />
      <StackedBar value={computeWeightedSum([0.2, 0.8])} />
      <StackedBar scale={normalize(0, 8)} value={computeWeightedSum([2, 4])} />
    </div>
  );
}

Result

0.5

0.5

0.7

0.5

3