Published
Edited
May 3, 2019
1 fork
3 stars
Insert cell
md`# Cytoscape.js`
Insert cell
container = html`<div id="cy"></div>`
Insert cell
Insert cell
settings = cy({
width: width,
container: container, // container to render in
elements: data,

style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
// 'width': 300,
'background-color': '#666',
'content': 'data(label)',
"shape": "data(type)",
"text-valign": "center",
"text-halign": "right"
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
"label": "data(label)",
'target-arrow-shape': 'triangle',
}
}
],

layout: {
name: 'breadthfirst',
directed: true,
padding: 10
}
})
Insert cell
cy = require("cytoscape@3.4.2/dist/cytoscape.umd.js")
Insert cell
style = html`<style>#cy { height: 600px; }</style>`
Insert cell

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.
Learn more