Tutorial > Working with CIF Files

The ChemDoodle Web Components library can handle periodic data. A popular file format for periodic data, is the Crystallographic Information File (CIF). The ChemDoodle Web Components library contains a class for handling CIF files, so this data can be easily utilized.

Loading CIF Files

There are a two methods for loading CIF files:

1. Locally included in HTML. Just as described on the loading data page, CIF data can be included as a JavaScript variable with all returns replaced by "\n" character pairs. Then use the ChemDoodle.readCIF() function to generate the chemical data structure and unit cell shape. The readCIF() function can also take 3 additional parameters to define the dimensions of the supercell. This is shown in the following code:

<script>
  // print the CIF file to a JavaScript variable
  let cifFile = '...';
  // read the CIF data into a 1x1x1 basis unit cell
  let unitCell = ChemDoodle.readCIF(cifFile);
  // read the CIF data into a 1x2x3 supercell
  let superCell = ChemDoodle.readCIF(cifFile, 1, 2, 3);
  // to get the data, use superCell.molecule and superCell.unitCell, same for unitCell
</script>

2. CIF files can be loaded from the corresponding iChemLabs services. For instance, using the getZeoliteFromIZA() function:

<script>
  // declare the lta variable in the top scope that will be set as the data from the function call
  let lta = undefined;
  let unitCell = undefined;
  // call the iChemLabs function
  ChemDoodle.iChemLabs.getZeoliteFromIZA('LTA', {
    // these three options set the supercell dimensions; they default to 1 if not specified
    'xSuper' : 2,
    'ySuper' : 2,
    'zSuper' : 2
  }, function(zeolite) {
    // set the top lta variable to be used later or directly load it into a Canvas
    lta = zeolite.molecule;
    unitCell = zeolite.unitCell;
  });
</script>

Displaying the Unit Cell

Unit cells will be automatically generated from CIF files. Unit cell boundaries are also automatically displayed when loaded into a 3D component. The are styles, set in the component's Styles object, to control if the cell is displayed, its color and line width.

Specifying an Orthographic Projection

When viewing packed periodic data, such as zeolites, it is often convenient to render the graphics with an orthographic projection. An orthographic projection will accentuate the patterns of the atom coordinates, and provide clarity when viewing the data through the basis vectors.

By default, all 3D components will display graphics with a perspective projection, which is more natural and simulates depth. An orthographic projection can be used by setting the Canvas's specs parameter before loading the data as shown in the following code:

<script>
  let c3d = new ChemDoodle.TransformCanvas3D(name, 100, 100);
  // set an orthographic perspective
  c3d.styles.projectionPerspective_3D = false;
  // load data
  c3d.loadMolecule(structure);
</script>

Keep in mind that zooming an orthographic perspective will have no effect, since points will have the same x and y coordinates regardless of their z coordinate. So another style, Styles.projectionOrthoWidth_3D, becomes important. This value will define the width of the projection that is displayed in Ångstroms. So if your structure is very large, you will need to change this style accordingly.