<jupyter_start><jupyter_text>vis_getting_started_network_htmlThe vis.js website provides a 'getting started' example for its Network tool:http://visjs.org/docs/network/This notebook looks at recreating this in Jupyter notebooks.  Embedding htmlThe getting started example is placed in a html file 'vis_getting_started_network.html'. Clicking on the file in windows explorer will display the page in a browser and show it working.The example from the vis.js network is modified here, so that the vis.py script and css is loaded from a local copy```html        ```This external html page can be shown in the Jupyter notebook using an IFrame:<jupyter_code>from IPython.display import IFrame
IFrame('vis_getting_started_network.html',650,450)<jupyter_output><empty_output><jupyter_text>However the above Javascript does not display on GitHub or on nbviewer.It **does** work if this notebook as saved as a html file and placed in the same folder as this notebook (so that the local references to the vis.js package work). One solution is to place this html file on github pages and provide a link to it at the note of the Jupyter notebook (so someone looking on GitHub can click through to the html file).  embedded htmlAlthough importing the html as an IFrame works, it doesn't work to embed the same html in the notebook. Here the contents of the file 'vis_getting_started_network.html' are placed in the cell below.<jupyter_code>%%html
<html>
<head>
    <script type="text/javascript" src="../vis-4.21.0/dist/vis.js"></script>
    <link href="../vis-4.21.0/dist/vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // initialize your network!
    var network = new vis.Network(container, data, options);
</script>
</body>
</html><jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.1058421851289833, 'fraction_numerical': 0.01479514415781487, 'mean_word_length': 3.1857142857142855, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '2', 'dir': 'jupyter-structured-clean-dedup', 'id': '556778', 'license': 'MIT', 'n_tokens_mistral': 827, 'n_tokens_neox': 772, 'n_words': 318, 'path': 'vis_getting_started_network/vis_getting_started_network_notebook_html.ipynb', 'repo_name': 'stevenkfirth/Jupyter_and_vis.js', 'size': '2636'}