javascript html graph cytoscape.js cytoscape-web

Creating a network in Cytoscape

I'm trying to create and visualize graph using cytoscape js

I have two files:

index.html input.html

index.html includes the following

<head>
    <title>Tutorial 1: Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
</head>
<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<body>
    <div id="cy"></div>
    <script>
      $.getJSON("input.js", function (data) {
      var cy = cytoscape({
        elements: data,
        container: document.getElementById('cy'),
        style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }],
    layout: {
    name: 'grid'
},
});
      });
    </script>
</body>

input.js includes the following

   [
  // nodes
  { data: { id: 'a' } },
  { data: { id: 'b' } },
  { data: { id: 'c' } },
  { data: { id: 'd' } },
  { data: { id: 'e' } },
  { data: { id: 'f' } },
  // edges
  {
    data: {
      id: 'ab',
      source: 'a',
      target: 'b'
    }
  },
  {
    data: {
      id: 'cd',
      source: 'c',
      target: 'd'
    }
  },
  {
    data: {
      id: 'ef',
      source: 'e',
      target: 'f'
    }
  },
  {
    data: {
      id: 'ac',
      source: 'a',
      target: 'd'
    }
  },
  {
    data: {
      id: 'be',
      source: 'b',
      target: 'e'
    }
  }
]

But I see only an empty file when I open index.html in a browser.

Could someone please help me with this?

EDIT: I have worked on the changes mentioned in the answer below https://github.com/DeepaMahm/misc/blob/master/index.html https://github.com/DeepaMahm/misc/blob/master/input.js

but I am still not able to view the graph by opening the index.html.

Solution

Another answer with live code. Since StackOverflow does not support file, I have to use a data file on the cloud.

Content of the data file:

{"nodes":[
{"data":{"id":"a","desc":"node_A"}},
{"data":{"id":"b","desc":"node_B"}},
{"data":{"id":"c","desc":"node_C"}},
{"data":{"id":"d","desc":"node_D"}},
{"data":{"id":"e","desc":"node_E"}},
{"data":{"id":"f","desc":"node_F"}}
],
"edges":[
{"data":{
"id":"ab",
"source":"a",
"target":"b"
}},
{"data":{
"id":"cd",
"source":"c",
"target":"d"
}},
{"data":{
"id":"ef",
"source":"e",
"target":"f"
}},
{"data":{
"id":"ac",
"source":"a",
"target":"d"
}},
{"data":{
"id":"be",
"source":"b",
"target":"e"
}}
]
}

//Case2: data file is on the cloud
var data_url2 =
  "https://raw.githubusercontent.com/swatchai/cartopy_asean_proj/master/data2.json";
//I use d3.json() to get the data file in the cloud

d3.json(data_url2, function (data) {

  //console.log(data);//uncomment this to see file content
  
  var cy = cytoscape({
    elements: data,
    container: document.getElementById("cy"),
    style: [
      {
        selector: "node",
        style: {
          shape: "hexagon",
          "background-color": "red",
          label: "data(id)"
        }
      }
    ],
    layout: {
      name: "grid"
    }
  });
});

#cy {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 5px;
    left: 5px;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<title>Tutorial 1: Getting Started</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>

<body>
    <div id="cy"></div>
</body>

Using the data within a javascript file:

Steps to follow:

1. create `data.js` with this content:
   var data = {"nodes":
    ...
   };
2. value of `var data` is the content of the data file on the cloud mentioned above.
3. place `data.js` in the same folder of `index.html` you use
4. add `<script src="./data.js"></script>` in the head section of `index.html`
5. delete: d3.json(data_url2, function (data) { --- } ...
6. but keep the inside 
   var cy = cytoscape({
    elements: data,
    ...
   });