{"id":13559089,"url":"https://github.com/lineupjs/lineupjs","last_synced_at":"2026-01-27T22:23:18.576Z","repository":{"id":37432500,"uuid":"116716822","full_name":"lineupjs/lineupjs","owner":"lineupjs","description":"LineUp Library for Visual Analysis of Multi-Attribute Rankings","archived":false,"fork":false,"pushed_at":"2025-01-27T11:51:30.000Z","size":24076,"stargazers_count":91,"open_issues_count":49,"forks_count":36,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-12T11:55:30.550Z","etag":null,"topics":["caleydo","javascript","javascript-library","lineup","ranking","table","typescript","visual-analysis","visual-analytics","visualisation","visualization"],"latest_commit_sha":null,"homepage":"https://lineup.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lineupjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-08T19:09:46.000Z","updated_at":"2025-03-07T16:05:50.000Z","dependencies_parsed_at":"2023-12-26T06:35:15.768Z","dependency_job_id":"f864cfd1-8305-4ca9-b6a3-1199d0e18a87","html_url":"https://github.com/lineupjs/lineupjs","commit_stats":{"total_commits":3528,"total_committers":27,"mean_commits":"130.66666666666666","dds":0.340702947845805,"last_synced_commit":"13b538ca778992dcad9cf063c39292aebf88968b"},"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lineupjs%2Flineupjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lineupjs%2Flineupjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lineupjs%2Flineupjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lineupjs%2Flineupjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lineupjs","download_url":"https://codeload.github.com/lineupjs/lineupjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["caleydo","javascript","javascript-library","lineup","ranking","table","typescript","visual-analysis","visual-analytics","visualisation","visualization"],"created_at":"2024-08-01T12:05:20.451Z","updated_at":"2026-01-27T22:23:18.533Z","avatar_url":"https://github.com/lineupjs.png","language":"TypeScript","readme":"# LineUp.js: Visual Analysis of Multi-Attribute Rankings\n\n[![License][bsd-image]][bsd-url] [![NPM version][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nLineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.\n\n## Key Features\n\n- scalable (~1M rows)\n- heterogenous attribute types (string, numerical, categorical, boolean, date)\n- composite column types (weighted sum, min, max, mean, median, impose, nested, ...)\n- array (multi value) and map column types (strings, stringMap, numbers, numberMap, ...)\n- filtering capabilities\n- hierarchical sorting (sort by more than one sorting criteria)\n- hierarchical grouping (split rows in multiple separate groups)\n- group aggregations (show a whole group as a single group row)\n- numerous visualizations for summaries, cells, and group aggregations\n- side panel for easy filtering and column management\n- [React](#react), [Angular](#angular), [Vue.js](#vue), [Polymer](#polymer), [RShiny](#rshiny), [Juypter](#jupyter), [ObservableHQ](#observablehq), and [Power BI](#powerbi) wrapper\n- [Demo Application](#demo) with CSV import and export capabilities\n- [API Documentation](#api) based on generated TypeDoc documenation\n\n## Usage\n\n**Installation**\n\n```bash\nnpm install lineupjs\n```\n\n```html\n\u003clink href=\"https://unpkg.com/lineupjs/build/LineUpJS.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://unpkg.com/lineupjs/build/LineUpJS.js\"\u003e\u003c/script\u003e\n```\n\n**Minimal Usage Example**\n\n```javascript\n// generate some data\nconst arr = [];\nconst cats = ['c1', 'c2', 'c3'];\nfor (let i = 0; i \u003c 100; ++i) {\n  arr.push({\n    a: Math.random() * 10,\n    d: 'Row ' + i,\n    cat: cats[Math.floor(Math.random() * 3)],\n    cat2: cats[Math.floor(Math.random() * 3)],\n  });\n}\n```\n\n```javascript\nconst lineup = LineUpJS.asLineUp(document.body, arr);\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/Ozzbqp)\n\n[![Minimal Result](https://user-images.githubusercontent.com/4129778/34654173-32180ff8-f3f8-11e7-8469-229fa34a65dc.png)](https://codepen.io/sgratzl/pen/Ozzbqp)\n\n\u003ca id=\"advanced_usage_example\"\u003e\u003c/a\u003e\n\n**Advanced Usage Example**\n\n```javascript\n// arr from before\nconst builder = LineUpJS.builder(arr);\n\n// manually define columns\nbuilder\n  .column(LineUpJS.buildStringColumn('d').label('Label').width(100))\n  .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))\n  .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))\n  .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));\n\n// and two rankings\nconst ranking = LineUpJS.buildRanking()\n  .supportTypes()\n  .allColumns() // add all columns\n  .impose('a+cat', 'a', 'cat2'); // create composite column\n  .groupBy('cat')\n  .sortBy('a', 'desc')\n\n\nbuilder\n  .defaultRanking()\n  .ranking(ranking);\n\nconst lineup = builder.build(document.body);\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/vppyML)\n\n[![Advanced Result](https://user-images.githubusercontent.com/4129778/34654174-3235f784-f3f8-11e7-9361-44f5fa068bb9.png)](https://codepen.io/sgratzl/pen/vppyML)\n\n## Supported Browsers\n\n- Chrome 64+ (best performance)\n- Firefox 57+\n- Edge 16+\n\n\u003ca id=\"demo\"\u003e\u003c/a\u003e\n\n## Demo Application\n\nA demo application is located at [lineup_app](https://github.com/lineupjs/lineup_app). It support CSV Import, CSV Export, JSON Export, CodePen Export, nad local data management.\n\nThe application is deployed at [https://lineup.js.org/app](https://lineup.js.org/app)\n\n[![Screenshot](https://user-images.githubusercontent.com/4129778/36336600-8590a932-1389-11e8-8de0-269079efc37b.png)](https://lineup.js.org/app)\n\n\u003ca id=\"api\"\u003e\u003c/a\u003e\n\n## API Documentation\n\nLineUp is implemented in clean TypeScript in an object oriented manner. A fully generated API documentation based on [TypeDoc](https://typedoc.org) is available at https://lineup.js.org/main/docs\n\nLineUp can be build manually or using via the builder design pattern (see [Advanced Usage Example](#advanced_usage_example)). The builder design pattern in the more common way.\n\n### LineUp Builder\n\nThe simplest methods to create a new instance are:\n\n- [asLineUp](https://lineup.js.org/main/docs/functions/asLineUp.html) returning a ready to use [LineUp](https://lineup.js.org/main/docs/classes/LineUp.html) instance\n  ```ts\n  asLineUp(node: HTMLElement, data: any[], ...columns: string[]): LineUp\n  ```\n- [asTaggle](https://lineup.js.org/main/docs/functions/asTaggle.html) returning a ready to use [Taggle](https://lineup.js.org/main/docs/classes/Taggle.html) instance\n  ```ts\n  asTaggle(node: HTMLElement, data: any[], ...columns: string[]): Taggle\n  ```\n- [builder](https://lineup.js.org/main/docs/functions/builder.html) returning a new [DataBuilder](https://lineup.js.org/main/docs/classes/DataBuilder.html)\n  ```ts\n  builder(arr: any[]): DataBuilder`\n  ```\n\nThe `DataBuilder` allows on the one hand to specify the individual columns more specificly and the creation of custom rankings.\n\nBuilder factory functions for creating column descriptions include:\n\n- [buildStringColumn](https://lineup.js.org/main/docs/functions/buildStringColumn.html) returning a new [StringColumnBuilder](https://lineup.js.org/main/docs/classes/StringColumnBuilder.html)\n  ```ts\n  buildStringColumn(column: string): StringColumnBuilder\n  ```\n- [buildNumberColumn](https://lineup.js.org/main/docs/functions/buildNumberColumn.html) returning a new [NumberColumnBuilder](https://lineup.js.org/main/docs/classes/NumberColumnBuilder.html)\n  ```ts\n  buildNumberColumn(column: string, domain?: [number, number]): NumberColumnBuilder\n  ```\n- [buildCategoricalColumn](https://lineup.js.org/main/docs/functions/buildCategoricalColumn.html) returning a new [CategoricalColumnBuilder](https://lineup.js.org/main/CategoricalColumnBuilder.html)\n  ```ts\n  buildCategoricalColumn(column: string, categories?: (string | Partial\u003cICategory\u003e)[]): CategoricalColumnBuilder\n  ```\n- [buildHierarchicalColumn](https://lineup.js.org/main/docs/functions/buildHierarchicalColumn.html) returning a new [HierarchyColumnBuilder](https://lineup.js.org/main/HierarchyColumnBuilder.html)\n  ```ts\n  buildHierarchicalColumn(column: string, hierarchy?: IPartialCategoryNode): HierarchyColumnBuilder\n  ```\n- [buildDateColumn](https://lineup.js.org/main/docs/functions/buildDateColumn.html) returning a new [DateColumnBuilder](https://lineup.js.org/main/docs/classes/DateColumnBuilder.html)\n  ```ts\n  buildDateColumn(column: string): DateColumnBuilder\n  ```\n- [buildActionsColumn](https://lineup.js.org/main/docs/functions/buildActionColumn.html) returning a new [ActionsColumnBuilder](https://lineup.js.org/main/docs/classes/ActionsColumnBuilder.html)\n  ```ts\n  buildActionsColumn(): ActionsColumnBuilder\n  ```\n\nIn order to build custom rankings within the `DataBuilder` the [buildRanking](https://lineup.js.org/main/docs/functions/buildRanking.html) returning a new [RankingBuilder](https://lineup.js.org/main/docs/classes/RankingBuilder.html) is used.\n\n```ts\nbuildRanking(): RankingBuilder\n```\n\n### LineUp classes and manual creation\n\nThe relevant classes for creating a LineUp instance manually are [LineUp](https://lineup.js.org/main/docs/classes/LineUp.html), [Taggle](https://lineup.js.org/main/docs/classes/Taggle.html), and [LocalDataProvider](https://lineup.js.org/main/docs/classes/LocalDataProvider.html). A `LocalDataProvider` is an sub class of `ADataProvider` implementing the data model management based on a local JavaScript array. `LineUp` and `Taggle` are the visual interfaces to the `LocalDataProvider`.\n\nThe classes can be instantiated either using the factory pattern or via their regular class constructors:\n\n```ts\ncreateLineUp(container: HTMLElement, data: ADataProvider, config?: Partial\u003cILineUpOptions\u003e): LineUp\n\ncreateTaggle(container: HTMLElement, data: ADataProvider, config?: Partial\u003cITaggleOptions\u003e): Taggle\n\ncreateLocalDataProvider(data: any[], columns: IColumnDesc[], options?: Partial\u003cILocalDataProviderOptions\u003e): LocalDataProvider\n```\n\n```ts\nnew LineUp(node: HTMLElement, data: DataProvider, options?: Partial\u003cILineUpOptions\u003e): LineUp\nnew Taggle(node: HTMLElement, data: DataProvider, options?: Partial\u003cITaggleOptions\u003e): Taggle\nnew LocalDataProvider(data: any[], columns?: IColumnDesc[], options?: Partial\u003cILocalDataProviderOptions \u0026 IDataProviderOptions\u003e): LocalDataProvider\n```\n\nBoth `LineUp` and `Taggle` are sub classes of [ALineUp](https://lineup.js.org/main/docs/classes/ALineUp.html). The most important functions of this class include:\n\n- [`getHighlight(): number`](https://lineup.js.org/main/docs/classes/ALineUp.html#getHighlight) / [`setHighlight(dataIndex: number): void`](https://lineup.js.org/main/docs/classes/ALineUp.html#setHighlight)\n  to get and set the highlighted row identified by its index in the data. If none is highlighted `-1` is returned.\n- [`getSelection(): number[]`](https://lineup.js.org/main/docs/classes/ALineUp.html#getSelection) / [`setSelection(dataIndices: number[]): void`](https://lineup.js.org/main/docs/classes/ALineUp.html#setSelection)\n  to get and set the selected rows identified by their indices in the data\n- [`on(type: string, listener: IEventListener | null): this`](https://lineup.js.org/main/docs/classes/ALineUp.html#on) to listen to highlight and selection events. LineUp.js event mechanism is based on [d3 dispatch](https://github.com/d3/d3-dispatch), thus instead of an `off` method `null` is passed to disable listening to the event. The following events are sent out:\n  - [`highlightChanged(dataIndex: number): void`](https://lineup.js.org/main/docs/classes/ALineUp.html#on)\n  - [`selectionChanged(dataIndices: number[]): void`](https://lineup.js.org/main/docs/classes/ALineUp.html#on)\n\n\u003ca id=\"react\"\u003e\u003c/a\u003e\n\n## React Support (LineUp.jsx)\n\nA [React](https://reactjs.org/) wrapper is located at [lineupjsx](https://github.com/lineupjs/lineupjsx).\n\n**Installation**\n\n```bash\nnpm install --save lineupjsx\n```\n\n```html\n\u003clink href=\"https://unpkg.com/lineupjsx/build/LineUpJSx.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://unpkg.com/lineupjsx/build/LineUpJSx.js\"\u003e\u003c/script\u003e\n```\n\n**Minimal Usage Example**\n\n```javascript\n// generate some data\nconst arr = [];\nconst cats = ['c1', 'c2', 'c3'];\nfor (let i = 0; i \u003c 100; ++i) {\n  arr.push({\n    a: Math.random() * 10,\n    d: 'Row ' + i,\n    cat: cats[Math.floor(Math.random() * 3)],\n    cat2: cats[Math.floor(Math.random() * 3)],\n  });\n}\n```\n\n```jsx\n\u003cLineUp data={arr} /\u003e\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/mXEpMP)\n\nResult is same as the builder minimal example\n\n**Advanced Usage Example**\n\n```jsx\n// arr from before\n\u003cLineUp data={arr} defaultRanking\u003e\n  \u003cLineUpStringColumnDesc column=\"d\" label=\"Label\" width={100} /\u003e\n  \u003cLineUpCategoricalColumnDesc column=\"cat\" categories={cats} color=\"green\" /\u003e\n  \u003cLineUpCategoricalColumnDesc column=\"cat2\" categories={cats} color=\"blue\" /\u003e\n  \u003cLineUpNumberColumnDesc column=\"a\" domain={[0, 10]} color=\"blue\" /\u003e\n\n  \u003cLineUpRanking groupBy=\"cat\" sortBy=\"a:desc\"\u003e\n    \u003cLineUpSupportColumn type=\"*\" /\u003e\n    \u003cLineUpColumn column=\"*\" /\u003e\n    \u003cLineUpImposeColumn label=\"a+cat\" column=\"a\" categeoricalColumn=\"cat2\" /\u003e\n  \u003c/LineUpRanking\u003e\n\u003c/LineUp\u003e\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/yvJpWQ)\n\nResult is same as the builder advanced example\n\n\u003ca id=\"angular\"\u003e\u003c/a\u003e\n\n## Angular 6 Support (nglineup)\n\nAn [Angular](https://angular.io/) wrapper is located at [nglineup](https://github.com/lineupjs/nglineup).\n\n**Installation**\n\n```bash\nnpm install --save nglineup\n```\n\n**Minimal Usage Example**\n\n`app.module.ts`:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { LineUpModule } from '../lib/lineup.module';\n\nimport { AppComponent } from './app.component.1';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, LineUpModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n`app.component.ts`:\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {\n  readonly data = \u003cany[]\u003e[];\n\n  readonly cats = ['c1', 'c2', 'c3'];\n\n  constructor() {\n    const cats = this.cats;\n    for (let i = 0; i \u003c 100; ++i) {\n      this.data.push({\n        a: Math.random() * 10,\n        d: 'Row ' + i,\n        cat: cats[Math.floor(Math.random() * 3)],\n        cat2: cats[Math.floor(Math.random() * 3)],\n      });\n    }\n  }\n}\n```\n\n`app.component.html`:\n\n```html\n\u003clineup-lineup [data]=\"data\"\u003e\u003c/lineup-lineup\u003e\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/QxYgzN)\n\nResult is same as the builder minimal example\n\n**Advanced Usage Example**\n\n`app.component.html`:\n\n```html\n\u003clineup-lineup [data]=\"data\" [defaultRanking]=\"true\" style=\"height: 800px;\"\u003e\n  \u003clineup-string-column-desc column=\"d\" label=\"Label\" [width]=\"100\"\u003e\u003c/lineup-string-column-desc\u003e\n  \u003clineup-categorical-column-desc column=\"cat\" [categories]=\"cats\" color=\"green\"\u003e\u003c/lineup-categorical-column-desc\u003e\n  \u003clineup-categorical-column-desc column=\"cat2\" [categories]=\"cats\" color=\"blue\"\u003e\u003c/lineup-categorical-column-desc\u003e\n  \u003clineup-number-column-desc column=\"a\" [domain]=\"[0, 10]\" color=\"blue\"\u003e\u003c/lineup-number-column-desc\u003e\n\n  \u003clineup-ranking groupBy=\"cat\" sortBy=\"a:desc\"\u003e\n    \u003clineup-support-column type=\"*\"\u003e\u003c/lineup-support-column\u003e\n    \u003clineup-column column=\"*\"\u003e\u003c/lineup-column\u003e\n    \u003clineup-impose-column label=\"a+cat\" column=\"a\" categoricalColumn=\"cat2\"\u003e\u003c/lineup-impose-column\u003e\n  \u003c/lineup-ranking\u003e\n\u003c/lineup-lineup\u003e\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/BVMdZL)\n\nResult is same as the builder advanced example\n\n\u003ca id=\"vue\"\u003e\u003c/a\u003e\n\n## Vue.js Support (vue-lineup)\n\nA [Vue.js](https://vuejs.org) wrapper is located at [vue-lineup](https://github.com/lineupjs/vue-lineup).\n\n**Installation**\n\n```bash\nnpm install --save vue-lineup\n```\n\n**Minimal Usage Example**\n\n```ts\nconst cats = ['c1', 'c2', 'c3'];\nconst data = [];\nfor (let i = 0; i \u003c 100; ++i) {\n  data.push({\n    a: Math.random() * 10,\n    d: 'Row ' + i,\n    cat: cats[Math.floor(Math.random() * 3)],\n    cat2: cats[Math.floor(Math.random() * 3)],\n  });\n}\n\n// enable plugin to register components\nVue.use(VueLineUp);\n\nconst app = new Vue({\n  el: '#app',\n  template: `\u003cLineUp v-bind:data=\"data\" /\u003e`,\n  data: {\n    cats,\n    data,\n  },\n});\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/pKGmvK)\n\nResult is same as the builder minimal example\n\n**Advanced Usage Example**\n\n```ts\nconst app = new Vue({\n  el: '#app',\n  template: `\u003cLineUp v-bind:data=\"data\" defaultRanking=\"true\" style=\"height: 800px\"\u003e\n    \u003cLineUpStringColumnDesc column=\"d\" label=\"Label\" v-bind:width=\"100\" /\u003e\n    \u003cLineUpCategoricalColumnDesc column=\"cat\" v-bind:categories=\"cats\" color=\"green\" /\u003e\n    \u003cLineUpCategoricalColumnDesc column=\"cat2\" v-bind:categories=\"cats\" color=\"blue\" /\u003e\n    \u003cLineUpNumberColumnDesc column=\"a\" v-bind:domain=\"[0, 10]\" color=\"blue\" /\u003e\n    \u003cLineUpRanking groupBy=\"cat\" sortBy=\"a:desc\"\u003e\n      \u003cLineUpSupportColumn type=\"*\" /\u003e\n      \u003cLineUpColumn column=\"*\" /\u003e\n    \u003c/LineUpRanking\u003e\n  \u003c/LineUp\u003e`,\n  data: {\n    cats,\n    data,\n  },\n});\n```\n\n[CodePen](https://codepen.io/sgratzl/pen/vrboWB)\n\nResult is same as the builder advanced example\n\n\u003ca id=\"polymer\"\u003e\u003c/a\u003e\n\n## Polymer Support (LineUp-Element)\n\nA [Polymer 2.0](https://www.polymer-project.org/) web component wrapper is located at [lineup-element](https://github.com/lineupjs/lineup-element).\n\n**Installation**\n\n```bash\nbower install https://github.com/lineupjs/lineup-element\n```\n\n```html\n\u003clink rel=\"import\" href=\"bower_components/lineup-element/lineup-element.html\" /\u003e\n```\n\n**Minimal Usage Example**\n\n```javascript\n// generate some data\nconst arr = [];\nconst cats = ['c1', 'c2', 'c3'];\nfor (let i = 0; i \u003c 100; ++i) {\n  arr.push({\n    a: Math.random() * 10,\n    d: 'Row ' + i,\n    cat: cats[Math.floor(Math.random() * 3)],\n    cat2: cats[Math.floor(Math.random() * 3)]\n  })\n}\nconat data = { arr, cats };\n```\n\n```jsx\n\u003clineup-element data=\"[[data.arr]]\"\u003e\u003c/lineup-element\u003e\n```\n\nTODO\n[CodePen]()\n\nResult is same as the builder minimal example\n\n**Advanced Usage Example**\n\n```jsx\n// arr from before\n\u003clineup-element data=\"[[data.arr]]\" side-panel side-panel-collapsed default-ranking=\"true\"\u003e\n  \u003clineup-string-desc column=\"d\" label=\"Label\" width=\"100\"\u003e\u003c/lineup-string-desc\u003e\n  \u003clineup-categorical-desc column=\"cat\" categories=\"[[cats]]\" color=\"green\"\u003e\u003c/lineup-categorical-desc\u003e\n  \u003clineup-categorical-desc column=\"cat2\" categories=\"[[cats]]\" color=\"blue\"\u003e\u003c/lineup-categorical-desc\u003e\n  \u003clineup-number-desc column=\"a\" domain=\"[0, 10]\" color=\"blue\"\u003e\u003c/lineup-number-desc\u003e\n  \u003clineup-ranking group-by=\"cat\" sort-by=\"a:desc\"\u003e\n    \u003clineup-support-column type=\"*\"\u003e\u003c/lineup-support-column\u003e\n    \u003clineup-column column=\"*\"\u003e\u003c/lineup-column\u003e\n  \u003c/lineup-ranking\u003e\n\u003c/lineup-element\u003e\n```\n\nTODO\n[CodePen]()\n\nResult is same as the builder advanced example\n\n\u003ca id=\"rshiny\"\u003e\u003c/a\u003e\n\n## R, RShiny, and R Markdown Support\n\nA [HTMLWidget](https://www.htmlwidgets.org/) wrapper for R is located at [lineup_htmlwidget](https://github.com/lineupjs/lineup_htmlwidget).\nIt can be used within standalone [R Shiny](https://shiny.rstudio.com/) apps or [R Markdown](https://rmarkdown.rstudio.com/) files. Integrated plotting does not work due to an outdated integrated Webkit version in RStudio.\n[Crosstalk](https://rstudio.github.io/crosstalk/) is supported for synching selections and filtering among widgets.\n\n**Installation**\n\n```R\ndevtools::install_github(\"rstudio/crosstalk\")\ndevtools::install_github(\"lineupjs/lineup_htmlwidget\")\nlibrary(lineupjs)\n```\n\n**Examples**\n\n```R\nlineup(iris)\n```\n\n![iris output](https://user-images.githubusercontent.com/4129778/34919941-fec50232-f96a-11e7-95be-9eefb213e3d6.png)\n\n\u003ca id=\"jupyter\"\u003e\u003c/a\u003e\n\n## Jupyter Widget (to be released)\n\nA [Jupyter Widget](https://jupyter.org/widgets.html) wrapper for Python is located at [lineup_widget](https://github.com/lineupjs/lineup_widget).\n\n**Installation**\n\n```bash\npip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget\njupyter nbextension enable --py [--sys-prefix|--user|--system] lineup_widget\n```\n\nOr, if you use jupyterlab:\n\n```bash\npip install -e git+https://github.com/lineupjs/lineup_widget.git#egg=lineup_widget\njupyter labextension install @jupyter-widgets/jupyterlab-manager\n```\n\n**Examples**\n\n[![Launch Binder][binder-image]][binder-url]\n\n[binder-image]: https://camo.githubusercontent.com/70c5b4d050d4019f4f20b170d75679a9316ac5e5/687474703a2f2f6d7962696e6465722e6f72672f62616467652e737667\n[binder-url]: https://mybinder.org/repo/lineupjs/lineup_widget/examples\n\n```python\nimport lineup_widget\nimport pandas as pd\nimport numpy as np\n\ndf = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))\n\nw = lineup_widget.LineUpWidget(df)\nw.on_selection_changed(lambda selection: print(selection))\nw\n```\n\n![simple usage](https://user-images.githubusercontent.com/4129778/35321859-7925d3a6-00e8-11e8-9884-bcbc76ae51c9.png)\n\n```python\nfrom __future__ import print_function\nfrom ipywidgets import interact, interactive, interact_manual\n\ndef selection_changed(selection):\n    return df.iloc[selection]\n\ninteract(selection_changed, selection=lineup_widget.LineUpWidget(df));\n```\n\n![interact example](https://user-images.githubusercontent.com/4129778/35321846-6c5b07cc-00e8-11e8-9388-0acb65cbb509.png)\n\n\u003ca id=\"observablehq\"\u003e\u003c/a\u003e\n\n## Observable HQ\n\nA [ObservableHQ](https://observablehq.com/) wrapper is located at [lineup-js-observable](https://observablehq.com/@sgratzl/lineup-js-observable-library).\n\n```js\ndata = {\n  const arr = [];\n  const cats = ['c1', 'c2', 'c3'];\n  for (let i = 0; i \u003c 100; ++i) {\n    arr.push({\n      a: Math.random() * 10,\n      d: 'Row ' + i,\n      cat: cats[Math.floor(Math.random() * 3)],\n      cat2: cats[Math.floor(Math.random() * 3)]\n    })\n  }\n  return arr;\n}\n```\n\n```js\nimport { asLineUp } from '@sgratzl/lineup-js-observable-library';\n```\n\n```js\nviewof selection = asLineUp(arr)\n```\n\n[ObservableHQ](https://observablehq.com/@sgratzl/lineup-simple-example-with-observable-base)\n\n[![Minimal Result](https://user-images.githubusercontent.com/4129778/75078130-cd276d80-54d2-11ea-9496-0cc685e826ee.png)](https://observablehq.com/@sgratzl/lineup-simple-example-with-observable-base)\n\n### Advanced Usage Example\n\n```js\n// arr from before\nviewof selection = {\n  const b = builder(data);\n  b.column(\n    LineUpJS.buildStringColumn('d')\n      .label('Label')\n      .width(100)\n  )\n    .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))\n    .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))\n    .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));\n\n  // and two rankings\n  const ranking = LineUpJS.buildRanking()\n    .supportTypes()\n    .allColumns() // add all columns\n    .impose('a+cat', 'a', 'cat2') // create composite column\n    .groupBy('cat')\n    .sortBy('a', 'desc');\n\n  b.defaultRanking().ranking(ranking);\n  return b.build();\n}\n```\n\n[ObservableHQ](https://observablehq.com/@sgratzl/lineup-advanced-example)\n\n[![Advanced Result](https://user-images.githubusercontent.com/4129778/75078499-bfbeb300-54d3-11ea-92aa-b9ab0d2af043.png)](https://observablehq.com/@sgratzl/lineup-advanced-example)\n\n\u003ca id=\"powerbi\"\u003e\u003c/a\u003e\n\n## PowerBI Custom Visual (under development)\n\nA [PowerBI Visual](https://github.com/Microsoft/PowerBI-Visuals) wrapper is located at [lineup_powerbi](https://github.com/lineupjs/lineup_powerbi).\n\n**Installation**\n\nTODO\n\n**Examples**\n\nTODO\n\n## API Documentation\n\nSee [API documentation](https://lineup.js.org/main/docs) and [Develop API documentation](https://lineup.js.org/develop/docs)\n\n## Demos\n\nSee [Demos](https://lineup.js.org/main), [Develop Demos](https://lineup.js.org/develop), and [R Demos](https://lineup.js.org/R)\n\n## Related Publications\n\n**LineUp: Visual Analysis of Multi-Attribute Rankings** [Paper](https://data.caleydo.org/papers/2013_infovis_lineup.pdf) [Paper Website](https://caleydo.org/publications/2013_infovis_lineup/)\n\nSamuel Gratzl, Alexander Lex, Nils Gehlenborg, Hanspeter Pfister, and Marc Streit \u003cbr\u003e\nIEEE Transactions on Visualization and Computer Graphics (InfoVis '13), 19(12), pp. 2277–2286, [doi:10.1109/TVCG.2013.173](https://dx.doi.org/10.1109/TVCG.2013.173), 2013.\n\n:trophy: [IEEE VIS](https://ieeevis.org) InfoVis 2013 Best Paper Award\n\n**Taggle: Scalable Visualization of Tabular Data through Aggregation** [Paper Preprint](https://data.caleydo.org/papers/2019_sage_infovis_taggle.pdf) [Paper Website](https://caleydo.org/publications/2019_sage_infovis_taggle/)\n\nKatarina Furmanova, Samuel Gratzl, Holger Stitz, Thomas Zichner, Miroslava Jaresova, Martin Ennemoser, Alexander Lex, and Marc Streit \u003cbr\u003e\nInformation Visualization, 19(2): 114-136, [doi:10.1177/1473871619878085](https://dx.doi.org/10.1177/1473871619878085), 2019.\n\n## Dependencies\n\nLineUp.js depends on\n\n- [LineUpEngine](https://github.com/lineupjs/lineupengine) table rendering engine\n- [D3](https://d3js.org) utilities: scales, format, dragging\n- [Popper.js](https://popper.js.org) dialogs\n\n**Development Dependencies**\n\n[Webpack](https://webpack.github.io) is used as build tool. LineUp itself is written in [TypeScript](https://www.typescriptlang.org) and [SASS](https://sass-lang.com).\n\n## Development Environment\n\n**Installation**\n\nThe setup requires [Node.js v16 or higher](https://nodejs.org/en/download/).\n\n```bash\ngit clone https://github.com/lineupjs/lineupjs.git -b develop\ncd lineupjs\nnpm i -g yarn\nyarn install\nyarn sdks vscode\n```\n\n### Common commands\n\n```sh\nyarn start\nyarn run clean\nyarn run compile\nyarn test\nyarn run lint\nyarn run fix\nyarn run build\nyarn run docs\n```\n\n**Run E2E Tests**\n\nvia cypress.io\n\nVariant 1: with prebuilt LineUp\n\n```sh\nyarn run compile\nyarn run build\nyarn run cy:compile\nyarn run cy:open\n```\n\nVariant 2: with webpack-dev-server\n\nfirst shell:\n\n```sh\nyarn start\n```\n\nsecond shell:\n\n```sh\nyarn run cy:compile\nyarn run cy:start\n```\n\n## Authors\n\n- Samuel Gratzl (@sgratzl)\n- Holger Stitz (@thinkh)\n- The Caleydo Team (@caleydo)\n- datavisyn GmbH (@datavisyn)\n\n---\n\n\u003ca href=\"https://caleydo.org\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/4129778/34663868-5455cb76-f459-11e7-95db-f80db24026dc.png\" align=\"left\" width=\"200px\" hspace=\"10\" vspace=\"6\"\u003e\u003c/a\u003e\nThis repository was created as part of the **[The Caleydo Project](https://caleydo.org/)**.\n\n[npm-image]: https://badge.fury.io/js/lineupjs.svg\n[npm-url]: https://npmjs.org/package/lineupjs\n[bsd-image]: https://img.shields.io/badge/License-BSD%203--Clause-blue.svg\n[bsd-url]: https://opensource.org/licenses/BSD-3-Clause\n[github-actions-image]: https://github.com/lineupjs/lineupjs/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/lineupjs/lineupjs/actions\n","funding_links":[],"categories":["TypeScript","javascript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flineupjs%2Flineupjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flineupjs%2Flineupjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flineupjs%2Flineupjs/lists"}