Tutorial > Lewis Dot Structures

You can create renderings of Lewis Dot Structures with the ChemDoodle Web Components. This is done by setting up the data and a few styles for the Canvas.

Atoms

For atoms, it is important to show lone pairs by setting the Atom.numLonePair variable as shown in the following examples. The sketcher also has tools to allow the drawing of lone pairs. The lone pairs will automatically be placed in the optimal positions. You can change how lone pairs appear with the following styles:

• atoms_lonePairDistance_2D - This is the distance between the lone pair and the atom.
• atoms_lonePairSpread_2D - This is the distance between the electrons in the pair.
• atoms_lonePairDiameter_2D - This is the diameter of the dots that represent the electrons.

Additionally, you will want to display all carbon labels by setting the atoms_displayAllCarbonLabels_2D style to true, and by turning off the display of implicit hydrogens by setting the atoms_implicitHydrogens_2D style to false.

Neither the MDL MOLFile or Daylight SMILES formats support lone pairs, so validation must be done programmatically by accessing the Molecule data structure, by visual analysis, or by using the ChemDoodle JSON format.

Bonds

For bonds, set the bonds_lewisStyle_2D style to true for traditional Lewis Dot Structures. You may also want to set up the atom coordinates longer bond lengths to clearly show off multiple bonds and at 90° angles.

You can also use the ChemDoodle.iChemLabs.createLewisDot() function from iChemLabs Cloud services. This function creates a Molecule that represents the input molecule as a Lewis Dot Structure using 90° angles and appropriately place lone pairs to satisfy the octet rule (charges will need to be present on the input molecule).

Examples

Just a simple one to start, Neon with 8 electrons:

<script>
  let lewisNeon = new ChemDoodle.ViewerCanvas('lewisNeon', 100, 100);
  let neon = new ChemDoodle.structures.Molecule();
  let atom = new ChemDoodle.structures.Atom('Ne');
  // use the numLonePair variable to set the number of lone pairs to be rendered
  atom.numLonePair = 4;
  neon.atoms.push(atom);
  lewisNeon.loadMolecule(neon);
</script>

Chloroform, showing carbon labels and with implicit hydrogens off:

<script>
  let lewisChloroform = new ChemDoodle.ViewerCanvas('lewisChloroform', 100, 100);
  // display all carbon labels and turn implicit hydrogens off
  lewisChloroform.styles.atoms_displayAllCarbonLabels_2D = true;
  lewisChloroform.styles.atoms_implicitHydrogens_2D = false;
  lewisChloroform.styles.bonds_lewisStyle_2D = true;
  // generated in ChemDoodle, www.chemdoodle.com
  let chloroform = new ChemDoodle.io.JSONInterpreter().molFrom({"b":[{"e":1,"b":0},{"e":2,"b":0},{"e":3,"b":0},{"e":4,"b":0}],"a":[{"y":195,"x":276},{"l":"H","y":175,"x":276},{"l":"Cl","y":195,"x":256},{"l":"Cl","y":195,"x":296},{"l":"Cl","y":215,"x":276}]});
  // set the number of lone pairs, only the chlorines need three each
  for(let i = 0, ii = chloroform.atoms.length; i<ii; i++){
    if(chloroform.atoms[i].label=='Cl'){
      chloroform.atoms[i].numLonePair = 3;
    }
  }
  lewisChloroform.loadMolecule(chloroform);
</script>

Hydrogen sulfate anion:

<script>
  let lewisSO4 = new ChemDoodle.ViewerCanvas('lewisSO4', 100, 100);
  // display all carbon labels and turn implicit hydrogens off
  lewisSO4.styles.atoms_displayAllCarbonLabels_2D = true;
  lewisSO4.styles.atoms_implicitHydrogens_2D = false;
  lewisSO4.styles.bonds_lewisStyle_2D = true;
  // generated in ChemDoodle, www.chemdoodle.com
  let so4 = new ChemDoodle.io.JSONInterpreter().molFrom({"b":[{"e":1,"b":0,"o":2},{"e":2,"b":0},{"e":3,"b":0},{"e":4,"b":0,"o":2},{"e":5,"b":3}],"a":[{"l":"S","y":295.971,"x":308.9058},{"p":2,"l":"O","y":273.924,"x":308.9058},{"c":-1,"p":3,"l":"O","y":318.0182,"x":308.9058},{"p":2,"l":"O","y":295.971,"x":330.9529},{"p":2,"l":"O","y":295.971,"x":286.8587},{"l":"H","y":295.971,"x":353}]});
  lewisSO4.loadMolecule(so4);
</script>