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

Loading...

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

Loading...

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

Loading...

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

Loading...