Chemical Markup Language (CML) demo

In a series of related demonstration programs, chemical data for 2D and 3D molecules (including adrenalin, caffeine, cortisone, ethanol, and melatonin) are visualized using SVG. The molecular data is originally stored in another XML-related markup language, CML (Chemical Markup Language), and an XSL (Extensible Stylesheet Language) Transformation Language document automatically converts each CML file to an SVG file. With some additional JavaScript, the SVG representation of the molecule is ready for viewing and user interaction.

Introduction to the Chemical Markup Language

CML is an XML-based language for representing chemical data. CML evolved in the chemical industry to solve the needs of exchanging molecular and other information for publishing Web-based documents for patent applications, standards committees, and other organizations. CML does not cover all chemistry but focuses on molecules (and similar structures representable by a formula). CML does represent molecules, atoms, and bonds.

The following example is a portion of a CML molecule file that was originally converted from an MDLMol file (an earlier standard file type). For future reference, notice the CML tags <molecule>, <atomArray>, <atom>, <bondArray>, and <bond>.

Converting CML to SVG with XSLT

CML works with XML-related markup languages: PlotML for graphs, MathML for equations, and, of course, SVG for a variety of programmable and interactive diagrams and graphs. In this example, an XSLT (XSL Transformation Language) document is written that automatically converts CML files to SVG files. The automated conversion allows an assortment of molecules to be visualized using SVG. Histamine is one example, converted from histamine.cml to histamine.svg:

The XSLT document creates an SVG file from the CML file. The title property in the <cml> tag and the CML <formula> tag, if there is one, is formatted and prominently displayed in the SVG group (<g>) element called backdrop. The CML to SVG conversion creates the JavaScript function GenerateStructure(), which is invoked once during the initialization of the SVG application. For each CML <atom> or <bond> tag, the XSLT generates corresponding JavaScript to create an SVG element for an atom or bond. For example, for the following CML code:

XSLT will convert it into the following JavaScript inside GenerateStructure() in the SVG file:

x = 17.3280;
y = 2.0032;
z = 0;
charge = 0;
isotope = -1;
var carotine_karne_a_1 = new Atom(x, y, z, "C", charge, isotope);

Additional hand-coded JavaScript

Much of the XSLT conversion generates JavaScript code, but the programmer writes supplementary JavaScript code to create SVG elements (<tspan> elements for atoms and <line> elements for the bonds) and append them to the SVG document. The programmer also writes additional JavaScript code to handle mouse interaction, calculate the effects of the rotations, and display a shadow underneath the molecule.

As the object rotates, the object appears to be viewed with perspective projection, becoming smaller as it moves farther away from the observer. The lines representing chemical bonds are foreshortened, and for each atom, the font size is also reduced with increased distance.

The XSLT document similarly translates each CML <bond> element into JavaScript, although it generates some inefficient code when assigning the two atoms for each bond. The code could be cleaned up by hand, and therefore:

left = null;
right = null;
right = left;
left = a1;
right = left;
left = a2;
strength = 1;

var b1 = new Bond(left, right, strength);

could be rewritten more efficiently as:

right = a1;
left = a2;
strength = 1;

var b1 = new Bond(left, right, strength);

For more information on CML and SVG

For more information on CML, see www.xml-cml.org/.

Continued thanks to Peter Murray-Rust, Henry S. Rzepa, and Michael Wright for their ongoing work with CML and SVG.