title: Loading and using JSON for Cytoscape.js
body: <h1>Context</h1>
  <p>I want to use <code>cytoscape.js</code> for visualizing graphs. While I am capable with a myriad of languages (<code>C++</code>, <code>Mathematica</code>, <code>R</code>, etc), I am new to <code>Javascript</code>, <code>JSON</code>, <code>HTML</code>, and <code>CSS</code>. Thus it would be favorable to learn these languages through this use case (implementing graphs with <code>cytoscape.js</code>). Please keep this in mind in your answer.</p>
  <p>I have previously asked how to [remotely load <a href="https://stackoverflow.com/q/40298582/5623899"><code>cytoscape.js</code></a> and <a href="https://stackoverflow.com/a/40299892/5623899">how to get graphs display (requires a <code>div</code>)</a>. Since then I have created a script that turns a graph as represented in one of the other languages I use, into the <code>JSON</code> format indicated <a href="http://js.cytoscape.org/#notation/elements-json" rel="noreferrer">here</a>. While I can just copy-paste all of this directly into my program, for large networks that is clearly a poor way to implement it. An example of my script's output is at the bottom of this.</p>
  <h1>Question</h1>
  <p>Given a <code>JSON</code> object/file(?) how can I do the following:</p>
  <ul>
  <li>load it into <code>cytoscape.js</code> without copy-pasting the code.</li>
  <li>referencing it once loaded. (e.g. basic explanation of how JSON syntax for use in <code>cytoscape.js</code>)</li>
  </ul>
  <h1>Script Output</h1>
  <pre><code>cytoscape({
  
  container: document.getElementById('cy'),
  
  elements: [ 
  {// node Node 1
      group: 'nodes',
  
      data: {
          id: 'Node 1'
      },
  
      selected: false,
  
      selectable: true,
  
      locked: false,
  
      grabbable: true,
  
      selectable: true,
  
  },
  {// node Node 2
      group: 'nodes',
  
      data: {
          id: 'Node 2'
      },
  
      selected: false,
  
      selectable: true,
  
      locked: false,
  
      grabbable: true,
  
      selectable: true,
  
  },
  {// node Node 3
      group: 'nodes',
  
      data: {
          id: 'Node 3'
      },
  
      selected: false,
  
      selectable: true,
  
      locked: false,
  
      grabbable: true,
  
      selectable: true,
  
  },
  {// edge 1_2
      group: 'edges',
  
      data: {
          id: '1_2',
          source: '1',
          target: '2'
      }
  },
  {// edge 2_3
      group: 'edges',
  
      data: {
          id: '2_3',
          source: '2',
          target: '3'
      }
  },
  {// edge 3_1
      group: 'edges',
  
      data: {
          id: '3_1',
          source: '3',
          target: '1'
      }
  }
  ],
  style: [
      {
          selector: 'node',
          style: {
              'content': 'data(id)'
          }
      }
  ]
  
  });
  </code></pre>