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. This is a D3-based re-implementation with limited functionality relative to the original stand-alone LineUp, which you can check out at http://lineup.caleydo.org

Dependencies

LineUp.js depends on D3 for rendering and FontAwesome for icons in the toolbar. Both dependencies are declared as bower dependencies.

Development Dependencies

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

Development Environment

Installation

npm install

Test

npm test

Build distribution packages

npm run build

Watch file changes

npm run watch

The compiled JavaScript files are located under build and the TypeScript documentation is located under build/docs.

DOM Structure

The DOM elements are composed of three parts: header, body, and pool. The header and pool are using HTML5 and the body SVG. However, the body could be rewritten to using HTML, too. The body is using a mix of row and column based approach. Rows are used for the background alteration and for hovering over rows. Column groups are used for efficient use of D3 for rendering individual columns. Individual columns require different rendering strategies.

Data Model

Documentation

TypeDoc Docu