Last active
March 20, 2023 14:53
-
-
Save tonilastre/f14f9725793e27c3866112f20cd393d1 to your computer and use it in GitHub Desktop.
Orb examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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