Orb Examples

  • Example 1 - Basic
  • Renders a simple graph on the default canvas.

  • Example 2 - Basic + Custom default style
  • Renders a simple graph with a custom default style (color, size, border, text) for nodes and edges.

  • Example 3 - Fixed coordinates
  • Renders a simple graph with fixed node coordinates where Orb won't simulate and position the nodes.

  • Example 4 - Events
  • Renders a simple graph with few event listeners: Each graph simulation step is shown with progress indicator. On node click, node hover, and edge click, an event will be logged in the console with a message showing clicked/hovered node or edge.

  • Example 5 - Dynamics
  • Renders a simple graph to show graph dynamics: adding, updating, and removing nodes and edges. In intervals of 3 seconds, 1 new node and 1 new edge will be added to the graph. Node will be removed from the graph on node click event.

  • Example 6 - Map
  • Renders a graph with map background. Each node needs to provide latitude and longitude values.