Skip to content

Instantly share code, notes, and snippets.

@tonilastre

tonilastre/orb-example-custom-styled-graph.html

Last active March 20, 2023 14:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonilastre/f14f9725793e27c3866112f20cd393d1 to your computer and use it in GitHub Desktop.
Save tonilastre/f14f9725793e27c3866112f20cd393d1 to your computer and use it in GitHub Desktop.
Download ZIP
Orb examples
Raw
orb-example-custom-styled-graph.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Orb | Render a custom-styled graph</title>
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#graph {
height: 100%;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
const container = document.getElementById('graph');
const nodes = [
{ id: 1, name: 'House of the Dragon', type: 'Show' },
{ id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' },
{ id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' },
];
const edges = [
{ id: 1, start: 2, end: 1 },
{ id: 2, start: 3, end: 1 },
{ id: 3, start: 4, end: 1 },
{ id: 4, start: 5, end: 1 },
{ id: 5, start: 6, end: 1 },
{ id: 6, start: 3, end: 4, label: 'brother of' },
{ id: 7, start: 4, end: 3, label: 'brother of' },
{ id: 8, start: 2, end: 4, label: 'child of' },
{ id: 9, start: 6, end: 5, label: 'child of' },
];
const orb = new Orb.Orb(container);
const imageUrlByNodeId = {
1: 'https://static.hbo.com/2022-06/house-of-the-dragon-ka-1920.jpg',
2: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-rhaenyra-512x512_0.jpg?w=512',
3: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-daemon-512x512.jpg?w=512',
4: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-viserys-512x512_0.jpg?w=512',
5: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-otto-512x512.jpg?w=512',
6: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-alicent-512x512_2.jpg?w=512'
}
const colorByFamily = {
'Targaryen': '#c51c1c',
'Hightower': '#1ead2a',
}
// Set default style for new nodes and new edges
orb.data.setDefaultStyle({
getNodeStyle(node) {
const imageUrl = imageUrlByNodeId[node.id];
// Shared style properties for all the nodes
const commonProperties = {
size: 10,
fontSize: 3,
imageUrl,
label: node.data.name,
};
// Specific style properties for nodes where ".type = 'Person'"
if (node.data.type === 'Person') {
return {
...commonProperties,
// Border color will be the color of the family
borderColor: colorByFamily[node.data.family],
borderWidth: 0.9,
size: 6,
};
}
return commonProperties;
},
getEdgeStyle(edge) {
// Using Orb.Color to easily generate darker colors below
const familyColor = new Orb.Color(colorByFamily[edge.endNode.data.family] ?? '#999999');
return {
color: familyColor,
colorHover: familyColor.getDarkerColor(),
colorSelected: familyColor.getDarkerColor(),
fontSize: 3,
fontColor: familyColor.getDarkerColor(),
// Edges will "label" property will have 3x larger width
width: edge.data.label ? 0.3 : 0.1,
widthHover: 0.9,
widthSelected: 0.9,
label: edge.data.label,
};
},
});
// Initialize nodes and edges
orb.data.setup({ nodes, edges });
// Render and recenter the view
orb.view.render(() => {
orb.view.recenter();
});
</script>
</body>
</html>
Raw
orb-example-graph-data-changes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Orb | Handle graph data changes</title>
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#graph {
height: 100%;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
const container = document.getElementById('graph');
const nodes = [
{ id: 1, name: 'House of the Dragon', type: 'Show' },
{ id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' },
{ id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' },
];
const edges = [
{ id: 1, start: 2, end: 1 },
{ id: 2, start: 3, end: 1 },
{ id: 3, start: 4, end: 1 },
{ id: 4, start: 5, end: 1 },
{ id: 5, start: 6, end: 1 },
{ id: 6, start: 3, end: 4, label: 'brother of' },
{ id: 7, start: 4, end: 3, label: 'brother of' },
{ id: 8, start: 2, end: 4, label: 'child of' },
{ id: 9, start: 6, end: 5, label: 'child of' },
];
const orb = new Orb.Orb(container);
const imageUrlByNodeId = {
1: 'https://static.hbo.com/2022-06/house-of-the-dragon-ka-1920.jpg',
2: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-rhaenyra-512x512_0.jpg?w=512',
3: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-daemon-512x512.jpg?w=512',
4: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-viserys-512x512_0.jpg?w=512',
5: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-otto-512x512.jpg?w=512',
6: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-alicent-512x512_2.jpg?w=512'
}
const colorByFamily = {
'Targaryen': '#c51c1c',
'Hightower': '#1ead2a',
}
// Set default style for new nodes and new edges
orb.data.setDefaultStyle({
getNodeStyle(node) {
const imageUrl = imageUrlByNodeId[node.id];
// Shared style properties for all the nodes
const commonProperties = {
size: 10,
fontSize: 3,
imageUrl,
label: node.data.name,
};
// Specific style properties for nodes where ".type = 'Person'"
if (node.data.type === 'Person') {
return {
...commonProperties,
// Border color will be the color of the family
borderColor: colorByFamily[node.data.family],
borderWidth: 0.9,
size: 6,
};
}
return commonProperties;
},
getEdgeStyle(edge) {
// Using Orb.Color to easily generate darker colors below
const familyColor = new Orb.Color(colorByFamily[edge.endNode.data.family] ?? '#999999');
return {
color: familyColor,
colorHover: familyColor.getDarkerColor(),
colorSelected: familyColor.getDarkerColor(),
fontSize: 3,
fontColor: familyColor.getDarkerColor(),
// Edges will "label" property will have 3x larger width
width: edge.data.label ? 0.3 : 0.1,
widthHover: 0.9,
widthSelected: 0.9,
label: edge.data.label,
};
},
});
// Initialize nodes and edges
orb.data.setup({ nodes, edges });
// Change view settings to enable the physics (graph is more alive), and to
// disable transparency of unselected/not hovered nodes/edges
orb.view.setSettings({
simulation: {
isPhysicsEnabled: true,
},
render: {
contextAlphaOnEventIsEnabled: false,
},
});
orb.events.on('node-click', (event) => {
if (event.node.data.type === 'Show') {
// If it is a central "Show" node, we want to return all the nodes and
// edges - we use merge
orb.data.merge({ nodes, edges });
} else {
// Otherwise, remove the clicked node from the orb
orb.data.remove({ nodeIds: [event.node.id] });
}
orb.view.render();
});
orb.events.on('edge-click', (event) => {
// On edge click, we want to remove the clicked edge
orb.data.remove({ edgeIds: [event.edge.id] });
orb.view.render();
});
// Render and recenter the view
orb.view.render(() => {
orb.view.recenter();
});
</script>
</body>
</html>
Raw
orb-example-graph-events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Orb | Handle graph events</title>
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#graph {
height: 100%;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
const container = document.getElementById('graph');
const nodes = [
{ id: 1, name: 'House of the Dragon', type: 'Show' },
{ id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' },
{ id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' },
];
const edges = [
{ id: 1, start: 2, end: 1 },
{ id: 2, start: 3, end: 1 },
{ id: 3, start: 4, end: 1 },
{ id: 4, start: 5, end: 1 },
{ id: 5, start: 6, end: 1 },
{ id: 6, start: 3, end: 4, label: 'brother of' },
{ id: 7, start: 4, end: 3, label: 'brother of' },
{ id: 8, start: 2, end: 4, label: 'child of' },
{ id: 9, start: 6, end: 5, label: 'child of' },
];
const orb = new Orb.Orb(container);
const imageUrlByNodeId = {
1: 'https://static.hbo.com/2022-06/house-of-the-dragon-ka-1920.jpg',
2: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-rhaenyra-512x512_0.jpg?w=512',
3: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-daemon-512x512.jpg?w=512',
4: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-viserys-512x512_0.jpg?w=512',
5: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-otto-512x512.jpg?w=512',
6: 'https://static.hbo.com/2022-05/house-of-the-dragon-character-alicent-512x512_2.jpg?w=512'
}
const colorByFamily = {
'Targaryen': '#c51c1c',
'Hightower': '#1ead2a',
}
// Set default style for new nodes and new edges
orb.data.setDefaultStyle({
getNodeStyle(node) {
const imageUrl = imageUrlByNodeId[node.id];
// Shared style properties for all the nodes
const commonProperties = {
size: 10,
fontSize: 3,
imageUrl,
label: node.data.name,
};
// Specific style properties for nodes where ".type = 'Person'"
if (node.data.type === 'Person') {
return {
...commonProperties,
// Border color will be the color of the family
borderColor: colorByFamily[node.data.family],
borderWidth: 0.9,
size: 6,
};
}
return commonProperties;
},
getEdgeStyle(edge) {
// Using Orb.Color to easily generate darker colors below
const familyColor = new Orb.Color(colorByFamily[edge.endNode.data.family] ?? '#999999');
return {
color: familyColor,
colorHover: familyColor.getDarkerColor(),
colorSelected: familyColor.getDarkerColor(),
fontSize: 3,
fontColor: familyColor.getDarkerColor(),
// Edges will "label" property will have 3x larger width
width: edge.data.label ? 0.3 : 0.1,
widthHover: 0.9,
widthSelected: 0.9,
label: edge.data.label,
};
},
});
// Initialize nodes and edges
orb.data.setup({ nodes, edges });
orb.events.on('node-click', (event) => {
console.log('Event: node-click', event);
});
orb.events.on('node-hover', (event) => {
console.log('Event: node-hover', event);
});
orb.events.on('edge-click', (event) => {
console.log('Event: edge-click', event);
});
// Render and recenter the view
orb.view.render(() => {
orb.view.recenter();
});
</script>
</body>
</html>
Raw
orb-example-graph-on-map-background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Orb | Render a graph with a map background</title>
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<style>
html, body {
height: 100%;
margin: 0;
}
#graph {
height: 100%;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
const container = document.getElementById('graph');
const nodes = [
{ id: 'miami', label: 'Miami', lat: 25.789106, lng: -80.226529 },
{ id: 'sanjuan', label: 'San Juan', lat: 18.4663188, lng: -66.1057427 },
{ id: 'hamilton', label: 'Hamilton', lat: 32.294887, lng: -64.781380 },
];
const edges = [
{ id: 0, start: 'miami', end: 'sanjuan' },
{ id: 1, start: 'sanjuan', end: 'hamilton' },
{ id: 2, start: 'hamilton', end: 'miami' },
];
const orb = new Orb.Orb(container);
orb.setView((context) => new Orb.MapView(context, {
getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
}));
// Assign a default style
orb.data.setDefaultStyle({
getNodeStyle(node) {
return {
borderColor: '#FFFFFF',
borderWidth: 1,
color: '#DD2222',
fontSize: 10,
label: node.data.label,
size: 10,
};
},
getEdgeStyle() {
return {
arrowSize: 0,
color: '#DD2222',
width: 3,
};
},
});
// Initialize nodes and edges
orb.data.setup({ nodes, edges });
// Render and recenter the view
orb.view.render(() => {
orb.view.recenter();
});
</script>
</body>
</html>
Raw
orb-example-simple-graph.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Orb | Render a simple graph</title>
<script src="https://unpkg.com/@memgraph/orb@0.0.2/dist/browser/orb.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#graph {
height: 100%;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
const container = document.getElementById('graph');
const nodes = [
{ id: 1, name: 'House of the Dragon', type: 'Show' },
{ id: 2, name: 'Rhaenyra Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 3, name: 'Daemon Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 4, name: 'Viserys Targaryen', type: 'Person', family: 'Targaryen' },
{ id: 5, name: 'Otto Hightower', type: 'Person', family: 'Hightower' },
{ id: 6, name: 'Alicent Hightower', type: 'Person', family: 'Hightower' },
];
const edges = [
{ id: 1, start: 2, end: 1 },
{ id: 2, start: 3, end: 1 },
{ id: 3, start: 4, end: 1 },
{ id: 4, start: 5, end: 1 },
{ id: 5, start: 6, end: 1 },
{ id: 6, start: 3, end: 4, label: 'brother of' },
{ id: 7, start: 4, end: 3, label: 'brother of' },
{ id: 8, start: 2, end: 4, label: 'child of' },
{ id: 9, start: 6, end: 5, label: 'child of' },
];
const orb = new Orb.Orb(container);
// Initialize nodes and edges
orb.data.setup({ nodes, edges });
// Render and recenter the view
orb.view.render(() => {
orb.view.recenter();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment