Branding

This example shows how to add your own logo, link, or copyright on your visualiation. It uses the brand tool.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const brand =
  '<div class="brand"><a href="https://linkurio.us" target="_blank">Powered by Ogma &copy;</a></div>';

const ogma = new Ogma({
  container: 'graph-container'
});

ogma.styles.addRule({
  nodeAttributes: {
    color: '#ddd',
    outerStroke: {
      color: '#999'
    }
  },
  edgeAttributes: {
    color: '#ddd'
  }
});

const graph = await ogma.generate.random({
  nodes: 15,
  edges: 15
});
await ogma.setGraph(graph);
await ogma.layouts.grid({ locate: true });

// Set the brand
ogma.tools.brand.set(brand, {
  position: 'bottom-right',
  horizontalMargin: 20,
  verticalMargin: 20,
  className: 'brand'
});

// Remove the brand
// ogma.tools.brand.remove()

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

:root {
  --brand-color: #4999f7;
  --font: 'IBM Plex Sans', sans-serif;
}

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.brand {
  background-color: var(--brand-color);
  font-size: 19px;
  padding: 5px;
  display: inline-block;
  margin: 0;
  font-family: var(--font);
  border-radius: 5px;
}

.brand a {
  color: #ffffff;
}

Branding ​

Branding