Giter Club home page Giter Club logo

cytoscape.js-overlays's Introduction

Cytoscape Overlays

License: MIT NPM Package Github Actions

A Cytoscape.js plugin for adding layers that shows bars, histograms, sparklines, binary sparklines, symbols (categorical data), or boxplots next to nodes.

image

Great for showing numerical attributes such as experimental data of pathways nodes. image

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

or at this Open in CodePen

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

cytoscape.js-overlays's People

Contributors

dependabot[bot] avatar sgratzl avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

chongzhang-vis

cytoscape.js-overlays's Issues

using cytoscape.js-overlays standard JavaScript in single HTML file.

I would like to use this extension in a standard JavaScript in single HTML file.

so add the following script tag in my HTML
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/build/index.umd.min.js "></script>

however i could not get the overlay works.. any hints is appreciated.

CleanShot 2023-08-09 at 17 03 39@2x

below is my HTML file
`

<title>Sample</title> <style> body { margin: 0; } #app { width: 100vw; height: 100vh; display: block; } </style>
<script src="https://cdn.jsdelivr.net/npm/cytoscape"></script> <script src="https://cdn.jsdelivr.net/npm/cytoscape-layers@^2.1.0"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.umd.min.js"></script> 
<script>
  const cy = cytoscape({
    container: document.getElementById('app'),
    elements: [
      ...['a', 'c'].map((id) => ({
        data: {
          id,
          value: Math.random(),
          values: Array(1000)
            .fill(0)
            .map(() => Math.random()),
          line: Array(10)
            .fill(0)
            .map(() => Math.random()),
        },
      })),
      {
        data: {
          id: 'ac',
          source: 'a',
          target: 'c',
        },
      },
    ],
  });
  cy.overlays(
    [
      {
        position: 'top',
        vis: CytoscapeOverlays.renderBar('value', {
          backgroundColor: 'steelblue',
        }),
      },
      {
        vis: CytoscapeOverlays.renderBoxplot('values', {
          backgroundColor: 'darkred',
        }),
      },
      {
        vis: CytoscapeOverlays.renderHistogram('values', {
          backgroundColor: 'darkgreen',
        }),
      },
      {
        vis: CytoscapeOverlays.renderSparkLine('line', {
          backgroundColor: 'darkgreen',
        }),
      },
    ],
    {
      updateOn: 'render',
      backgroundColor: 'white',
    }
  );
</script>
`

image

Hello,Can I put image around？

Screenshots / Sketches

Context

  • Version:
  • Browser:

Additional context

image opacity

Excuse me, how to set the opacity of the image? I tried the following code, but it didn't work:

{
vis: CytoscapeOverlays.renderSymbol({
symbol: mySvgImage,
}),
position: 'bottom-right',
width: 20,
height: 20,
opacity:.3
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.