lineupjs / lineupjs

LineUp Library for Visual Analysis of Multi-Attribute Rankings

LineUp.js: Visual Analysis of Multi-Attribute Rankings

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.

Key Features

• scalable (~1M rows)
• heterogenous attribute types (string, numerical, categorical, boolean, date)
• composite column types (weighted sum, min, max, mean, median, impose, nested, ...)
• array (multi value) and map column types (strings, stringMap, numbers, numberMap, ...)
• filtering capabilities
• hierarchical sorting (sort by more than one sorting criteria)
• hierarchical grouping (split rows in multiple separate groups)
• group aggregations (show a whole group as a single group row)
• numerous visualizations for summaries, cells, and group aggregations
• side panel for easy filtering and column management
• React, Angular, Vue.js, Polymer, RShiny, Juypter, ObservableHQ, and Power BI wrapper
• Demo Application with CSV import and export capabilities
• API Documentation based on generated TypeDoc documenation

Usage

Installation

npm install lineupjs

<link href="https://unpkg.com/lineupjs/build/LineUpJS.css" rel="stylesheet" />
<script src="https://unpkg.com/lineupjs/build/LineUpJS.js"></script>

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
  arr.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

const lineup = LineUpJS.asLineUp(document.body, arr);

CodePen

Advanced Usage Example

// arr from before
const builder = LineUpJS.builder(arr);

// manually define columns
builder
  .column(LineUpJS.buildStringColumn('d').label('Label').width(100))
  .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
  .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
  .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));

// and two rankings
const ranking = LineUpJS.buildRanking()
  .supportTypes()
  .allColumns() // add all columns
  .impose('a+cat', 'a', 'cat2'); // create composite column
  .groupBy('cat')
  .sortBy('a', 'desc')


builder
  .defaultRanking()
  .ranking(ranking);

const lineup = builder.build(document.body);

CodePen

Supported Browsers

• Chrome 64+ (best performance)
• Firefox 57+
• Edge 16+

Demo Application

A demo application is located at lineup_app. It support CSV Import, CSV Export, JSON Export, CodePen Export, nad local data management.

The application is deployed at https://lineup.js.org/app

API Documentation

LineUp is implemented in clean TypeScript in an object oriented manner. A fully generated API documentation based on TypeDoc is available at https://lineup.js.org/main/docs

LineUp can be build manually or using via the builder design pattern (see Advanced Usage Example). The builder design pattern in the more common way.

LineUp Builder

The simplest methods to create a new instance are:

• asLineUp returning a ready to use LineUp instance

  asLineUp(node: HTMLElement, data: any[], ...columns: string[]): LineUp

• asTaggle returning a ready to use Taggle instance

  asTaggle(node: HTMLElement, data: any[], ...columns: string[]): Taggle

