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

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

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

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

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