docs/example-graphs/drugbank-methicillin.html

<html>

<head>
    <meta charset="UTF-8">
    <title>Example drug-protein network</title>
    <link href="../jslibs/cytoscape.js-navigator.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.16/cytoscape.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="../jslibs/cytoscape-navigator.js"></script>
    <script src="./cydraw.js"></script>
</head>

<body>
    Network of
    <a href=https://www.drugbank.ca/>DrugBank </a>
    <span style='color:yellowgreen'>drugs</span>
     which have mention of term "methicillin",
     with their <span style='color:orchid'>targets</span>,
     <span style='color:sienna'>enzymes</span>,
     <span style='color:coral'>transportes</span>,
     and <span style='color:blue'>carriers</span>:

        <div id='cy' style="width: 100%; height: 100%;"></div>

        <p style="font-size: small; text-align: right">
            Graph rendered using
            <a href=http://js.cytoscape.org/>Cytoscape.js</a> library</p>

        <script type="text/javascript">
            jfile = './drugbank-methicillin.json'
            fetch(jfile, { mode: 'no-cors' })
                .then(function (res) {
                    return res.json()
                })
                .then(function (data) {
                    cydraw(data.elements);
                })
        </script>
</body>
</html>