# ---
# jupyter:
#   jupytext:
#     text_representation:
#       extension: .py
#       format_name: light
#       format_version: '1.5'
#       jupytext_version: 1.14.4
#   kernelspec:
#     display_name: Python 3
#     language: python
#     name: python3
# ---

# # vis_getting_started_network_html
#
# The 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 html
#
# The 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
# <head>
#     <script type="text/javascript" src="../vis-4.21.0/dist/vis.js"></script>
#     <link href="../vis-4.21.0/dist/dist/vis.css" rel="stylesheet" type="text/css" />
# ```
#
# This external html page can be shown in the Jupyter notebook using an IFrame:
#

from IPython.display import IFrame
IFrame('vis_getting_started_network.html',650,450)

# 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 html
#
# Although 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.

# + language="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>
# -

# This doesn't work, presumably because the links aren't working or it's not possible to add Javascript scripts in this way in Jupyter notebooks.

StarcoderdataJupyterScriptsDedupFiltered