Categorical

Categorical attributes are string attributes that have a limited number of possible values such as colors (red, green, blue, ...). In addtion they can have an inherit order (ordinal attributes) such as a shirt size (small, medium, and large).

Statistics

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

export interface ICategoricalStats extends IHistStats<string> {
  /**
   * histogram
   */
  readonly hist: readonly Readonly<IBin<string>>[];
  /**
   * maximal items in a bin
   */
  readonly maxBin: number;
  /**
   * converts a given value to a color
   */
  color: (v: string) => string;
  /**
   * converts the given value to a label
   */
  format: (v: string) => string;
}

see ICategoricalStats 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 categoricalStatsGenerator(options: CategoricalStatsOptions = {}): (arr: readonly string[]): ICategoricalStats;

see categoricalStatsGenerator API Docs

Example

Live Editor

// import { categoricalStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2']; const stats = compute(data); return <pre>{JSON.stringify(stats, null, 2)}</pre>; }

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

function Example() {
  const compute = categoricalStatsGenerator();
  const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2'];
  const stats = compute(data);

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

Result

{
  "categories": [
    "c1",
    "c2",
    "c3"
  ],
  "hist": [
    {
      "x0": "c1",
      "x1": "c1",
      "label": "c1",
      "count": 3,
      "items": [
        "c1",
        "c1",
        "c1"
      ],
      "color": "#4e79a7"
    },
    {
      "x0": "c2",
      "x1": "c2",
      "label": "c2",
      "count": 4,
      "items": [
        "c2",
        "c2",
        "c2",
        "c2"
      ],
      "color": "#e15759"
    },
    {
      "x0": "c3",
      "x1": "c3",
      "label": "c3",
      "count": 2,
      "items": [
        "c3",
        "c3"
      ],
      "color": "#76b7b2"
    }
  ],
  "items": [
    "c1",
    "c2",
    "c3",
    "c2",
    "c3",
    "c1",
    "c1",
    "c2",
    "c2"
  ],
  "maxBin": {
    "x0": "c2",
    "x1": "c2",
    "label": "c2",
    "count": 4,
    "items": [
      "c2",
      "c2",
      "c2",
      "c2"
    ],
    "color": "#e15759"
  },
  "depth": 1,
  "missing": 0,
  "count": 9,
  "flatMissing": 0,
  "flatItems": [
    "c1",
    "c2",
    "c3",
    "c2",
    "c3",
    "c1",
    "c1",
    "c2",
    "c2"
  ],
  "flatCount": 9
}

Visualization

Cell

CategoricalColor React component

Live Editor

// import { categoricalStatsGenerator, CategoricalColor } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2']; const stats = compute(data); return ( <div> <CategoricalColor value="c1" color={stats.color} format={stats.format} /> <CategoricalColor value="c2" color={stats.color} format={stats.format} /> <CategoricalColor value="c3" color={stats.color} format={stats.format} /> </div> ); }

// import { categoricalStatsGenerator, CategoricalColor } from '@lineup-lite/components';

function Example() {
  const compute = categoricalStatsGenerator();
  const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2'];
  const stats = compute(data);

  return (
    <div>
      <CategoricalColor value="c1" color={stats.color} format={stats.format} />
      <CategoricalColor value="c2" color={stats.color} format={stats.format} />
      <CategoricalColor value="c3" color={stats.color} format={stats.format} />
    </div>
  );
}

Result

c1

c2

c3

Aggregation

Histogram React component

Live Editor

// import { categoricalStatsGenerator, Histogram } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2']; const stats = compute(data); return <Histogram s={stats} style={{ height: 100 }} />; }

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

function Example() {
  const compute = categoricalStatsGenerator();
  const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2'];
  const stats = compute(data);

  return <Histogram s={stats} style={{ height: 100 }} />;
}

Result

Interactive Summary

FilterBinHistogram React component

Live Editor

// import { categoricalStatsGenerator, FilterBinHistogram } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2']; const stats = compute(data); const [filterValue, setFilter] = React.useState(null); const filtered = filterValue ? data.filter((d) => !filterValue.includes(d)) : data; const filteredStats = categoricalStatsGenerator({ categories: stats.categories })(filtered); return ( <FilterBinHistogram s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} label summary style={{ height: 100 }} /> ); }

// import { categoricalStatsGenerator, FilterBinHistogram } from '@lineup-lite/components';

function Example() {
  const compute = categoricalStatsGenerator();
  const data = ['c1', 'c2', 'c3', 'c2', 'c3', 'c1', 'c1', 'c2', 'c2'];
  const stats = compute(data);

  const [filterValue, setFilter] = React.useState(null);
  const filtered = filterValue ? data.filter((d) => !filterValue.includes(d)) : data;
  const filteredStats = categoricalStatsGenerator({ categories: stats.categories })(filtered);

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

Result