README
Cytoscape Overlays
A Cytoscape.js plugin for adding layers that shows bars, histograms, sparklines, binary sparklines, symbols (categorical data), or boxplots next to nodes.
Great for showing numerical attributes such as experimental data of pathways nodes.
Install
npm install --save cytoscape cytoscape-layers cytoscape-overlays
Usage
const cy = cytoscape({
container: document.getElementById('app'),
elements: [
{
data: {
id: 'a',
value: Math.random(),
values: Array(100)
.fill(0)
.map(() => Math.random()),
},
},
{
data: {
id: 'b',
value: Math.random(),
values: Array(100)
.fill(0)
.map(() => Math.random()),
},
},
{
data: {
id: 'ab',
source: 'a',
target: 'b',
},
},
],
});
cy.overlays(
[
{
position: 'top',
vis: CytoscapeOverlays.renderBar('value', {
backgroundColor: 'steelblue',
}),
},
{
vis: CytoscapeOverlays.renderBoxplot('values', {
backgroundColor: 'darkred',
}),
},
{
vis: CytoscapeOverlays.renderHistogram('values', {
backgroundColor: 'darkgreen',
}),
},
],
{
updateOn: 'render',
backgroundColor: 'white',
}
);
see Samples on Github
Development Environment
npm i -g yarn
yarn set version latest
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk vscode
Common commands
yarn clean
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre