Rendering molecular image tooltips on Bokeh #RDKit #memo #visualization

Recently there many plotting tools for python package! I can’t follow everything… I mainly use seaborn and matplotlib. These tools are nice for rendering beautiful chart but if I would like to interactive plot, I need to switch plotting tools. So I started learn another tools and today I used Bokeh. (Reader already know bokeh, I’m toooo late…. :) )

Bokeh can make interactive plot very easy, it’s a high level rendering tools.

For the test, I make scatter plot with tooltip. I’m not good at JavaScript so often take long time to implement tooltips on my rendering app. From the document, bokeh can do it very easily. And some days ago I wrote post about ChemblDB+razi. Following code is contains 3 steps.

  1. Retrieve data from chembl with some filters such as substructure and molecular weight.
  2. Perform PCA for chemical space analysis and get svg image for tooltip.
  3. Draw scatter plot with bokeh.

OK let’s go to the code,

All code is uploaded gist.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Example code!

Step1 and 2 are ordinal way there nothing to describe here again. RDKit can easy to convert molobject to SVG text. (Cell 1 – 10)

Some tips was in Mols class definition. I defined __repr__ for rendering smiles string when I retrieve data from ChEMBL. The tips came from @yamasaKit_‘s advice. Thanks!

class Mols(Base):
    __table__ = Table('mols',
                      Column('molregno', BIGINT, primary_key=True),
                      Column('m', Mol),
    __table_args__ = (
        Index('molidx', 'structure',
    def __repr__(self):
        if isinstance(self.m, Chem.Mol):
            return '(%s) ' % (self.molregno, Chem.MolToSmiles(self.m))
        return '(%s) ' % (self.molregno, self.m)

After performing PCA, I made data which will pass bokeh as dict. (blok 11)

Next, I defined structure of Tooltips with smile HTML. ‘@ids’ iand ‘@img’ are dynamically replaced corresponding molregno and molsvg. It is very easy to implement svg tooltips in bokeh plot.

ChEMBL-molregno: @ids<br>

After run the all code, I could get scatter plot with interactive tooltips. Gist site provides static page so it can’t render the image, but nbviewer can render the plot with tooltips. The url is below.

It is not suitable way to visualize huge amount of molecules but interactive plot is useful for having discussion with medicinal chemist.

I’ll learn more and more about bokeh and other tools.

I’ll be happy if readers teach or recommend other cool packages. ;)


Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: