similarity network using cytoscape.js.

Lots of relationships are presented as graph.
For example, if I set molecule as node, and similarity as edge, I could make molecular networks.
Cytoscape.js is one of the good tool.
It is an open-source JavaScript graph theory library for analysis and visualisation. And works on server side. So, Not depend on client machine.
I wrote some examples.
If you interested in it, please read following ;-).

At first, I get sample data from Chembl.(Cyclin-dependent kinase 2)
Then load data and make network structure as json.

from rdkit import Chem
from rdkit.Chem import AllChem
from rdkit.Chem import PandasTools
import pandas as pd
from rdkit.Chem import DataStructs
import json

df=pd.read_table( "bioactivity-14_6-07-32.txt", header=0 )
PandasTools.AddMoleculeColumnToFrame( df, smilesCol="CANONICAL_SMILES",molCol="ROMol" )
fps = [ AllChem.GetMorganFingerprintAsBitVect(mol,2) for mol in df.ROMol ]
nodes = []
edges = []

# make nodes
for i in range( len( fps [:100] ) ):
    cmp_id = df.CMPD_CHEMBLID[i]
    smi = df.CANONICAL_SMILES[i]
    node = { "data":{ "cmp_id":cmp_id, "smi":smi }}
    nodes.append(node)

# make edges
for i in range(len(fps[:100])):
    for j in range(i):
        tc = DataStructs.TanimotoSimilarity(fps[i],fps[j])
        if tc >= 0.6:
            source = df.CMPD_CHEMBLID[i]
            target = df.CMPD_CHEMBLID[j]
            edge = { "data": { "source":source, "target":target }}
            edges.append(edge)

# make json format data
data = { "nodes":nodes, "edges":edges}  

# write network to text
f = open("mols.json","w")
f.write(json.dumps(data))
f.close()

Now I got network data.
Then, let’s make the site using flask.

First, I wrote app.py.

from flask import Flask, url_for
from flask import render_template
from flask_bootstrap import Bootstrap
app  = Flask(__name__)
Bootstrap( app )
@app.route('/mol_network/')
def mol_network():
    return render_template("mol_network.html")
if __name__ =="__main__":
    app.run(debug = True)

Next, wrote template.html and mol_network.html.
Follwing code, links and any actions are blank.

temple.html

{% extends "bootstrap/base.html" %}
{% block title %} This is an example {% endblock %}
{% block navbar %}
{% block scripts %}
{{ super() }}
// set your placed folder following code.
<script src="{{url_for('static', filename='cytoscape/build/cytoscape.js')}}"></script>
{% endblock %}

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}
 <h1> hello, bootstrap </h1>
{% endblock %}

OK, now Make mol_network.html
Hmm, too long..

{% extends "temple.html" %}
{% block title %}network{% endblock title %}

{% block content %}
<style id="jsbin-css">

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#info {
  color: #c88;
  font-size: 1em;
  position: absolute;
  z-index: -1;
  left: 1em;
  top: 1em;
}
</style>

<script src="{{ url_for("static", filename="node_modules/cytoscape/lib/arbor.js") }}"></script>
</head>
  <body>     


<script>

var cy3json = {"nodes": [{"data": {"id": "CHEMBL186120", "smi": "CC(C)c1cnc(NC(=O)Oc2ccccc2)s1"}}, {"data": {"id": "CHEMBL362369", "smi": "CC(=O)c1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL2347577", "smi": "CC[C@@H](Nc1nc(NCc2cc(F)ccc2O)c3ncn(C(C)C)c3n1)C(C)O"}}, {"data": {"id": "CHEMBL428690", "smi": "CN1CC[C@@H]([C@H](O)C1)c2c(O)cc(O)c3C(=O)C=C(Oc23)c4ccccc4Cl"}}, {"data": {"id": "CHEMBL186371", "smi": "O=C(Nc1cccc2[nH]nnc12)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL186898", "smi": "O=C(Cc1ccc2[nH]cnc2c1)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL593683", "smi": "CC(C)(C)c1cc2c(N\\N=C\\c3ccc(cc3)C(=O)O)ncnc2s1"}}, {"data": {"id": "CHEMBL2335928", "smi": "CCCn1cnc2c(NC(=N)N)nc(N)nc12"}}, {"data": {"id": "CHEMBL64758", "smi": "Brc1ccc2c(c1)[nH]c3c4[nH]c5ccccc5c4c6C(=O)NC(=O)c6c23"}}, {"data": {"id": "CHEMBL3115672", "smi": "Clc1ccc2C[C@@H](Cc2c1)NCc3cc(NC(=O)Nc4cccc5C(=O)N6CCCC6c45)n[nH]3"}}, {"data": {"id": "CHEMBL1094408", "smi": "COc1ccc(cc1Nc2ncc3CCc4c(nn(C)c4c3n2)C(=O)N)N5CCN(C)CC5"}}, {"data": {"id": "CHEMBL1952028", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(F)cc23"}}, {"data": {"id": "CHEMBL180341", "smi": "Oc1ccc2cnc(Nc3ccc(cc3)N4CCOCC4)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL363711", "smi": "CC(C)C(=O)Nc1ncc(s1)C(C)C"}}, {"data": {"id": "CHEMBL1098686", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(Cl)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1086811", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(cc23)[N+](=O)[O-])/Nc4ccc(Cl)cc14"}}, {"data": {"id": "CHEMBL1087075", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(F)cc23)/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1086701", "smi": "Cc1ccc2N\\C(=C\\3/C(=O)Nc4ccc(cc34)[N+](=O)[O-])\\C(=N/O)\\c2c1"}}, {"data": {"id": "CHEMBL369303", "smi": "Oc1[nH]c2ccc(cc2c1c3[nH]c4ccccc4c3N=O)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL2058161", "smi": "COc1ccc(cc1)c2nn(cc2CNc3ccc(Br)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL182325", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)C)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL2069718", "smi": "FCCNS(=O)(=O)c1cc(cs1)c2nc3ccccc3s2"}}, {"data": {"id": "CHEMBL2069719", "smi": "O=S(=O)(Nc1nccs1)c2cc(cs2)c3nc4ccccc4s3"}}, {"data": {"id": "CHEMBL2058160", "smi": "COc1ccc(cc1)c2nn(cc2CNc3ccc(Cl)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL2069717", "smi": "ONS(=O)(=O)c1cc(cs1)c2nc3ccccc3s2"}}, {"data": {"id": "CHEMBL2347581", "smi": "CC(C)n1cnc2c(NCc3ccccc3N)nc(NCCC(C)(C)O)nc12"}}, {"data": {"id": "CHEMBL187256", "smi": "O=C(Nc1cccc2ncccc12)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL2425654", "smi": "O[C@@H]1CC[C@H](CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL2403099", "smi": "CC(C)(O)CNc1nc(NCc2ccc(nc2)c3occc3)c4ncn(C5CCCC5)c4n1"}}, {"data": {"id": "CHEMBL182641", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCNCC4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL181834", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)C)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL1952200", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@H](O)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952203", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCCC(CO)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL182011", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCOCC4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL1086662", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(F)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1164457", "smi": "CC(C)CN(C)C(=O)c1ccc2cc([nH]c2c1)c3cc(Cc4ccccc4)[nH]n3"}}, {"data": {"id": "CHEMBL1952027", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccccc23"}}, {"data": {"id": "CHEMBL182498", "smi": "COc1ccc2cnc(Nc3ccc(N4CCNCC4)c(F)c3)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL133712", "smi": "CC(=O)c1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL434917", "smi": "CC(C)c1cnc(NC(=O)C(=O)c2ccccc2)s1"}}, {"data": {"id": "CHEMBL3093062", "smi": "C(Nc1oc(nn1)c2c[nH]c3ncccc23)c4ccccc4"}}, {"data": {"id": "CHEMBL3093056", "smi": "Fc1cc2cc(ccc2cn1)c3oc(NCc4ccccc4)nn3"}}, {"data": {"id": "CHEMBL2347584", "smi": "CC(C)CNc1nc(NCc2ccccc2O)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2336384", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NC3CC3)nc12"}}, {"data": {"id": "CHEMBL2425652", "smi": "N[C@@H]1CC[C@H](CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL595023", "smi": "CN(CCO)Cc1ccc(\\C=N\\Nc2ncnc3sc(cc23)C(C)(C)C)cc1"}}, {"data": {"id": "CHEMBL597754", "smi": "CNC(=O)c1nn(C)c2c1CCc3cnc(NC4CCN(CC4)C(=O)C5CCN(CC5)S(=O)(=O)C)nc23"}}, {"data": {"id": "CHEMBL2336375", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NCCCCCCO)nc12"}}, {"data": {"id": "CHEMBL2336374", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NCCCO)nc12"}}, {"data": {"id": "CHEMBL2347585", "smi": "CC(C)n1cnc2c(NCc3ccc(O)cc3)nc(nc12)N4CCNCC4"}}, {"data": {"id": "CHEMBL186932", "smi": "CCCCCc1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL14762", "smi": "CC[C@H](CO)Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL183511", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCC(N)C4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL185734", "smi": "CSc1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL1086683", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(OC(F)(F)F)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1087073", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(cc23)[N+](=O)[O-])/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1087074", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(Cl)cc23)/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1087740", "smi": "COc1ccc2N\\C(=C\\3/C(=O)Nc4ccc(OC(F)(F)F)cc34)\\C(=N/O)\\c2c1"}}, {"data": {"id": "CHEMBL1922223", "smi": "CC[C@@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(=O)O"}}, {"data": {"id": "CHEMBL1738742", "smi": "CC[C@H](CO)Nc1nc(NCc2ccccc2)c3[nH]nc(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2069712", "smi": "NS(=O)(=O)c1cc(cs1)c2nc3ccc(F)cc3s2"}}, {"data": {"id": "CHEMBL2069724", "smi": "Oc1cccnc1NS(=O)(=O)c2cc(cs2)c3nc4ccccc4s3"}}, {"data": {"id": "CHEMBL2069728", "smi": "NS(=O)(=O)c1cc(cs1)c2nc3cccc(c4ccc(F)cc4)c3s2"}}, {"data": {"id": "CHEMBL2057888", "smi": "Cc1ccc(cc1)c2nn(cc2CNc3ccc(Cl)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL2336376", "smi": "CC[C@@H](N)COc1nc(NC(=N)N)c2ncn(C(C)C)c2n1"}}, {"data": {"id": "CHEMBL2349192", "smi": "CC(C)n1cnc2c(NCc3cc(Cl)ccc3O)nc(NC4CCC(O)CC4)nc12"}}, {"data": {"id": "CHEMBL361987", "smi": "Oc1ccc2cnc(Nc3ccc(N4CCNCC4)c(F)c3)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL1922123", "smi": "CC[C@@H](Nc1nc(NCc2cccnc2)c3ncn(C(C)C)c3n1)C(C)(C)O"}}, {"data": {"id": "CHEMBL1922201", "smi": "CC[C@@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(O)C(C)C"}}, {"data": {"id": "CHEMBL1922204", "smi": "CC[C@H](Nc1nc(NCc2ccccn2)c3ncn(C(C)C)c3n1)C(C)O"}}, {"data": {"id": "CHEMBL1922207", "smi": "CC[C@H](Nc1nc(NCc2ccccn2)c3ncn(C(C)C)c3n1)C(O)C(C)(C)C"}}, {"data": {"id": "CHEMBL1952029", "smi": "COc1ccc2NC(=O)\\C(=C/c3[nH]ccc3OC)\\c2c1"}}, {"data": {"id": "CHEMBL1952032", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCNC(C4)C(=O)N)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952208", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@@H](N)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL2402946", "smi": "NC1CCC(CC1)Nc2nc(NCc3ccc(nc3)c4ccccc4O)c5ncn(C6CCCC6)c5n2"}}, {"data": {"id": "CHEMBL1922120", "smi": "CCC(O)[C@@H](CC)Nc1nc(NCc2cccnc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL360250", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)CN)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL1164353", "smi": "CC(C)CN(C)C(=O)c1ccc2cc([nH]c2c1)c3n[nH]cc3c4ccccc4"}}, {"data": {"id": "CHEMBL1774056", "smi": "C[C@H](Nc1nc(Nc2cc(C)[nH]n2)c(F)cc1C#N)c3ccc(F)cn3"}}, {"data": {"id": "CHEMBL1952202", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCC(O)CC4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952209", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@H](C4)NC=O)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL361537", "smi": "CCOc1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL3093066", "smi": "C(Nc1oc(nn1)c2c[nH]c3ncccc23)c4ccccn4"}}, {"data": {"id": "CHEMBL3093060", "smi": "O=C1Nc2ccc(cc2O1)c3oc(NCc4ccccc4)nn3"}}, {"data": {"id": "CHEMBL3093055", "smi": "C(Nc1oc(nn1)c2ccc3cnccc3c2)c4ccccc4"}}, {"data": {"id": "CHEMBL1922217", "smi": "CC[C@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(C)(C)O"}}, {"data": {"id": "CHEMBL1952033", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCCC(C4)C(=O)N)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1949699", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N[C@H]4CC[C@H](N)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL3093079", "smi": "Fc1ccc2c(c[nH]c2n1)c3oc(N[C@H](C4CC4)c5cccnc5F)nn3"}}, {"data": {"id": "CHEMBL2347586", "smi": "COc1ccc(CNc2nc(nc3c2ncn3C(C)C)N4CCNCC4)cc1"}}, {"data": {"id": "CHEMBL2347579", "smi": "CC[C@H](CO)Nc1nc(NCc2ccc(N)cc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2001835", "smi": "Nc1ccc2C(=S)c3ccccc3Nc2c1"}}, {"data": {"id": "CHEMBL2402947", "smi": "NC1CCC(CC1)Nc2nc(NCc3cc(Cl)ccc3O)c4ncn(C5CCCC5)c4n2"}}, {"data": {"id": "CHEMBL186934", "smi": "O=C(Cc1ccccc1)Nc2ncc(s2)c3ccccc3"}}, {"data": {"id": "CHEMBL183408", "smi": "COc1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL2425656", "smi": "C1CCC(CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL361565", "smi": "Oc1ccc2oc3ncc(Cl)c(c4ccccc4)c3c2c1"}}, {"data": {"id": "CHEMBL607544", "smi": "CC(C)(C)c1cc2c(N\\N=C\\c3ccc(CO)cc3)ncnc2s1"}}, {"data": {"id": "CHEMBL599428", "smi": "Cn1nc(C(=O)N)c2CCc3cnc(NC4CCN(CC4)C(=O)c5ccccc5)nc3c12"}}, {"data": {"id": "CHEMBL2336381", "smi": "CC(C)[C@H](CO)Nc1nc(NC(=N)N)c2ncn(C(C)C)c2n1"}}], "edges": [{"data": {"source": "CHEMBL1086811", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1087075", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086701", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL2069719", "target": "CHEMBL2069718"}}, {"data": {"source": "CHEMBL2058160", "target": "CHEMBL2058161"}}, {"data": {"source": "CHEMBL2069717", "target": "CHEMBL2069718"}}, {"data": {"source": "CHEMBL2069717", "target": "CHEMBL2069719"}}, {"data": {"source": "CHEMBL182641", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL181834", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL1952203", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL182011", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL182011", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL1086662", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086662", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1952027", "target": "CHEMBL1952028"}}, {"data": {"source": "CHEMBL182498", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL434917", "target": "CHEMBL186120"}}, {"data": {"source": "CHEMBL2425652", "target": "CHEMBL2425654"}}, {"data": {"source": "CHEMBL595023", "target": "CHEMBL593683"}}, {"data": {"source": "CHEMBL2336375", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336374", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336374", "target": "CHEMBL2336375"}}, {"data": {"source": "CHEMBL186932", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182011"}}, {"data": {"source": "CHEMBL185734", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086701"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1087073"}}, {"data": {"source": "CHEMBL1087740", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087740", "target": "CHEMBL1086683"}}, {"data": {"source": "CHEMBL1922223", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL2069724", "target": "CHEMBL2069719"}}, {"data": {"source": "CHEMBL2069724", "target": "CHEMBL2069717"}}, {"data": {"source": "CHEMBL2069728", "target": "CHEMBL2069712"}}, {"data": {"source": "CHEMBL2057888", "target": "CHEMBL2058161"}}, {"data": {"source": "CHEMBL2057888", "target": "CHEMBL2058160"}}, {"data": {"source": "CHEMBL1922201", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922201", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL1922204", "target": "CHEMBL2347577"}}, {"data": {"source": "CHEMBL1922204", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922207", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922207", "target": "CHEMBL1922204"}}, {"data": {"source": "CHEMBL1952029", "target": "CHEMBL1952028"}}, {"data": {"source": "CHEMBL1952029", "target": "CHEMBL1952027"}}, {"data": {"source": "CHEMBL1952032", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952032", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922123"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922204"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182011"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL183511"}}, {"data": {"source": "CHEMBL1164353", "target": "CHEMBL1164457"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL361537", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL3093066", "target": "CHEMBL3093062"}}, {"data": {"source": "CHEMBL3093055", "target": "CHEMBL3093056"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922123"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952209"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL2347586", "target": "CHEMBL2347585"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922217"}}, {"data": {"source": "CHEMBL2402947", "target": "CHEMBL2349192"}}, {"data": {"source": "CHEMBL2402947", "target": "CHEMBL2402946"}}, {"data": {"source": "CHEMBL186934", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL186934", "target": "CHEMBL185734"}}, {"data": {"source": "CHEMBL183408", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL183408", "target": "CHEMBL361537"}}, {"data": {"source": "CHEMBL2425656", "target": "CHEMBL2425654"}}, {"data": {"source": "CHEMBL2425656", "target": "CHEMBL2425652"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL361537"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL183408"}}, {"data": {"source": "CHEMBL607544", "target": "CHEMBL593683"}}, {"data": {"source": "CHEMBL607544", "target": "CHEMBL595023"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336375"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336374"}}]}
;


$(function(){ // on dom ready

var cy = cytoscape({
  container: $('#cy')[0],
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'text-valign': 'center',
        'background-color': 'darkblue',
        'text-outline-width': 2,
        'width': 10,
        'height':10,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'width': 5,
        'line-color': 'blue',
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  
  elements: cy3json,
  
  layout: {
    name: 'arbor',
    padding: [50,50,50,50]
  },
});
cy.on('tap', 'node', function(){
  alert( this.data('smi') );
});
}); // on dom ready
</script>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="background:lightblue; height:600px;">
        This is test env.<br>
  <div id="cy"></div>
        </div>
    </div>
 </div>
</body>
{% endblock content %}

OK I did it. Then run the localserver.
And Access mol_network site.

pen:chemoflask iwatobipen$ python app.py

Yah! I could make molecular network.
I used arbor layout. “The arbor layout uses a force-directed physics simulation.”
And tap each node, the site return smiles strings.

If you are good at javascript programming, you can make more rich web site.

network

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s