JSXGraph
JSXGraph share

Share

Chemical molecules
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/chemical-molecules" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Chemical molecules" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    /**
     * Function to create double or triple bonds.
     *
     * Parameters:
     *   edge: segment
     *   dist: distance between bonds in pixel 
     *   sign: +1 or -1
     *   attributes: attributes of the bond
     */
    const createBond = function(edge, dist, sign, attributes) {
        return board.create('segment', [
            // First point
            function() {
                var dir = edge.Direction(),   //  Direction of the existing `edge`
                    d = JXG.Math.hypot(dir[0], dir[1]); // Length of vector `dir`
    
                // `dir` is normalized to a vector of length `dist` pixel
                dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
                dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
    
                return [edge.point1.X() + dir[1], edge.point1.Y() - dir[0]];
            },
            // Second point
            function() {
                var dir = edge.Direction(),
                    d = JXG.Math.hypot(dir[0], dir[1]);
    
                dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
                dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
                return [edge.point2.X() + dir[1], edge.point2.Y() - dir[0]];
            }
        ], attributes);
    };
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-2, 5, 5, -2],
        axis: true
    });
    
    // Define the visual appearance of the atoms
    var atom_style = {
        size: 10,
        fillColor: 'white',
        strokeColor: 'none',
        label: {
            offset: [0, 0],
            anchorX: 'middle',
            anchorY: 'middle'
        }
    };
    // Define the visual appearance of the bonds
    var bond_style = {
        color: 'black',
        strokeWidth: 1,
        highlight: false
    };
    var bond_dist = 4; // Distance between double or triple bond edges (in pixel)
    
    // Create atoms
    atom_style.name = 'C';
    var A = board.create('point', [2, 2], atom_style);
    atom_style.name = 'N';
    var B = board.create('point', [2, 4], atom_style);
    atom_style.name = 'H';
    var C = board.create('point', [3, 1], atom_style);
    atom_style.name = 'O';
    var D = board.create('point', [1, 1], atom_style);
    
    // Create bonds
    // Single bond
    var AC = board.create('segment', [A, C], bond_style);
    
    // Double bond
    var AD = board.create('segment', [A, D], bond_style);
    var AD1 = createBond(AD, bond_dist, 1, bond_style);
    
    // Triple bond
    var AB = board.create('segment', [A, B], bond_style);
    var AB1 = createBond(AB, bond_dist, 1, bond_style);
    var AB2 = createBond(AB, bond_dist, -1, bond_style);
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

/**
 * Function to create double or triple bonds.
 *
 * Parameters:
 *   edge: segment
 *   dist: distance between bonds in pixel 
 *   sign: +1 or -1
 *   attributes: attributes of the bond
 */
const createBond = function(edge, dist, sign, attributes) {
    return board.create('segment', [
        // First point
        function() {
            var dir = edge.Direction(),   //  Direction of the existing `edge`
                d = JXG.Math.hypot(dir[0], dir[1]); // Length of vector `dir`

            // `dir` is normalized to a vector of length `dist` pixel
            dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
            dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);

            return [edge.point1.X() + dir[1], edge.point1.Y() - dir[0]];
        },
        // Second point
        function() {
            var dir = edge.Direction(),
                d = JXG.Math.hypot(dir[0], dir[1]);

            dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
            dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
            return [edge.point2.X() + dir[1], edge.point2.Y() - dir[0]];
        }
    ], attributes);
};

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-2, 5, 5, -2],
    axis: true
});

// Define the visual appearance of the atoms
var atom_style = {
    size: 10,
    fillColor: 'white',
    strokeColor: 'none',
    label: {
        offset: [0, 0],
        anchorX: 'middle',
        anchorY: 'middle'
    }
};
// Define the visual appearance of the bonds
var bond_style = {
    color: 'black',
    strokeWidth: 1,
    highlight: false
};
var bond_dist = 4; // Distance between double or triple bond edges (in pixel)

// Create atoms
atom_style.name = 'C';
var A = board.create('point', [2, 2], atom_style);
atom_style.name = 'N';
var B = board.create('point', [2, 4], atom_style);
atom_style.name = 'H';
var C = board.create('point', [3, 1], atom_style);
atom_style.name = 'O';
var D = board.create('point', [1, 1], atom_style);

// Create bonds
// Single bond
var AC = board.create('segment', [A, C], bond_style);

// Double bond
var AD = board.create('segment', [A, D], bond_style);
var AD1 = createBond(AD, bond_dist, 1, bond_style);

