sgratzl / cytoscape.js-overlays

Cytoscape.js plugin for rendering node overlays

Servus

I'm Sam. I'm a research software engineer with a focus on interactive data exploration. I'm a Full Stack Developer with 10+ years of experience. In 2017, I finished his PhD in Computer Science with a focus on Information Visualization at the Johannes Kepler University, Linz, Austria. I love to dig into code, hunt bugs, and design new platforms. My goal is enabling researcher to discover more insights easier and faster as well as develop libraries that help others developers to do the same.

I create and maintain specialized visualization libraries such as LineUp-lite, LineUp.js or UpSet.js. In addition, I contribute and create plugins for web visualization frameworks such as chart.js or cytoscape.js.

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.

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 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
}

image

Hello,Can I put image around？

Screenshots / Sketches

Context

• Version:
• Browser:

Additional context