Skip to content
  1. Examples

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

...