Numbers

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 statistics are the same as the number attribute ones.

see numberStatsGenerator API Docs

Example

Live Editor

// import { numberStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; 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 = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);

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

Result

{
  "min": 10,
  "max": 50,
  "count": 25,
  "missing": 0,
  "items": [
    [
      10,
      20,
      40,
      30,
      15
    ],
    [
      21,
      39,
      25,
      42,
      18
    ],
    [
      16,
      44,
      30,
      32,
      31
    ],
    [
      39,
      50,
      43,
      32,
      24
    ],
    [
      36,
      19,
      37,
      38,
      17
    ]
  ],
  "mean": 29.92,
  "variance": 113.0336,
  "median": 31,
  "q1": 20,
  "q3": 39,
  "iqr": 19,
  "outlier": [],
  "whiskerHigh": 50,
  "whiskerLow": 10,
  "hist": [
    {
      "count": 3,
      "items": [
        10,
        15,
        16
      ],
      "x0": 10,
      "x1": 16.666666666666668,
      "label": "10 - 16.667",
      "color": "hsl(206, 64%, 29%)"
    },
    {
      "count": 5,
      "items": [
        17,
        18,
        19,
        20,
        21
      ],
      "x0": 16.666666666666668,
      "x1": 23.333333333333336,
      "label": "16.667 - 23.333",
      "color": "hsl(206, 64%, 40%)"
    },
    {
      "count": 4,
      "items": [
        24,
        25,
        30,
        30
      ],
      "x0": 23.333333333333336,
      "x1": 30.000000000000004,
      "label": "23.333 - 30",
      "color": "hsl(206, 64%, 51%)"
    },
    {
      "count": 4,
      "items": [
        31,
        32,
        32,
        36
      ],
      "x0": 30,
      "x1": 36.666666666666664,
      "label": "30 - 36.667",
      "color": "hsl(206, 64%, 62%)"
    },
    {
      "count": 7,
      "items": [
        37,
        38,
        39,
        39,
        40,
        42,
        43
      ],
      "x0": 36.66666666666667,
      "x1": 43.333333333333336,
      "label": "36.667 - 43.333",
      "color": "hsl(206, 64%, 73%)"
    },
    {
      "count": 2,
      "items": [
        44,
        50
      ],
      "x0": 43.333333333333336,
      "x1": 50,
      "label": "43.333 - 50",
      "color": "hsl(206, 64%, 84%)"
    }
  ],
  "flatMissing": 0,
  "flatItems": [
    10,
    20,
    40,
    30,
    15,
    21,
    39,
    25,
    42,
    18,
    16,
    44,
    30,
    32,
    31,
    39,
    50,
    43,
    32,
    24,
    36,
    19,
    37,
    38,
    17
  ],
  "depth": 5,
  "flatCount": 25,
  "maxBin": {
    "count": 7,
    "items": [
      37,
      38,
      39,
      39,
      40,
      42,
      43
    ],
    "x0": 36.66666666666667,
    "x1": 43.333333333333336,
    "label": "36.667 - 43.333",
    "color": "hsl(206, 64%, 73%)"
  }
}

Visualization

Cell

HeatMap1D React component

Live Editor

// import { numberStatsGenerator, NumberBar, NumberColor, NumberSymbol } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; const stats = compute(data); return ( <div> <HeatMap1D value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} /> <HeatMap1D value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} /> <HeatMap1D 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 = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);

  return (
    <div>
      <HeatMap1D value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} />
      <HeatMap1D value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} />
      <HeatMap1D value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} />
    </div>
  );
}

Result

10

20

40

30

15

21

39

25

42

18

16

44

30

32

31

LineChart React component

Live Editor

// import { numberStatsGenerator, LineChart } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; const stats = compute(data); return ( <div> <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} /> <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} /> <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} /> <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} fill /> <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} fill /> <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} fill /> <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} gradient /> <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} gradient /> <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} gradient /> <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient /> <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient /> <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient /> </div> ); }

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

function Example() {
  const compute = numberStatsGenerator();
  const data = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);

  return (
    <div>
      <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} />
      <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} />
      <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} />

      <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} fill />
      <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} fill />
      <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} fill />

      <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} gradient />
      <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} gradient />
      <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} gradient />

      <LineChart value={data[0]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient />
      <LineChart value={data[1]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient />
      <LineChart value={data[2]} scale={stats.scale} color={stats.color} format={stats.format} fill gradient />
    </div>
  );
}

Result

​

​

​

​

​

​

​

​

​

​

​

​

Aggregation

BoxPlotArray React component

Live Editor

// import { numberStatsGenerator, BoxPlotArray } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; const stats = compute(data); const vs = data[0].map((_, i) => compute(data.map((d) => d[i]))); return ( <div> <BoxPlotArray value={vs} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} /> </div> ); }

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

function Example() {
  const compute = numberStatsGenerator();
  const data = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);

  const vs = data[0].map((_, i) => compute(data.map((d) => d[i])));

  return (
    <div>
      <BoxPlotArray value={vs} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} />
    </div>
  );
}

Result

MultiLineChart React component

Live Editor

// import { numberStatsGenerator, MultiLineChart } from '@lineup-lite/components'; function Example() { const compute = numberStatsGenerator(); const data = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; const stats = compute(data); return ( <div> <MultiLineChart value={data} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} /> <MultiLineChart value={data} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} fill /> <MultiLineChart value={data} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} gradient /> <MultiLineChart value={data} format={stats.format} scale={stats.scale} color={stats.color} style={{ height: 100 }} fill gradient /> </div> ); }

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

function Example() {
  const compute = numberStatsGenerator();
  const data = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);

  return (
    <div>
      <MultiLineChart
        value={data}
        format={stats.format}
        scale={stats.scale}
        color={stats.color}
        style={{ height: 100 }}
      />
      <MultiLineChart
        value={data}
        format={stats.format}
        scale={stats.scale}
        color={stats.color}
        style={{ height: 100 }}
        fill
      />
      <MultiLineChart
        value={data}
        format={stats.format}
        scale={stats.scale}
        color={stats.color}
        style={{ height: 100 }}
        gradient
      />
      <MultiLineChart
        value={data}
        format={stats.format}
        scale={stats.scale}
        color={stats.color}
        style={{ height: 100 }}
        fill
        gradient
      />
    </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 = [ [10, 20, 40, 30, 15], [21, 39, 25, 42, 18], [16, 44, 30, 32, 31], [39, 50, 43, 32, 24], [36, 19, 37, 38, 17], ]; const stats = compute(data); console.log(stats.min, stats.max); const [filterValue, setFilter] = React.useState(null); const filtered = filterValue ? data.filter((vs) => vs.every( (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1]) ) ) : data; const filteredStats = numberStatsGenerator({ min: stats.min, max: stats.max, numberOfBins: stats.hist.length })( 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 = [
    [10, 20, 40, 30, 15],
    [21, 39, 25, 42, 18],
    [16, 44, 30, 32, 31],
    [39, 50, 43, 32, 24],
    [36, 19, 37, 38, 17],
  ];
  const stats = compute(data);
  console.log(stats.min, stats.max);

  const [filterValue, setFilter] = React.useState(null);
  const filtered = filterValue
    ? data.filter((vs) =>
        vs.every(
          (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1])
        )
      )
    : data;
  const filteredStats = numberStatsGenerator({ min: stats.min, max: stats.max, numberOfBins: stats.hist.length })(
    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

​