Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/higlass/range-track
A plugin track for displaying ranges in HiGlass
https://github.com/higlass/range-track
higlass range whisker
Last synced: about 1 month ago
JSON representation
A plugin track for displaying ranges in HiGlass
- Host: GitHub
- URL: https://github.com/higlass/range-track
- Owner: higlass
- License: mit
- Created: 2019-01-14T21:31:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:59:58.000Z (about 2 years ago)
- Last Synced: 2024-11-25T10:18:05.332Z (about 1 month ago)
- Topics: higlass, range, whisker
- Language: JavaScript
- Homepage: https://higlass.github.io/range-track
- Size: 3.79 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# HiGlass Range Track
> A track for plotting ranges in HiGlass
[![HiGlass](https://img.shields.io/badge/higlass-👍-red.svg?colorB=000000)](http://higlass.io)
[![Demo](https://img.shields.io/badge/demo-🙈-red.svg?colorB=fa0460)](https://higlass.github.io/range-track)
[![npm version](https://img.shields.io/npm/v/higlass-range.svg?colorB=fa04ac)](https://www.npmjs.com/package/higlass-range)
[![Build Status](https://img.shields.io/travis/higlass/range-track/master.svg?colorB=c304fa)](https://travis-ci.org/higlass/range-track)
[![code style prettier](https://img.shields.io/badge/code_style-prettier-9a04fa.svg)](https://github.com/prettier/prettier)![HiGlass](/teaser.png?raw=true 'A beautiful set of ranges')
**Live Demo:** [https://higlass.github.io/range-track](higlass.github.io/range-track)
**Note**: This is the source code for range track only! You might want to check out the following repositories as well:
- HiGlass viewer: https://github.com/higlass/higlass
- HiGlass server: https://github.com/higlass/higlass-server
- HiGlass docker: https://github.com/higlass/higlass-docker## Installation
```
npm install higlass-range
```## Usage
1. Make sure you load the range track prior to `hglib.js`. E.g.:
```
...
```
2. Configure the track in the view config.
```
{
top: [
{
server: 'http://higlass.io/api/v1',
tilesetUid: 'PjIJKXGbSNCalUZO21e_HQ',
uid: 'range',
type: 'range',
options: {
mode: 'whisker',
resolution: 10
}
}
],
...
}
```Take a look at [`example/index.html`](example/index.html) for an example.
3. You did it! We're so proud of you 🎉. You are truly the best!
4. If you are curious about all the available options, please see the table below:
| Name | Description | Default | Type |
|------------------|-----------------------------------------------------------|----------|--------|
| mode | Range mode. Can either be `minMax` or `whisker` | `minMax` | string |
| resolution | Number of data point to aggregate into one bar | `1` | number |
| minMaxColor | Color of the min-max range bar | `black` | string |
| minMaxOpacity | Opacity of the min-max range bar | `0.66` | number |
| minColor | Color of the min whisker line | `black` | string |
| minOpacity | Opacity of the min whisker line | `1` | number |
| maxColor | Color of the max whisker line | `black` | string |
| maxOpacity | Opacity of the max whisker line | `1` | number |
| meanColor | Color of the mean whisker line | `black` | string |
| meanOpacity | Opacity of the mean whisker line | `1` | number |
| stdFillColor | Fill color of the std body of the whisker plot | `white` | string |
| stdFillOpacity | Opacity of the fill color of std body of the whisker plot | `1` | number |
| stdStrokeColor | Color of the std border of the whisker plot | `black` | string |
| stdStrokeOpacity | Opacity of the std border of the whisker plot | `1` | number |
| vLineColor | Color of the vertical line of the whisker plot | `black` | string |
| vLineOpacity | Opacity of the vertical line of the whisker plot | `1` | number |## Development
### Installation
```bash
$ git clone https://github.com/higlass/range-track && range-track
$ npm install
```### Commands
**Developmental server**: `npm start`
**Production build**: `npm run build`