Make Interactive Cluster Heatmap

Heat map is useful tool to visualise multi parameter not only biology, but also chemoinformatics.
I often use spot-fire or R to make it.
Last week I found cool javascript library “InCHlib(Interactive Cluster Heatmap library)”.
There is good document in this link .
Screen Shot 2014-11-02 at 2.49.36 PM

I make simple test to use the library.
At first, I wrote in my folder. (Use flask.)

from flask import Flask
from flask_bootstrap import Bootstrap
from flask import render_template
def create_app():
    app = Flask( __name__ )
    Bootstrap( app )

    return app

app = create_app()
def root():
    return render_template("sample.html")
if __name__=="__main__": = True)

I set three javascript librarys in static/js folder
kinetic-v5.1.0.min.js, jquery-2.0.3.min.js, inchlib-1.1.0.js

First, I make dataset using rdkit, and pandas.
Sample data is CDK2 inh. download form chembldb.
To make sampledata, I made two dataset, firstdata.csv(mol_id, and some descriptors), metadata.csv(mol_id and biological data).

iwatobipen$ head -n 5 firstdata.csv 

iwatobipen$ head -n 5 metadf.csv 

Then, make data using
“-dh and -mh” option mean that use header(column names) in csv files.

python firstdata.csv -m metadata.csv -dh -mh -o cdk2.json

Now I got cdk2.json file that contains the cluster heatmap in the InCHlib input format.
Next, write html template.

1.Base template using bootstrap.

{% extends "bootstrap/base.html" %}
{% block title %}{% endblock %}

{% block navbar %}
<nav class="navbar navbar-inverse navbar-fixed-top" 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 collapsed" 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>
      <a class="navbar-brand" href="#">sample</a>

    <!-- 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="/">Top</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="#">hoge</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>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        <button type="submit" class="btn btn-default">Submit</button>
      <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>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
{% endblock %}
{% block content %}
{% endblock %}

2.sample page.
This sample page shows heatmap and structure depends on mouse position.

{% extends "templ.html" %}
{% block title %} InCHlib {% endblock %}

{% block styles %}
<style type="text/css">
    position: absolute;
     height: 305px;
     width: 220px;
     z-index: 100;
     border: solid #D2D2D2 1px;
     border-radius: 10px;
     display: none;
     background-color: white;

    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 95%;
    background-color: white;
    border-radius: 10px;

{% endblock %}

{% block scripts %}
{{ super() }}
<script type=text/javascript src="{{ url_for('static', filename='js/jquery-2.0.3.min.js')}}"></script>
<script type=text/javascript src="{{ url_for('static', filename='js/kinetic-v5.1.0.min.js')}}"></script>
<script type=text/javascript src="{{ url_for('static', filename='js/inchlib-1.1.0.js')}}"></script>

// load JSON 
$(document).ready(function() { //run when the whole page is loaded
            window.inchlib = new InCHlib({ //instantiate InCHlib
                target: "inchlib", //ID of a target HTML element
                metadata: true, //turn on the metadata 
                column_metadata: true, //turn on the column metadata 
                max_height: 1200, //set maximum height of visualization in pixels
                width: 600, //set width of visualization in pixels
                heatmap_colors: "Greens", //set color scale for clustered data
                metadata_colors: "Reds", //set color scale for metadata

            inchlib.read_data_from_file("{{ url_for('static', filename='demodata/cdk2.json')}}"); //read input json file
            inchlib.draw(); //draw cluster heatmap

        var molecule_url = "{{ url_for('static', filename='img/')}}";
        var target_element = $("#inchlib");
        var offset = target_element.offset();
        var x_pos = offset.left + inchlib.settings.width - 80;;
        var max_y =;
        var img_element = $("#molecule_img");
        var mol_element = $("#molecule").css({"left" : x_pos});
        var mol_id_element = $("mol_id");
        var floating_mol = $("#floating_mol");


        function show_molecule(mol_id, evt){
            var filepath = molecule_url + mol_id + ".png";
            var y = evt.evt.pageY-300;
            if(y < max_y){
                y = max_y;

            mol_element.css({"top": y, "border-width": "1px"});
            img_element.attr("src", filepath);
            //mol_link.attr("href", chembl_url+mol_id);


        function hide_molecule(ids, evt){
        function fix_molecule(){
   = function(){};
   = function(){

        function bind_dendrogram_events(){
   = function(ids, evt){
                show_molecule(ids, evt);
   = function(evt){
   = function(ids, evt){
                show_molecule(ids[0], evt);
                current_mol = ids[0];
                mol_element.css({"border-width": "2px"});
   = function(object_ids, evt){
                var i;

                for(i = 0; i<object_ids.length; i++){
                    if(object_ids[i] == current_mol){

   = function(){

            if( != "img" && != "canvas" && != "a"){


{% endblock %}
{% block content %}

<div class="container-fluid">
 <div class="row">
    <h1>InCHlib test</h1></br>
  <div class="col-md-12"  style='background-color: lightblue; height: 1200px'> 
         <div id="inchlib"></div>
         <div id="molecule">
            <img src="" id="molecule_img" style=""></img>

{% endblock %}

Finally run app and access .
In summary, InCHlib is very cool tools to visualise molecular structures and biological activity or another data in web.
I uploaded sample to github.


Leave a Reply

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

You are commenting using your 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