❤ code, music & data. Born in Aschaffenburg, BA course in Ireland at CIT, MA in Germany at h_da, now working as a happy data visualisation engineer in London 📊
Published
Edited
Jun 8, 2021
1 fork
Importers
1 star
c.nodes().map(n => n.position())
elements = {
const nodes = []
const edges = []
for (let sunId = 0; sunId < sunCount; sunId++) {
nodes.push({ data: { id: `${sunId}` }})
for (let planetId = 0; planetId < planetCount; planetId++) {
nodes.push({ data: { id: `${sunId}-${planetId}` }})
edges.push({ data: {id: `${sunId}--${planetId}`, source: `${sunId}`, target: `${sunId}-${planetId}` }})
for (let moonId = 0; moonId < moonCount; moonId++) {
nodes.push({ data: { id: `${sunId}-${planetId}-${moonId}` }})
edges.push({ data: {id: `${sunId}--${planetId}--${moonId}`, source: `${sunId}-${planetId}`, target: `${sunId}-${planetId}-${moonId}` }})
}
}
}
return { nodes, edges }
}
c = cytoscape({
container,
elements,
layout: { name: layout, animate: false }
});
combinedLayoutOptions = [ ...builtIn, ...extensions]
extensions = [
{
lib: cytoscape.use(await require('cytoscape-avsdf')),
name: 'avsdf',
description: 'The AVSDF layout. It organises nodes in a circle and tries to minimise edge crossings as much as possible. [(src)](https://github.com/iVis-at-Bilkent/cytoscape.js-avsdf)'
}, {
lib: cytoscape.use(await require('cytoscape-fcose')),
name: 'fcose',
description: 'The fCoSE layout is a faster version of the CoSE-Bilkent layout. It supports compound and non-compound graphs, giving top-tier end results and high performance for a force-directed layout. In addition, fCoSE supports user-specified constraints of the following types on nodes: fixed position, alignment and relative placement. If you want to use a force-directed layout, fCoSE should be the first layout you try. [(src)](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose)'
}, {
lib: cytoscape.use(await require('cytoscape-cose-bilkent')),
name: 'cose-bilkent',
description: 'The CoSE layout by Bilkent with enhanced compound node placement. CoSE Bilkent is a physics simulation (force-directed) layout that gives near-perfect end results. However, it’s more expensive than both cose and fcose. [(src)](https://github.com/cytoscape/cytoscape.js-cose-bilkent)'
}
// throw '$e: invalid module' ?
/*, {
lib: cytoscape.use(await require('cytoscape-ngraph.forcelayout')),
name: 'ngraph.forcelayout',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-d3-force')),
name: 'd3-force',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-klay')),
name: 'klay',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-elk')),
name: 'elk',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-dagre')),
name: 'dagre',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-cola')),
name: 'cola',
description: ''
}, {
lib: cytoscape.use(await require('cytoscape-cosep')),
name: 'cosep',
description: ''
}*/
]
builtIn = [
{
name: 'random',
description: 'The random layout puts nodes in random positions within the viewport. [(docs)](https://js.cytoscape.org/#layouts/random)'
}, {
name: 'grid',
description: 'The grid layout puts nodes in a well-spaced grid. [(docs)](https://js.cytoscape.org/#layouts/grid)'
}, {
name: 'circle',
description: 'The circle layout puts nodes in a circle. [(docs)](https://js.cytoscape.org/#layouts/circle)'
}, {
name: 'concentric',
description: 'The concentric layout positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels. This layout sets the concentric value in `ele.scratch()`. [(docs)](https://js.cytoscape.org/#layouts/concentric)'
}, {
name: 'breadthfirst',
description: 'The breadthfirst layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph. It is best suited to trees and forests in its default top-down mode, and it is best suited to DAGs in its circle mode. [(docs)](https://js.cytoscape.org/#layouts/breadthfirst)'
}, {
name: 'cose',
description: `The cose (Compound Spring Embedder) layout uses a physics simulation to lay out graphs. It works well with noncompound graphs and it has additional logic to support compound graphs well.
It was implemented by Gerardo Huck as part of Google Summer of Code 2013 (Mentors: Max Franz, Christian Lopes, Anders Riutta, Ugur Dogrusoz).
Based on the article “A layout algorithm for undirected compound graphs” by Ugur Dogrusoz, Erhan Giral, Ahmet Cetintas, Ali Civril and Emek Demir.
The cose layout is very fast and produces good results. The cose-bilkent extension is an evolution of the algorithm that is more computationally expensive but produces near-perfect results.
[(docs)](https://js.cytoscape.org/#layouts/cose)
`
}
]
cytoscape = require('cytoscape');
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
