Visualize a hierarchical graph

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cytoscape Layouts</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.24.0/cytoscape.min.js"></script>
    <script src="https://unpkg.com/layout-base/layout-base.js"></script>
    <script src="https://unpkg.com/cytoscape-dagre/cytoscape-dagre.js"></script>
    <script src="https://unpkg.com/cytoscape-cola/cytoscape-cola.js"></script>
    <script src="https://unpkg.com/cytoscape-euler/cytoscape-euler.js"></script>
    <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
    <style>
        #cy { width: 100%; height: 500px; border: 1px solid black; }
        #controls { margin: 10px 0; }
    </style>
</head>
<body>
    <div id="controls">
        <label for="layout">Select Layout: </label>
        <select id="layout">
            <option value="cose">CoSE (Force-Directed)</option>
            <option value="grid">Grid</option>
            <option value="concentric">Concentric</option>
            <option value="breadthfirst">Breadth-First</option>
            <option value="dagre">Dagre</option>
            <option value="cola">Cola</option>
            <option value="euler">Euler</option>
        </select>
        <button onclick="applyLayout()">Apply Layout</button>
    </div>
    <div id="cy"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            window.cy = cytoscape({
                container: document.getElementById("cy"),
                elements: [
                    { data: { id: "a" } },
                    { data: { id: "b" } },
                    { data: { id: "c" } },
                    { data: { id: "d" } },
                    { data: { id: "e" } },
                    { data: { id: "f" } },
                    { data: { id: "g" } },
                    { data: { id: "h" } },
              ...

JavaScript

document.addEventListener("DOMContentLoaded", function () {
console.log('loaded')
            window.cy = cytoscape({
                container: document.getElementById("cy"),
                elements: [
                    { data: { id: "a" } },
                    { data: { id: "b" } },
                    { data: { id: "c" } },
                    { data: { id: "d" } },
                    { data: { id: "e" } },
                    { data: { id: "f" } },
                    { data: { id: "g" } },
                    { data: { id: "h" } },
                    { data: { id: "i" } },
                    { data: { id: "j" } },
                    { data: { source: "a", target: "b" } },
                    { data: { source: "a", target: "c" } },
                    { data: { source: "b", target: "d" } },
                    { data: { source: "b", target: "e" } },
                    { data: { source: "c", target: "f" } },
                    { data: { source: "c", target: "g" } },
                    { data: { source: "d", target: "h" } },
                    { data: { source: "e", target: "i" } },
                    { data: { source: "f", target: "j" } }
                ],
                style: [
                    {
                        selector: "node",
                        style: {
                            "background-color": "#0074D9",
                            "label": "data(id)",
                            "color": "white",
                            "text-valign": "center",
                            "text-halign": "center",
                        },
                    },
                    {
                        selector: "edge",
                        style: {
                            "width": 2,
                            "line-color": "#AAAAAA",
                            "target-arrow-shape": "triangle",
                        },
                    },
                ],
                layout: { name: "cose" },
          ...