Lewis Dot Structures

You can create renderings of Lewis Dot Structures with the ChemDoodle Web Components. This is done 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 visual specifications:

  • 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 specification to true, and by turning off the display of implicit hydrogens by setting the atoms_implicitHydrogens_2D specification to false.

Keep in mind that this setting is merely cosmetic. Neither the MDL MOLFile or Daylight SMILES formats support lone pairs, so validation must be done programmatically by accessing the Molecule data structure, or by visual analysis.

Examples

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

1
2
3
4
5
6
7
8
9
<script>
  var lewisNeon = new ChemDoodle.ViewerCanvas('lewisNeon', 100, 100);
  var neon = new ChemDoodle.structures.Molecule();
  var 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  var lewisChloroform = new ChemDoodle.ViewerCanvas('lewisChloroform', 100, 100);
  // display all carbon labels and turn implicit hydrogens off
  lewisChloroform.specs.atoms_displayAllCarbonLabels_2D = true;
  lewisChloroform.specs.atoms_implicitHydrogens_2D = false;
  // generated in ChemDoodle, www.chemdoodle.com
  var chloroform = ChemDoodle.io.fromJSONDummy({"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(var 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  var lewisSO4 = new ChemDoodle.ViewerCanvas('lewisSO4', 100, 100);
  // display all carbon labels and turn implicit hydrogens off
  lewisSO4.specs.atoms_displayAllCarbonLabels_2D = true;
  lewisSO4.specs.atoms_implicitHydrogens_2D = false;
  // generated in ChemDoodle, www.chemdoodle.com
  var so4 = ChemDoodle.io.fromJSONDummy({"b":[{"e":1,"b":0,"o":2},{"e":2,"b":0,"o":2},{"e":3,"b":0},{"e":4,"b":0},{"e":5,"b":3}],"a":[{"l":"S","y":233,"x":291},{"l":"O","y":233,"x":311},{"l":"O","y":213,"x":291},{"l":"O","y":233,"x":271},{"c":-1,"l":"O","y":253,"x":291},{"l":"H","y":253,"x":271}]});
  // set the number of lone pairs by knowing the order of the atoms
  so4.atoms[1].numLonePair = 2;
  so4.atoms[2].numLonePair = 2;
  so4.atoms[3].numLonePair = 2;
  so4.atoms[4].numLonePair = 3;
  lewisSO4.loadMolecule(so4);
</script>