Polymer 2.0 Wrapper around LineUp.js @sgratzl
Switch branches/tags
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.
.github
build
demo
src
test
types
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
bower.json
index.html
lineup-element.html
lineup-scripted.html
package-lock.json
package.json
polymer.json
tsconfig.json
tsconfig_dev.json
tsd.d.ts
tslint.json
webpack.config.js

README.md

LineUp.js Polymer Wrapper (LineUp-Element)

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 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

Minimal Result

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

Advanced Result

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)