Set

Categorical set attributes are string attributes that have a limited number of possible values such as colors (red, green, blue, ...). However, in contrast to a categorical attribute each row has a set of values, given in a set (Set<string>) or an array of strings (string[]).

Statistics

The statistics are the same as the categorical attribute ones.

see ICategoricalStats API Docs

Example

Live Editor

// import { categoricalStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = [ ['c1', 'c2'], ['c2'], ['c1', 'c3'], ['c1'], ['c1', 'c2', 'c3'], ['c1', 'c2'], ['c1'], ['c2', 'c3'], ['c3'], ]; 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'],
    ['c2'],
    ['c1', 'c3'],
    ['c1'],
    ['c1', 'c2', 'c3'],
    ['c1', 'c2'],
    ['c1'],
    ['c2', 'c3'],
    ['c3'],
  ];
  const stats = compute(data);

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

Result

Loading...

Visualization

Cell

UpSetLine React component

Live Editor

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

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

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

  return (
    <div>
      <UpSetLine value={data[0]} color={stats.color} format={stats.format} sets={['c1', 'c2', 'c3']} />
      <UpSetLine value={data[1]} color={stats.color} format={stats.format} sets={['c1', 'c2', 'c3']} />
      <UpSetLine value={data[2]} color={stats.color} format={stats.format} sets={['c1', 'c2', 'c3']} />
      <UpSetLine value={data[2]} format={stats.format} sets={['c1', 'c2', 'c3']} />
    </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'], ['c2'], ['c1', 'c3'], ['c1'], ['c1', 'c2', 'c3'], ['c1', 'c2'], ['c1'], ['c2', 'c3'], ['c3'], ]; 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'],
    ['c2'],
    ['c1', 'c3'],
    ['c1'],
    ['c1', 'c2', 'c3'],
    ['c1', 'c2'],
    ['c1'],
    ['c2', 'c3'],
    ['c3'],
  ];
  const stats = compute(data);

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

Result

Loading...

Interactive Summary

FilterSetHistogram React component

Live Editor

// import { categoricalStatsGenerator, FilterSetHistogram } from '@lineup-lite/components'; function Example() { const compute = categoricalStatsGenerator(); const data = [ ['c1', 'c2'], ['c2'], ['c1', 'c3'], ['c1'], ['c1', 'c2', 'c3'], ['c1', 'c2'], ['c1'], ['c2', 'c3'], ['c3'], ]; const stats = compute(data); const [filterValue, setFilter] = React.useState(null); const must = new Set(); const mustNot = new Set(); for (const v of filterValue || []) { if (v.value) { must.add(v.set); } else { mustNot.add(v.set); } } const filterRow = (v) => { if (v == null) { return false; } if (mustNot.size > 0) { for (const vi of v) { if (mustNot.has(vi)) { return false; } } } if (must.size > 0) { for (const vi of v) { if (must.has(vi)) { return true; } } return false; } return true; }; const filtered = filterValue ? data.filter(filterRow) : data; const filteredStats = categoricalStatsGenerator({ categories: stats.categories })(filtered); return ( <FilterSetHistogram s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} label summary style={{ height: 100 }} /> ); }

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

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

  const [filterValue, setFilter] = React.useState(null);
  const must = new Set();
  const mustNot = new Set();
  for (const v of filterValue || []) {
    if (v.value) {
      must.add(v.set);
    } else {
      mustNot.add(v.set);
    }
  }
  const filterRow = (v) => {
    if (v == null) {
      return false;
    }
    if (mustNot.size > 0) {
      for (const vi of v) {
        if (mustNot.has(vi)) {
          return false;
        }
      }
    }
    if (must.size > 0) {
      for (const vi of v) {
        if (must.has(vi)) {
          return true;
        }
      }
      return false;
    }
    return true;
  };
  const filtered = filterValue ? data.filter(filterRow) : data;
  const filteredStats = categoricalStatsGenerator({ categories: stats.categories })(filtered);

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

Result

Loading...