Appearance
All settings
This example shows how to tweak Ogma settings.
js
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
Ogma.parse
.jsonFromUrl('solarCity.json')
.then(g => ogma.setGraph(g))
.then(() => ogma.view.locateGraph());
const options = ogma.getOptions();
const colorOptions = {};
const stringValues = {
renderer: { webgl: 'webgl', canvas: 'canvas', svg: 'svg' },
removalStrategy: { topDown: 'topDown', bottomUp: 'bottomUp' },
// the values below are not exhaustive:
// cursor can be any CSS cursor, easing can be linear etc
cursor: { pointer: 'pointer', wait: 'wait', grab: 'grab', help: 'help' },
multiSelectionKey: { ctrl: 'ctrl', shift: 'shift', alt: 'alt' },
easing: { quadraticOut: 'quadraticOut', quadraticInOut: 'quadraticInOut' }
};
/**
* @param {object} rgba
* @param {number} rgba.r
* @param {number} rgba.g
* @param {number} rgba.b
* @returns {string}
*/
function formatGRBA(rgba) {
const r = Math.floor(rgba.r);
const g = Math.floor(rgba.g);
const b = Math.floor(rgba.b);
return `rgba(${r},${g},${b},${rgba.a})`;
}
function createUIRecursive(parent, obj) {
Object.entries(obj).forEach(([key, value]) => {
let input;
if (typeof value === 'boolean') {
input = parent.addInput(obj, key);
}
if (typeof value === 'number') {
input = parent.addInput(obj, key, {
min: 0,
max: value > 1 ? value * 2 : 100
});
}
if (typeof value === 'object') {
const folder = parent.addFolder({
title: key
});
return createUIRecursive(folder, obj[key]);
}
if (typeof value === 'string') {
if (key.match(/Color/)) {
colorOptions[key] = { r: 255, g: 255, b: 255, a: 1 };
return parent.addInput(colorOptions, key).on('change', evt => {
obj[key] = formatGRBA(evt);
ogma.setOptions(options);
});
}
const fieldOptions =
stringValues[key] ||
(['default', 'node', 'edge'].includes(key)
? stringValues.cursor
: null);
if (fieldOptions) {
input = parent.addInput(obj, key, { options: fieldOptions });
}
}
if (!input) return;
input.on('change', () => ogma.setOptions(options));
});
}
const pane = new Tweakpane({
container: document.getElementById('gui-container')
});
createUIRecursive(pane, options);
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/tweakpane@1.5.7/dist/tweakpane.min.js">
</script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<div id="graph-container"></div>
<div id="gui-container"></div>
<script src="index.js"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
#gui-container{
position: absolute;
z-index: 100;
opacity: 1;
overflow-y: scroll;
overflow-x: hidden;
max-height: 400px;
right: 0px;
}
#gui-container::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#gui-container::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
#gui-container::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
json
{
"nodes": [
{
"id": 8666,
"data": {
"properties": {
"name": "Elon Musk",
"permalink": "/person/elon-musk",
"url": "http://www.crunchbase.com/person/elon-musk",
"picture": "img/musk.jpg"
},
"categories": [
"INVESTOR"
]
},
"attributes": {
"x": 25.858288814166933,
"y": -7.103984513542148,
"text": "Elon Musk",
"radius": 3,
"icon": {
"font": "Font Awesome 5 Free",
"content": "",
"color": "#fff",
"style": "bold"
}
}
},
{
"id": 6870,
"data": {
"properties": {
"name": "SolarCity",
"permalink": "/organization/solarcity",
"founded_at": "01/01/2006",
"first_funding_at": "15/09/2006",
"market": " Construction ",
"founded_quarter": "2006-Q1",
"founded_year": 2006,
"state": "CA",
"url": "http://www.crunchbase.com/organization/solarcity",
"country": "USA",
"homepage_url": "http://www.solarcity.com",
"logo": "http://www.crunchbase.com/organization/solarcity/primary-image/raw",
"founded_month": "2006-01",
"funding_rounds": 13,
"status": "operating",
"funding_total": 1045040000,
"region": "SF Bay Area",
"category": "|Construction|Clean Technology|",
"last_funding_at": "18/06/2013"
},
"categories": [
"COMPANY",
"INVESTOR"
]
},
"attributes": {
"x": 0.09298533946275711,
"y": 0.41120362281799316,
"text": "SolarCity",
"color": "#f35371",
"radius": 7,
"icon": {
"font": "Font Awesome 5 Free",
"content": "",
"color": "#fff",
"style": "bold"
}
}
},
{
"id": 7396,
"data": {
"properties": {
"name": "Tesla Motors",
"permalink": "/organization/tesla-motors",
"founded_at": "01/01/2003",
"first_funding_at": "01/04/2004",
"market": " Automotive ",
"founded_quarter": "2003-Q1",
"founded_year": 2003,
"state": "CA",
"url": "http://www.crunchbase.com/organization/tesla-motors",
"country": "USA",
"homepage_url": "http://www.teslamotors.com",
"logo": "http://www.crunchbase.com/organization/tesla-motors/primary-image/raw",
"founded_month": "2003-01",
"funding_rounds": 11,
"status": "operating",
"funding_total": 823000000,
"region": "SF Bay Area",
"category": "|Automotive|",
"last_funding_at": "10/10/2012"
},
"categories": [
"COMPANY"
]
},
"attributes": {
"x": 85.876122673705,
"y": -21.207117111759345,
"text": "Tesla Motors",
"color": "#cd476a",
"radius": 6,
"icon": {
"font": "Font Awesome 5 Free",
"content": "",
"color": "#fff",
"style": "bold"
}
}
},
{
"id": 2982,
"data": {
"properties": {
"name": "First Solar",
"permalink": "/organization/first-solar",
"founded_at": "01/01/1999",
"first_funding_at": "18/06/2013",
"market": " Semiconductors ",
"founded_quarter": "1999-Q1",
"founded_year": 1999,
"state": "AZ",
"url": "http://www.crunchbase.com/organization/first-solar",
"country": "USA",
"homepage_url": "http://www.firstsolar.com",
"logo": "http://www.crunchbase.com/organization/first-solar/primary-image/raw",
"founded_month": "1999-01",
"funding_rounds": 1,
"status": "operating",
"funding_total": 427700000,
"region": "Phoenix",
"category": "|Semiconductors|Clean Technology|",
"last_funding_at": "18/06/2013"
},
"categories": [
"COMPANY",
"INVESTOR"
]
},
"attributes": {
"x": -27.6874947092224,
"y": -21.207117111759345,
"text": "First Solar",
"color": "#632654",
"radius": 3,
"icon": {
"font": "Font Awesome 5 Free",
"content": "",
"color": "#fff",
"style": "bold"
}
}
},
{
"id": 3388,
"data": {
"properties": {
"name": "Google",
"permalink": "/organization/google",
"founded_at": "07/09/1998",
"first_funding_at": "01/08/1998",
"market": " Software ",
"founded_quarter": "1998-Q3",
"founded_year": 1998,
"state": "CA",
"url": "http://www.crunchbase.com/organization/google",
"country": "USA",
"homepage_url": "https://www.google.com",
"logo": "http://www.crunchbase.com/organization/google/primary-image/raw",
"founded_m
...