Ogma generators

Ogma provides a variety of graph generators to quickly create and visualize different types of graphs for experimentation and learning. These generators allow you to easily explore graph structures without needing to provide raw data, making Ogma a fantastic tool for testing layouts, algorithms, and visual styles. Here’s a list of the graph generators Ogma offers:

1. Random Graph Generator

• Description: Creates a graph with a specified number of nodes and edges, randomly connecting them. Ideal for testing scalability and layout algorithms.
• Ease of Use: Specify node and edge counts, and Ogma does the rest in just a few lines of code.

2. Grid Graph Generator

• Description: Produces a grid-shaped graph, where nodes are arranged in rows and columns with optional diagonal edges.
• Use Case: Perfect for experimenting with spatial layouts and pathfinding algorithms.
• Ease of Use: Customize dimensions and edge types effortlessly.

3. Tree Graph Generator

• Description: Generates a hierarchical tree structure with a defined branching factor and depth.
• Use Case: Useful for testing hierarchical layouts like radial or layered tree visualizations.
• Ease of Use: Configure depth and branching factor easily.

4. Circular Graph Generator

• Description: Arranges nodes in a circle and connects them based on specific rules (e.g., full connections or neighbor-only).
• Use Case: Great for testing circular layouts or adjacency-based algorithms.
• Ease of Use: Simply set the number of nodes and connection rules.

5. Complete Graph Generator

• Description: Produces a fully connected graph, where every node is connected to every other node.
• Use Case: Ideal for stress-testing algorithms on dense graphs.
• Ease of Use: Just specify the number of nodes!

6. Star Graph Generator

• Description: Creates a central node connected to all other nodes, forming a star shape.
• Use Case: Useful for network visualization and testing hub-based layouts.
• Ease of Use: Minimal configuration required.

7. Bipartite Graph Generator

• Description: Produces a graph with two sets of nodes, where edges only connect nodes between the sets.
• Use Case: Great for visualizing relationships in two-class problems.
• Ease of Use: Specify the sizes of the two sets and let Ogma handle the rest.

8. Barabási–Albert Graph Generator

• Description: Generates a scale-free graph based on preferential attachment, mimicking real-world networks.
• Use Case: Perfect for studying social networks or biological networks.
• Ease of Use: Define initial nodes and attachment preferences effortlessly.

9. Erdős–Rényi Graph Generator

• Description: Constructs a graph by randomly adding edges between nodes with a specified probability.
• Use Case: Ideal for studying random network properties.
• Ease of Use: Simple input of node count and edge probability.

Why Ogma is Perfect for Experimentation:

• Intuitive API: Ogma’s API is designed to make graph creation seamless, even for complex structures.
• Quick Prototyping: With just a few lines of code, you can generate graphs and apply visual styles or layouts.
• Visualization Focused: The tool ensures you can immediately see the structure you’re experimenting with, facilitating quick insights.
• Customization: Each generator allows parameters to be fine-tuned to match your specific needs.
• Real-Time Feedback: Combined with Ogma’s interactive visualization features, you can tweak and refine your graphs in real time.

Ogma’s graph generators enable rapid experimentation for both beginners and experts, making it an essential tool for exploring graph-based problems.

Below is an example of the randomTree generator:

window.options = {
    nodeCount: 200
  };

async function propertyPanel(){
  // const dat= await require('dat.gui');
const debounce = (fn, delay) => {
  let timer;
  return () => {
    if(timer) clearTimeout(timer);
    timer = setTimeout(fn, delay)
  }
}

  const host= document.getElementById("host");
  const gui = new dat.GUI(
      {
          autoPlace: false,
          name: 'GPU layout', 
          width: 200 
      }
  )

  
  document.querySelector("#host").append(gui.domElement);

  gui.add(window.options, 'nodeCount', 1,1000)
  .step(10)
  .name('Node count')
  .onChange(debounce(nodeCountChanged, 500));
}

async function nodeCountChanged(){
  return generateGraph();
}

async function createDiagram(){
   window.ogma = new Ogma({
    container: 'host',
    options:{
        backgroundColor: "transparent"
    }
    });
}
async function generateGraph(){
    const ogma = window.ogma;    
    const g = await ogma.generate.randomTree({nodes: window.options.nodeCount})
    return ogma.setGraph(g)
    .then(()=>ogma.layouts.force())
    .then(() => ogma.view.locateGraph())  
}

propertyPanel();

createDiagram().then(()=>
  {
    generateGraph();
  }
)