Thursday 2 June 2011

Molecular zooming with Open Babel SVG

How cool is SVG? Way, I say. Combine it with some sweet sweet JavaScript (indeed, is there any other kind?) and you can visualise large numbers of molecules with low memory footprint (vectors don't use much memory) even in the tiny 600px margin of this blog post: (scroll mouse wheel to zoom, drag to move around)


The above shows a depiction of the first 100 molecules in PubChem, as drawn by Open Babel:
obabel PubChem3D.sdf -l100 -d -xC -O mols_100.svg

Want to see 1000 molecules?

Notes:
1. If you don't see anything above, you may want to upgrade your browser.
2. Open Babel is not the only Open Source chemistry software with SVG support: there's also the CDK, Indigo, OASA/BKChem and probably others.
3. In the Open Babel GUI, if you tick the box "Display in firefox" it shows these depictions when you convert.
4. One nice thing about SVG is that it can be styled with CSS, so that you could have a button on website that allows you to instantly change the colours of the bonds or labels, or the line-width. I don't think that the Open Babel SVG is set up for these shenanigans at the moment, but it could easily be done.

8 comments:

Egon Willighagen said...

Very nice! Well done!

I do hope someone within the CDK community will pick up the SVG output we have :(

Noel O'Boyle said...

I didn't realise that the CDK had support. I've added a note.

Geoff Hutchison said...

Actually, this is very helpful for ChemSpotlight. I'm going to trigger preview for SMILES or large SDF using this kind of grid support.

Anonymous said...

Would be better (performance-wise) if you didn't stroke the text, that tends to be expensive compared to simply filling the text. If you want bold text just use 'font-weight' to do that instead.

Egon Willighagen said...

Noel, what is that JavaScript you speak about that makes the SVG zoomable?

Otherwise, a small typo: "Open Babel is not the Open Source chemistry software with SVG support" (missing 'only', I guess)

Noel O'Boyle said...

Fixed typo, thanks. The Javascript is at the end of the SVG file.

Wolf Ihlenfeldt said...

The Cactvs toolkit also supports SVG structure depiction, and that since many years. (Property E_SVG_IMAGE, with parameters compatible to that of other renderers)

Noel O'Boyle said...

@xn--dahlstrm-t4a.net: I checked out your comment, but it didn't seem to make a whole lot of difference, at least with respect to dragging the 1000 molecule SVG.