• builder returning a new DataBuilder

  builder(arr: any[]): DataBuilder`

The DataBuilder allows on the one hand to specify the individual columns more specificly and the creation of custom rankings.

Builder factory functions for creating column descriptions include:

• buildStringColumn returning a new StringColumnBuilder

  buildStringColumn(column: string): StringColumnBuilder

• buildNumberColumn returning a new NumberColumnBuilder

  buildNumberColumn(column: string, domain?: [number, number]): NumberColumnBuilder

• buildCategoricalColumn returning a new CategoricalColumnBuilder

  buildCategoricalColumn(column: string, categories?: (string | Partial<ICategory>)[]): CategoricalColumnBuilder

• buildHierarchicalColumn returning a new HierarchyColumnBuilder

  buildHierarchicalColumn(column: string, hierarchy?: IPartialCategoryNode): HierarchyColumnBuilder

• buildDateColumn returning a new DateColumnBuilder

  buildDateColumn(column: string): DateColumnBuilder

• buildActionsColumn returning a new ActionsColumnBuilder

  buildActionsColumn(): ActionsColumnBuilder

In order to build custom rankings within the DataBuilder the buildRanking returning a new RankingBuilder is used.

buildRanking(): RankingBuilder

LineUp classes and manual creation

The relevant classes for creating a LineUp instance manually are LineUp, Taggle, and LocalDataProvider. A LocalDataProvider is an sub class of ADataProvider implementing the data model management based on a local JavaScript array. LineUp and Taggle are the visual interfaces to the LocalDataProvider.

The classes can be instantiated either using the factory pattern or via their regular class constructors:

createLineUp(container: HTMLElement, data: ADataProvider, config?: Partial<ILineUpOptions>): LineUp

createTaggle(container: HTMLElement, data: ADataProvider, config?: Partial<ITaggleOptions>): Taggle

createLocalDataProvider(data: any[], columns: IColumnDesc[], options?: Partial<ILocalDataProviderOptions>): LocalDataProvider

new LineUp(node: HTMLElement, data: DataProvider, options?: Partial<ILineUpOptions>): LineUp
new Taggle(node: HTMLElement, data: DataProvider, options?: Partial<ITaggleOptions>): Taggle
new LocalDataProvider(data: any[], columns?: IColumnDesc[], options?: Partial<ILocalDataProviderOptions & IDataProviderOptions>): LocalDataProvider

Both LineUp and Taggle are sub classes of ALineUp. The most important functions of this class include:

• getHighlight(): number / setHighlight(dataIndex: number): void to get and set the highlighted row identified by its index in the data. If none is highlighted -1 is returned.
• getSelection(): number[] / setSelection(dataIndices: number[]): void to get and set the selected rows identified by their indices in the data
• on(type: string, listener: IEventListener | null): this to listen to highlight and selection events. LineUp.js event mechanism is based on d3 dispatch, thus instead of an off method null is passed to disable listening to the event. The following events are sent out:
  • highlightChanged(dataIndex: number): void
  • selectionChanged(dataIndices: number[]): void

React Support (LineUp.jsx)

A React wrapper is located at lineupjsx.

Installation

npm install --save lineupjsx

<link href="https://unpkg.com/lineupjsx/build/LineUpJSx.css" rel="stylesheet" />
<script src="https://unpkg.com/lineupjsx/build/LineUpJSx.js"></script>

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
  arr.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

<LineUp data={arr} />

CodePen

Result is same as the builder minimal example

Advanced Usage Example

// arr from before
<LineUp data={arr} defaultRanking>
  <LineUpStringColumnDesc column="d" label="Label" width={100} />
  <LineUpCategoricalColumnDesc column="cat" categories={cats} color="green" />
  <LineUpCategoricalColumnDesc column="cat2" categories={cats} color="blue" />
  <LineUpNumberColumnDesc column="a" domain={[0, 10]} color="blue" />

  <LineUpRanking groupBy="cat" sortBy="a:desc">
    <LineUpSupportColumn type="*" />
    <LineUpColumn column="*" />
    <LineUpImposeColumn label="a+cat" column="a" categeoricalColumn="cat2" />
  </LineUpRanking>
</LineUp>

CodePen

Result is same as the builder advanced example

Angular 6 Support (nglineup)

An Angular wrapper is located at nglineup.

Installation

npm install --save nglineup

Minimal Usage Example

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LineUpModule } from '../lib/lineup.module';

import { AppComponent } from './app.component.1';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LineUpModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly data = <any[]>[];

  readonly cats = ['c1', 'c2', 'c3'];

  constructor() {
    const cats = this.cats;
    for (let i = 0; i < 100; ++i) {
      this.data.push({
        a: Math.random() * 10,
        d: 'Row ' + i,
        cat: cats[Math.floor(Math.random() * 3)],
        cat2: cats[Math.floor(Math.random() * 3)],
      });
    }
  }
}

app.component.html:

<lineup-lineup [data]="data"></lineup-lineup>

CodePen

Result is same as the builder minimal example

Advanced Usage Example

app.component.html:

<lineup-lineup [data]="data" [defaultRanking]="true" style="height: 800px;">
  <lineup-string-column-desc column="d" label="Label" [width]="100"></lineup-string-column-desc>
  <lineup-categorical-column-desc column="cat" [categories]="cats" color="green"></lineup-categorical-column-desc>
  <lineup-categorical-column-desc column="cat2" [categories]="cats" color="blue"></lineup-categorical-column-desc>
  <lineup-number-column-desc column="a" [domain]="[0, 10]" color="blue"></lineup-number-column-desc>

  <lineup-ranking groupBy="cat" sortBy="a:desc">
    <lineup-support-column type="*"></lineup-support-column>
    <lineup-column column="*"></lineup-column>
    <lineup-impose-column label="a+cat" column="a" categoricalColumn="cat2"></lineup-impose-column>
  </lineup-ranking>
</lineup-lineup>

CodePen

Result is same as the builder advanced example

Vue.js Support (vue-lineup)

A Vue.js wrapper is located at vue-lineup.

Installation

npm install --save vue-lineup

Minimal Usage Example

const cats = ['c1', 'c2', 'c3'];
const data = [];
for (let i = 0; i < 100; ++i) {
  data.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

// enable plugin to register components
Vue.use(VueLineUp);

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" />`,
  data: {
    cats,
    data,
  },
});

