LineUp.js Polymer Wrapper (LineUp-Element)

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. This is a Polymer 2.0](https://www.polymer-project.org/) web component wrapper around the JavaScript library LineUp.js. Details about the LineUp visualization technique can be found at http://lineup.caleydo.org.

Usage

Installation

bower install https://github.com/datavisyn/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

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

Supported Browsers

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

Development Environment

Installation

git clone https://github.com/datavisyn/lineup-element.git
cd lineup-element
npm install

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm run watch
npm start

Authors

• Samuel Gratzl (@sgratzl)