Giters

cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis

Home Page:https://js.cytoscape.org

Repository from Github https://github.comcytoscape/cytoscape.jsRepository from Github https://github.comcytoscape/cytoscape.js

Stripe charts

maxkfranz opened this issue · comments

commented

Description of new feature

What should the new feature do? For visual features, include an image/mockup of the expected output.

Allow for stripe charts on the nodes. Similar to the pie charts, the area of each stripe/slice shows the value:

Image

These properties allow you to create stripe chart backgrounds on nodes (demo). Note that 16 stripes maximum are supported per node, so in the properties 1 <= i <= 16. Of course, you must specify a numerical value for each property in place of i. Each nonzero sized stripe is placed in order of i, starting from the left and going rightwards for vertical stripes (stripe-direction: vertical) or starting from the top and going downwards for horizontal stripes (stripe-direction: horizontal).

You may find it useful to reserve a number to a particular colour for all nodes in your stylesheet. Then you can specify values for stripe-i-background-size accordingly for each node via a mapper. This would allow you to create consistently coloured pie charts in each node of the graph based on element data.

  • stripe-size : The diameter of the stripes, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px).
  • stripe-direction : The direction of the stripes, either vertical stripes or horizontal stripes. Vertical stripes are stacked from left to right, and horizontal stripes are stacked from top to bottom.
  • stripe-i-background-color : The colour of the node's ith stripe.
  • stripe-i-background-size : The size of the node's ith stripe, measured in percent (e.g. 25%).
  • stripe-i-background-opacity : The opacity of the node's ith stripe.

Motivation for new feature

Describe your use case for this new feature.

  • Compatibility with Cytoscape Desktop & Web

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

  • Ensure that the reporter has adequately described their idea. If not, elicit more information about the use case. You should iteratively build a spec together.
  • Ensure that the issue is a good fit for the core library. Some things are best done in extensions (e.g. UI-related features that aren't style-related). Some things are best done by app authors themselves -- instead of in Cytoscape libraries.
  • The issue has been associated with a corresponding milestone.
  • The commits have been incorporated into the unstable branch via pull request. The corresponding pull request is cross-referenced.