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
public
src
.editorconfig
.gitattributes
.gitignore
.postcssrc.js
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tslint.json
vue.config.js

README.md

LineUp.js Vue.js Wrapper

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 Vue.js 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 vue-lineup

Minimal Usage Example

const cats = ['c1', 'c2', 'c3'];
const data = [];
for (let i = 0; i < 100; ++i) {
  data.push({
    a: Math.random() * 10,
    d: 'Row ' + i,
    cat: cats[Math.floor(Math.random() * 3)],
    cat2: cats[Math.floor(Math.random() * 3)],
  });
}

// enable plugin to register components
Vue.use(VueLineUp);

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" />`,
  data: {
    cats,
    data
  }
});

CodePen

Minimal Result

Advanced Usage Example

App.vue:

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
    <LineUpStringColumnDesc column="d" label="Label" v-bind:width="100" />
    <LineUpCategoricalColumnDesc column="cat" v-bind:categories="cats" color="green" />
    <LineUpCategoricalColumnDesc column="cat2" v-bind:categories="cats" color="blue" />
    <LineUpNumberColumnDesc column="a" v-bind:domain="[0, 10]" color="blue" />
    <LineUpRanking groupBy="cat" sortBy="a:desc">
      <LineUpSupportColumn type="*" />
      <LineUpColumn column="*" />
    </LineUpRanking>
  </LineUp>`,
  data: {
    cats,
    data
  }
});

CodePen

Advanced Result

Supported Browsers

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

Development Environment

Installation

git clone https://github.com/datavisyn/vue-lineup.git
cd vue-lineup
npm install
# install peer dependency
npm install --no-save vue

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm start

Authors

  • Samuel Gratzl (@sgratzl)