Published
Edited
Apr 7, 2022
1 star
{
cytoscape.use(dagre);
var cy = cytoscape({
container: document.getElementById("myGraph"), // container to render in
userZoomingEnabled: true,
elements: {
nodes: [
{ data: { id: "a", parent: "b", score: 3 } },
{ data: { id: "b", score: 5, weight: 10 } },
{ data: { id: "c", parent: "b", score: 1, weight: 10 } },
{ data: { id: "d", score: 4 } },
{ data: { id: "e", score: 0 } },
{ data: { id: "f", parent: "e" } }
],
edges: [
{
data: { id: "ac", source: "a", target: "c", score: 5, weight: 10 }
},
{ data: { id: "eb", source: "e", target: "b" } },
{ data: { id: "db", source: "d", target: "b" } }
]
},
layout: {
name: "dagre",
rows: 1
},
style: [
{
selector: "node",
style: {
"background-opacity": function (ele) {
return opacity(ele);
},
"background-color": function (ele) {
return color(ele);
},
width: function (ele) {
return nodeSize(ele);
},
height: function (ele) {
return nodeSize(ele);
},
label: "data(id)"
}
},
{
selector: ":parent",
style: {
"background-color": "blue",
"background-opacity": 0.5,
"z-compound-depth": "auto"
}
},
{
selector: "edge",
style: {
width: 3,
lineColor: function (ele) {
return color(ele);
},
targetArrowColor: function (ele) {
return color(ele);
},
targetArrowShape: "triangle",
curveStyle: "bezier"
}
}
]
});
}
color = function (ele) {
if (ele) {
var score = ele.data("score");
if (score) {
if (score > 3) {
return "red";
}
if (score > 1) {
return "yellow";
}
return "pink";
}
return "black";
}
return "lime";
}
opacity = function (ele) {
if (ele) {
var weight = ele.data("weight");
if (weight) {
if (weight > 3) {
return 1.0;
}
if (weight > 1) {
return 0.75;
}
return 0.5;
}
return 0.2;
}
return 0.1;
}
nodeSize = function (ele) {
var weight = ele.data("weight");
if (weight) {
if (weight > 3) {
return 100;
}
if (weight > 1) {
return 75;
}
}
return 30;
}
cytoscape = require('cytoscape@3.19.1/dist/cytoscape.min.js')
dagre = (await import("https://cdn.skypack.dev/cytoscape-dagre")).default
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.