// Triple bond
var AB = board.create('segment', [A, B], bond_style);
var AB1 = createBond(AB, bond_dist, 1, bond_style);
var AB2 = createBond(AB, bond_dist, -1, bond_style);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Chemical molecules" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   /**
    * Function to create double or triple bonds.
    *
    * Parameters:
    *   edge: segment
    *   dist: distance between bonds in pixel 
    *   sign: +1 or -1
    *   attributes: attributes of the bond
    */
   const createBond = function(edge, dist, sign, attributes) {
       return board.create('segment', [
           // First point
           function() {
               var dir = edge.Direction(),   //  Direction of the existing `edge`
                   d = JXG.Math.hypot(dir[0], dir[1]); // Length of vector `dir`
   
               // `dir` is normalized to a vector of length `dist` pixel
               dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
               dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
   
               return [edge.point1.X() + dir[1], edge.point1.Y() - dir[0]];
           },
           // Second point
           function() {
               var dir = edge.Direction(),
                   d = JXG.Math.hypot(dir[0], dir[1]);
   
               dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
               dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
               return [edge.point2.X() + dir[1], edge.point2.Y() - dir[0]];
           }
       ], attributes);
   };
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-2, 5, 5, -2],
       axis: true
   });
   
   // Define the visual appearance of the atoms
   var atom_style = {
       size: 10,
       fillColor: 'white',
       strokeColor: 'none',
       label: {
           offset: [0, 0],
           anchorX: 'middle',
           anchorY: 'middle'
       }
   };
   // Define the visual appearance of the bonds
   var bond_style = {
       color: 'black',
       strokeWidth: 1,
       highlight: false
   };
   var bond_dist = 4; // Distance between double or triple bond edges (in pixel)
   
   // Create atoms
   atom_style.name = 'C';
   var A = board.create('point', [2, 2], atom_style);
   atom_style.name = 'N';
   var B = board.create('point', [2, 4], atom_style);
   atom_style.name = 'H';
   var C = board.create('point', [3, 1], atom_style);
   atom_style.name = 'O';
   var D = board.create('point', [1, 1], atom_style);
   
   // Create bonds
   // Single bond
   var AC = board.create('segment', [A, C], bond_style);
   
   // Double bond
   var AD = board.create('segment', [A, D], bond_style);
   var AD1 = createBond(AD, bond_dist, 1, bond_style);
   
   // Triple bond
   var AB = board.create('segment', [A, B], bond_style);
   var AB1 = createBond(AB, bond_dist, 1, bond_style);
   var AB2 = createBond(AB, bond_dist, -1, bond_style);
</jsxgraph>

Chemical molecules

Applications
Chemistry
This is an example how to use JSXGraph to display the structure of chemical molecules. The main hurdle here is that between two atoms their might be double or even triple bonds. __Beware:__ This example just shows the technical concept, in chemical terms it is incorrect.
// Define the id of your board in BOARDID

/**
 * Function to create double or triple bonds.
 *
 * Parameters:
 *   edge: segment
 *   dist: distance between bonds in pixel 
 *   sign: +1 or -1
 *   attributes: attributes of the bond
 */
const createBond = function(edge, dist, sign, attributes) {
    return board.create('segment', [
        // First point
        function() {
            var dir = edge.Direction(),   //  Direction of the existing `edge`
                d = JXG.Math.hypot(dir[0], dir[1]); // Length of vector `dir`

            // `dir` is normalized to a vector of length `dist` pixel
            dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
            dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);

            return [edge.point1.X() + dir[1], edge.point1.Y() - dir[0]];
        },
        // Second point
        function() {
            var dir = edge.Direction(),
                d = JXG.Math.hypot(dir[0], dir[1]);

            dir[0] *= Math.sign(sign) * dist / (edge.board.unitX * d);
            dir[1] *= Math.sign(sign) * dist / (edge.board.unitY * d);
            return [edge.point2.X() + dir[1], edge.point2.Y() - dir[0]];
        }
    ], attributes);
};

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-2, 5, 5, -2],
    axis: true
});

// Define the visual appearance of the atoms
var atom_style = {
    size: 10,
    fillColor: 'white',
    strokeColor: 'none',
    label: {
        offset: [0, 0],
        anchorX: 'middle',
        anchorY: 'middle'
    }
};
// Define the visual appearance of the bonds
var bond_style = {
    color: 'black',
    strokeWidth: 1,
    highlight: false
};
var bond_dist = 4; // Distance between double or triple bond edges (in pixel)

// Create atoms
atom_style.name = 'C';
var A = board.create('point', [2, 2], atom_style);
atom_style.name = 'N';
var B = board.create('point', [2, 4], atom_style);
atom_style.name = 'H';
var C = board.create('point', [3, 1], atom_style);
atom_style.name = 'O';
var D = board.create('point', [1, 1], atom_style);

// Create bonds
// Single bond
var AC = board.create('segment', [A, C], bond_style);

// Double bond
var AD = board.create('segment', [A, D], bond_style);
var AD1 = createBond(AD, bond_dist, 1, bond_style);

// Triple bond
var AB = board.create('segment', [A, B], bond_style);
var AB1 = createBond(AB, bond_dist, 1, bond_style);
var AB2 = createBond(AB, bond_dist, -1, bond_style);

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.