https://github.com/epiviz/epiviz-chart
Epiviz-chart: Component library for genomic data visualization
https://github.com/epiviz/epiviz-chart
data-visualization epiviz genomics polymer visualization webcomponents
Last synced: 8 days ago
JSON representation
Epiviz-chart: Component library for genomic data visualization
- Host: GitHub
- URL: https://github.com/epiviz/epiviz-chart
- Owner: epiviz
- Created: 2016-08-22T15:35:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T06:11:58.000Z (about 3 years ago)
- Last Synced: 2024-04-17T06:57:36.416Z (almost 2 years ago)
- Topics: data-visualization, epiviz, genomics, polymer, visualization, webcomponents
- Language: HTML
- Homepage: http://epiviz.github.io/components
- Size: 22.8 MB
- Stars: 5
- Watchers: 8
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Documentation
Documentation for the web components is available at
https://epiviz.github.io/components/
# Usage from cdn
Add this to HTML head (loads dependencies)
# For development
To locally setup `epiviz-chart`
- Clone the repo
`git clone https://github.com/epiviz/epiviz-chart`
- Install Bower from bower.io
- install bower dependencies
`bower install`
- Install polymer-cli
`polymer server`
# Dependency in an application
`bower install --save epiviz/epiviz-chart`
# Demos
demo folder contains examples of various epiviz components
- `index-json.html` should work as it contains static data in the html
most other examples, require an instance of EFS running.
To run a local instance of polymer-server
`polymer serve -p 8080`
Then navigate to any files inside the demo folder
http://localhost:8080/components/epiviz-charts/demo/
# Epiviz-environment or Epiviz-nav elements
(also checkout `demo/index-readme.html`)
Imagine a html page containing a navigational element (a genome browser)
```
```
We can add a visualization with static data assigned to the element.
```
elem = document.createElement('epiviz-scatter-plot');
elem.setAttribute('json-data', '{ \
"rows": { \
"end": [101454659,0,417130,0,0,83502,0,148863,0,0], \
"start": [101322295,0,463451,0,0,132428,0,63018,0,0], \
"chr": ["chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11","chr11"] \
}, \
"cols": { \
"ExpressionA": [-0.188,0.153,-0.762,0.53,-0.776,-0.32,-0.731,6.503,11.087,10.569], \
"ExpressionB": [-0.325,-0.289,-0.523,1.417,-0.636,-0.89,-0.786,4.885,9.112,8.862] \
} \
}');
elem.setAttribute('dim-s', '["ExpressionA", "ExpressionB"]');
// instead can also set `json-data` on the component
elem.slot="charts"
```
Add the plot to the dom
```
nav = document.querySelector('#nav')
nav.appendChild(elem)
```
We can programmatically update any of the attributes on the visualization. This should be similar to updating attributes in JS.
```
// get chart
chart = document.querySelector("epiviz-scatter-plot")
// get current chart settings
currentSettings = chart.chartSettings;
// modify chart settings
currentSettings["circleRadiusRatio"] = 0.1;
// set settings back to chart
chart.setAttribute("chart-settings", JSON.stringify(currentSettings));
```
Similarly, can also update `chart-colors` & other attributes
# Optimize elements for production
```
npm install -g polymer-bundler
polymer-bundler --inline-scripts --inline-css --strip-comments epiviz-charts.html > dist/epiviz-charts.html
```
# Docker Instructions
The docker setup, runs polymer server to serve the components and/or app pages, and nginx as a proxy.
To build,
`docker build . -t epiviz-chart`
`--no-cache` for rebuilding during development
To run,
`docker run -p 80:80 -dt epiviz-chart`
## Development
For development, also expose port 8081 on the container.
`docker run -p 80:80 -p 8081:8081 -dt epiviz-chart`
To use the container for serving app pages,
copy html files to /app/,
there's an nginx route (\/app/) configured to serve these pages.
The included `index.html` uses the loader.