LineUp Library for Visual Analysis of Multi-Attribute Rankings @sgratzl
Branch: master
Clone or download
Latest commit b6b7cd9 Nov 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci optimize circleci build Jun 29, 2018
.github
demo fix demo May 20, 2018
src update package-lock.json Nov 8, 2018
.editorconfig initial commit Feb 4, 2018
.gitattributes initial commit Feb 4, 2018
.gitignore
.npmignore add npmignore May 15, 2018
.stylelintrc initial commit Feb 4, 2018
.travis.yml initial commit Feb 4, 2018
LICENSE initial commit Feb 4, 2018
README.md fix url May 20, 2018
package-lock.json 1.0.7 Nov 8, 2018
package.json 1.0.7 Nov 8, 2018
tsconfig.json adapt structure May 20, 2018
tsconfig_dev.json update dependencies Apr 30, 2018
tsd.d.ts update dependencies Mar 3, 2018
tslint.json initial commit Feb 4, 2018
typedoc.js initial commit Feb 4, 2018
webpack.config.js fix bundle for demos Oct 4, 2018

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)