CodePen

Result is same as the builder minimal example

Advanced Usage Example

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
    <LineUpStringColumnDesc column="d" label="Label" v-bind:width="100" />
    <LineUpCategoricalColumnDesc column="cat" v-bind:categories="cats" color="green" />
    <LineUpCategoricalColumnDesc column="cat2" v-bind:categories="cats" color="blue" />
    <LineUpNumberColumnDesc column="a" v-bind:domain="[0, 10]" color="blue" />
    <LineUpRanking groupBy="cat" sortBy="a:desc">
      <LineUpSupportColumn type="*" />
      <LineUpColumn column="*" />
    </LineUpRanking>
  </LineUp>`,
  data: {
    cats,
    data,
  },
});

CodePen

Result is same as the builder advanced example

Polymer Support (LineUp-Element)

A Polymer 2.0 web component wrapper is located at lineup-element.

Installation

bower install https://github.com/lineupjs/lineup-element

<link rel="import" href="bower_components/lineup-element/lineup-element.html" />

Minimal Usage Example

// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
  arr.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)]
  })
}
conat data = { arr, cats };

<lineup-element data="[[data.arr]]"></lineup-element>

TODO CodePen

Result is same as the builder minimal example

Advanced Usage Example

// arr from before
<lineup-element data="[[data.arr]]" side-panel side-panel-collapsed default-ranking="true">
  <lineup-string-desc column="d" label="Label" width="100"></lineup-string-desc>
  <lineup-categorical-desc column="cat" categories="[[cats]]" color="green"></lineup-categorical-desc>
  <lineup-categorical-desc column="cat2" categories="[[cats]]" color="blue"></lineup-categorical-desc>
  <lineup-number-desc column="a" domain="[0, 10]" color="blue"></lineup-number-desc>
  <lineup-ranking group-by="cat" sort-by="a:desc">
    <lineup-support-column type="*"></lineup-support-column>
    <lineup-column column="*"></lineup-column>
  </lineup-ranking>
</lineup-element>

TODO CodePen

Result is same as the builder advanced example

R, RShiny, and R Markdown Support

A HTMLWidget wrapper for R is located at lineup_htmlwidget. It can be used within standalone R Shiny apps or R Markdown files. Integrated plotting does not work due to an outdated integrated Webkit version in RStudio. Crosstalk is supported for synching selections and filtering among widgets.

Installation

devtools::install_github("rstudio/crosstalk")
devtools::install_github("lineupjs/lineup_htmlwidget")
library(lineupjs)

Examples

lineup(iris)

Jupyter Widget (to be released)

A Jupyter Widget wrapper for Python is located at lineup_widget.

Installation

pip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget
jupyter nbextension enable --py [--sys-prefix|--user|--system] lineup_widget

Or, if you use jupyterlab:

pip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget
jupyter labextension install @jupyter-widgets/jupyterlab-manager

Examples

import lineup_widget
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))

w = lineup_widget.LineUpWidget(df)
w.on_selection_changed(lambda selection: print(selection))
w

from __future__ import print_function
from ipywidgets import interact, interactive, interact_manual

def selection_changed(selection):
    return df.iloc[selection]

interact(selection_changed, selection=lineup_widget.LineUpWidget(df));

Observable HQ

A ObservableHQ wrapper is located at lineup-js-observable.

data = {
  const arr = [];
  const cats = ['c1', 'c2', 'c3'];
  for (let i = 0; i < 100; ++i) {
    arr.push({
      a: Math.random() * 10,
      d: 'Row ' + i,
      cat: cats[Math.floor(Math.random() * 3)],
      cat2: cats[Math.floor(Math.random() * 3)]
    })
  }
  return arr;
}

import { asLineUp } from '@sgratzl/lineup-js-observable-library';

viewof selection = asLineUp(arr)

ObservableHQ

Advanced Usage Example

// arr from before
viewof selection = {
  const b = builder(data);
  b.column(
    LineUpJS.buildStringColumn('d')
      .label('Label')
      .width(100)
  )
    .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
    .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
    .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));

  // and two rankings
  const ranking = LineUpJS.buildRanking()
    .supportTypes()
    .allColumns() // add all columns
    .impose('a+cat', 'a', 'cat2') // create composite column
    .groupBy('cat')
    .sortBy('a', 'desc');

  b.defaultRanking().ranking(ranking);
  return b.build();
}

ObservableHQ

PowerBI Custom Visual (under development)

A PowerBI Visual wrapper is located at lineup_powerbi.

Installation

TODO

Examples

TODO

API Documentation

See API documentation and Develop API documentation

Demos

See Demos, Develop Demos, and R Demos

Related Publications

LineUp: Visual Analysis of Multi-Attribute Rankings Paper Paper Website

Samuel Gratzl, Alexander Lex, Nils Gehlenborg, Hanspeter Pfister, and Marc Streit
IEEE Transactions on Visualization and Computer Graphics (InfoVis '13), 19(12), pp. 2277–2286, doi:10.1109/TVCG.2013.173, 2013.

🏆 IEEE VIS InfoVis 2013 Best Paper Award

Taggle: Scalable Visualization of Tabular Data through Aggregation Paper Preprint Paper Website

Katarina Furmanova, Samuel Gratzl, Holger Stitz, Thomas Zichner, Miroslava Jaresova, Martin Ennemoser, Alexander Lex, and Marc Streit
Information Visualization, 19(2): 114-136, doi:10.1177/1473871619878085, 2019.

Dependencies

LineUp.js depends on

• LineUpEngine table rendering engine
• D3 utilities: scales, format, dragging
• Popper.js dialogs

Development Dependencies

Webpack is used as build tool. LineUp itself is written in TypeScript and SASS.

Development Environment

Installation

The setup requires Node.js v16 or higher.

git clone https://github.com/lineupjs/lineupjs.git -b develop
cd lineupjs
npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn start
yarn run clean
yarn run compile
yarn test
yarn run lint
yarn run fix
yarn run build
yarn run docs

Run E2E Tests

via cypress.io

Variant 1: with prebuilt LineUp

yarn run compile
yarn run build
yarn run cy:compile
yarn run cy:open

Variant 2: with webpack-dev-server

first shell:

yarn start

second shell:

yarn run cy:compile
yarn run cy:start

Authors

• Samuel Gratzl (@sgratzl)
• Holger Stitz (@thinkh)
• The Caleydo Team (@caleydo)
• datavisyn GmbH (@datavisyn)

---

This repository was created as part of the The Caleydo Project.

lineupjs's Issues

Is there an API document?

• I wonder if there is an API document, which could help developers write callback function for interaction.
• For example: I want to pass a callback function to lineup component. When the cursor hovers a row in lineup, the callback function could get the data of this row and do something else.
• This docs is hard to read and understand.

bug not disappearing description popup

• Release number or git hash: master
• Web browser version and OS: all

Steps to reproduce

1. have a column with a description
2. hover over column description popup appears
3. click on toolbar of column
4. move out of column

Observed behavior

• popup doesn't disappear anymore

Expected behavior

improve documentation

in order to simplify the usage of this library an improved documentation would be useful.

open questions

• which format
• part of the code or separate
• how to keep up to date
• how to improve the existing api documentation at https://lineup.js.org/master/docs/
• how to proper host different demos and keep them up to date, too

Changing histogram when filtering

Most people in the study complained that the histogram in filter panel changes when filtering and they lose a reference of how much of the original data they filtered out.
Suggested behavior: keep the histogram in the filter panel fixed - only the histogram in the column header should indicate the distribution of the currently displayed.

Scrollbars are shown in each cell

• Release number or git hash: v3.1
• Web browser version and OS: Firefox Developer Edition, Firefox on Ubuntu 18.04

Steps to reproduce

1. Open LineUp in Firefox (e.g. https://codepen.io/sgratzl/pen/vppyML)

Observed behavior

• Scrollbars are shown in almost each cell

Expected behavior

• Cells should not have a scrollbar

Possible Reason

• After investigating with @sgratzl a possible reason for this is that the user-agent stylesheet of Firefox defines 19px line-height by default. With 18px line height the scrollbars would be gone.

Select filters (in filter dialog) for categorical columns does not work

• Release number or git hash: https://www.npmjs.com/package/lineupjs/v/3.0.1-beta.12
• Web browser version and OS: Chrome 67 beta

Steps to reproduce

1. Open https://lineup.js.org/app/#soccer
2. Click on filter icon for a categorical column
3. Uncheck the first check mark
4. Try to check selected categories

Observed behavior

• Unable to check/uncheck filter
• The first two rows should do the same, don't they?

Expected behavior

• Remove the first row and keep Un/Select All or add a label to the first row
• Check/uncheck categories should work

Changing the grouping deaggregates everything

Changing the grouping deaggregates everything, which is annoying to the users.
Is it possible to come up with some consistent strategy so this would not happen? (e.g., when everything is aggregated, keep it that way after the change). I think we have had a discussion about this before, so I am not sure if this has some consistent solution.

How to use lineupjs by es6 import?

• Release number or git hash: 3.0.1-beta.13
• Web browser version and OS: macos 10.13.3 chrome 67

Steps to reproduce

1. npm install --save lineupjs@next

import LineUpJS from 'lineupjs';
import 'lineupjs/build/LineUpJS.css'

const arr = []
for (let i = 0; i < 100; i++) {
  arr.push({
    attr1: Math.random() * 10,
    attr2: Math.random() * 10,
    attr3: Math.random() * 10,
  })
}
LineUpJS(document.body, arr)

Observed behavior

Chrome dev tool consoles errors:

Expected behavior

support changing category meta data on runtime

including

• category order
• label
• color
• name??
• add/remove categories??

Filtering matrix by histogram doesn't work

Filtering matrix by histogram doesn't work:

gradient text not working in 3.1

• Release number or git hash: 3.1.0
• Web browser version and OS: chrome windows 10

Steps to reproduce

1. open https://codepen.io/sgratzl/pen/RBjomr
2. hover over the blue row with is only half full

Observed behavior

• cannot read the text

Expected behavior

as in https://codepen.io/sgratzl/pen/KByNjQ (previous version)

I assume introduced via #33 as part centering the text within a row

After resizing the window the column menu jumps to left screen border

After resizing the window the column menu jumps to left screen border:

create Vue.js wrapper

In addition to the React, Polymer wrapper

integrate and use browserstack

lineup.js.org has now a sponsored subscription for at least a year.

possible usage

• automatic testing in different browsers
• testing rendering speed
• testing expected outcomes

Build sort and group hierarchy with ctrl + click

Currently the create a sort or group hierarchy can only be created using the dedicated menu (More -> Sort by... / Group by...).

It would be nice to add further sorting / grouping criteria by simultaneously pressing the ctrl key (Windows) or command key (Mac) and click. The new criterion will be always added at the last position of the hierarchy.

support for multiple rankings in the side panel

in the current version the summaries + chooser + add sorting hierarchy just operated on the first ranking.

A possible approach would be to use a tabbing for switch between different rankings

refactor sorting implementation

in the current version the sorting is slow for larger datasets since the value is computed over and over again.

possible countermeasures:

• precompute the "to compare value" (int, string) and compare them than computing the value within each compare
• if things are simple (no custom compare methods) -> sort within web-worker if array is larger than X entries

see also https://github.com/webpack-contrib/worker-loader

range selection

similar to e.g. gmail, clicking on one row to select it and then using shift+click on another should select all the rows inbetween the two, too

Show original (not normalized) values in matrix.

It was bothering a lot of people that the values in the matrices were normalized to 0-1, so they were not able to read. e.g., a precise number of goals the player scored. It would be nice if the original value was given in the tooltip.

Setting weights in combined columns not working intuitively

Workflow:
Combine Age and Height columns, then change the weight of age to 60% and confirm (leave height at 50%).
Resulting weights are 54.5% and 45.5%.

I know this is the result of proportional scaling of the 60+50% to a total of 100%, but everyone who tried it when playing with the tool was confused by this and expected that only the "other" weight would be adjusted - i.e. if you set 60% to age, then height would automatically change to 40%.

Add mean value to group tooltip

When hovering over group boxplot, the tooltip indicates to the statistical values except for mean, so it would be nice to have it there as well.

Rename Sort Group by...

People had trouble finding the group sorting option (even though I demonstrated this in the introduction part) and tended to overlook it when searching for it in column menu. When asked why they skipped this option and searched for the solution under "Filter" or "Visualization" they answered they were not sure what "Sort Group by..." would do. Some users also expected this option to be found somewhere around grouping hierarchy panel or in group column.

At the very least it should be renamed to Sort Groups by... (add 's') but maybe someone has some better idea of how to make it more indicative of the functionality it offers?

Add some indicator of the value by which the groups are sorted

When sorting the groups, it's often impossible to tell what value is used for sorting. It is then much harder to read if the sorting is ascending/descending or if there is any pattern in the values. In cases, the value is indicated it is not working consistently.

Example1: Group by the league, sort groups by mean age. The mean value is not indicated in boxplot.
Same goes for other visualizations, where there are no indicators at all.

It was suggested to add a highlighted vertical line that would indicate the value by which the data are sorted into all "graphical" group visualizations. Possibly also to single item visualizations - one user pointed out that the group sorting is confusing when the groups are not aggregated and it's much harder to see or estimate the sorting value.

Example2: Group by the league, sort groups by minimum age. The values highlighted in box plot don't make sense. The value indicated for French league is clearly not minimal and for British league, there is no indicator at all. I suspect that the outliers in the boxplot are not drawn properly - I think there was also a case, where the values didn't seem to match what the box plot was showing.

Unselecting all categories doesn't always remove all the items

Unselecting all categories doesn't remove all the items from the table:

define browserlist spec

see https://github.com/browserslist/browserslist

When filtering numerical values, slider tooltip says NaN

When filtering numerical values (dragging the slider over histogram), slider tooltip says NaN

add Polymer wrapper

see https://www.polymer-project.org/2.0/start/first-element/intro

drag selection not working in Firefox

• Release number or git hash: master
• Web browser version and OS: firefox 58, windows

Steps to reproduce

1. open a lineup ranking
2. select multiple lines by clicking and dragging a line down

Observed behavior

• nothing happens only last one will be selected

Expected behavior

• all lines will be selected

When the matrix is split, it is no longer possible to sort by the whole matrix

When the matrix is split, it is no longer possible to sort by the whole matrix - clicking the sort button on the main matrix header will result into sorting by it's first column:

Cloning one column/one part of the stratified matrix doesn't work

Issue moved from Caleydo/lineupjs#556

---

It seems that Cloning one column/one part of the stratified matrix doesn't work - the snapshot will appear without the cloned column.

Steps: Stratify goals by seasons and then clone season 15/16 column

Result: A snapshot of the table with Group Name, Rank and Player columns will appear, but the actual column with season 15/16 will be missing.

Soccer Dataset: The 0 height values should be changed to Missing values

Soccer Dataset: The 0 height values should be changed to Missing values.

Selection highlight of slope graphs between table snapshot disappears

Selection highlight of slope graphs between two table snapshot disappears when both items are off the screen:
Watch the line conecting Rodrigo Palacio

style overview taggle button

currently a plain checkbox. A toggle / switch would be more meaningful switching between detail and overview mode

create Angular wrapper

in addition to the existing React wrapper

create custom website

in the current version lineup.js.org is generated using a default theme based on the README. However a custom web page would better present this library.

included

• based on material design
• left side menu with:
  • Demo,
  • Usage
  • builder options
  • React,
  • Polymer,
  • R Shiny,
  • Juypter,
  • API link

test typedoc markdown exporter

see https://github.com/tgreyjs/typedoc-plugin-markdown

support easy inversion of selection

similar to the toggle selectAll button

support quantized encoding for numbers

in addition to the existing brightness encoding. same style but with an explicit quantized color scale.

Wrong column width for 100px in string column builder

• Release number or git hash: develop
• Web browser version and OS: Chrome 68-beta

Steps to reproduce

Build a LineUp ranking with a string column and set the width to 100:

builder(parsed.data)
 .column(buildStringColumn('current_club').width(100).label('Current Club'))

Observed behavior

This results in the default width of 200px.

For a width of 99px or 101px it is correct:

The problem might occur, because the default width of a StringColumn is set to 200.

Expected behavior

• LineUp should correctly set column width = 100px for a string column

add warning when invalid browser is detected

such as an too old browser (ie, too old chrome, ...)

The icons for chrome, edge, and firefox are already part of the font

created dedicated hierarchy vis

• show the current sorting and grouping hierarchy
• separation line between grouping and sorting
• toggle sorting order as action
• remove from sorting as action
• add via drag-and-drop

Add + icon to Add column field

Some people had trouble finding the "Add column" field. It could help to add some icon to it with a + sign.

Compress button on matrix doesn't work

Once you split the matrix it is not possible to "de-split" it - I think the compress button should do that, but it doesn't work.

support freezing setups

like limiting the features (e.g. switch visualizations) and the table layouts (columns, add / remove, column types) in order to simplify certain common cases

in some cornercases duplicate ids exists

• Release number or git hash: dev
• Web browser version and OS: all

Steps to reproduce

1. by change "randomId" returns the same id

Observed behavior

• resulting in a browser warning

Expected behavior

• true unique ids

-> e.g instead of random a counter approach

update circleci script to release upon building a tag

in the current workflow circleci already build git tags. With an additional step it could also do the npm publish part.

public sourcemaps as part of release

easier for debugging

Text of the the group name column shifted

Moved issue from Caleydo/lineupjs#555

---

In the overview mode the name of the un-aggregated group is shifted and overlaps with the group/aggregetion indicator:

cursor navigation

change highlight of the current row + scrolling when needed with the up/down cursor keys. pressing the space key should toggle the selection state of the row

Error rendering slope graphs in Firefox

Hi there. I'm using LineUp.js library to display statistics for large data and connections between separate rankings. It works fine in Google Chrome but throws an error in Firefox (version 60.0.1):

In this way it renders all the rankings but without connections between them.

Steps to reproduce

1. Open LineUp with slope graphs in Firefox(version 60.0.1) browser.

Observed behavior

• Connections between rankings are not rendered.
• TypeError: g.ownerSVGElement is undefined is thrown.

Expected behavior

• LineUp renders all rankings with connections between them