LineUp Library for Visual Analysis of Multi-Attribute Rankings @sgratzl
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
demo
src
.editorconfig
.gitattributes
.gitignore
.npmignore
.stylelintrc
.travis.yml
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tsconfig_dev.json
tsd.d.ts
tslint.json
typedoc.js
webpack.config.js

README.md

LineUp.js React Wrapper (LineUp.jsx)

License: MIT NPM version CircleCI

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. This is a React wrapper around the JavaScript library LineUp.js. Details about the LineUp visualization technique can be found at http://lineup.caleydo.org.

Usage

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

Minimal Result

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

Advanced Result

Supported Browsers

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

Development Environment

Installation

git clone https://github.com/datavisyn/lineupjsx.git
cd lineupjsx
npm install

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm start

Authors

  • Samuel Gratzl (@sgratzl)