Project Title: d3-molecule

d3-molecule is an open-source library for learning Chemical Bonding in an interactive way.

Version History

Usage and Features

• Clicking the atom selects it
• Clicking on 2 atoms, joins them by a bond
• Clicking on a bond, toggles the bond type
• Clicking on a view port, locks and unlocks it from movement
• Double clicking a bond, removes it
• Double clicking an atom, removes it and its bonds
• Lock/ Unlock atoms to their position if needed.
• Hide/ Show atoms if needed.
• Drag and Resizing of molemethaneculecule container
• Option to Export molecule as a PNG image
• Configurable forces, constants of force directed graph for the molecule
• Configurable style parameters for canvas, atoms, bonds
• Visualize organic chemical structures based on IUPAC conventions.

Features WIP

• Molecule Reaction components
• Loading examples directly from standard notations like SMILE
• 3-D support

Check out an example here. Demo

Installation

Download d3-molecule using npm.

npm install d3-molecule --save-dev
cd d3-molecule
npm install

To use this library then, simply include d3.js, jquery, Molecule.js and Molecule.css:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/d3.min.js"></script>
<link href="/path/to/dist/css/Molecule.css">
<script src="/path/to/dist/js/Molecule.js"></script>

Basic Usage

To use this library, you must create a container element and instantiate a new Molecule:

<div id="container"></div>

Data

var data = {
    "nodes": [
      {
        "id": 0,
        "atom": "Mg",
        "charge":""
        "size": 24
      },
      {
        "id": 1,
        "atom": "Cl",
        "charge":""
        "size": 35
      },
      {
        "id": 2,
        "atom": "Cl",
        "charge":""
        "size": 35
      }
    ],
    "links": [
      {
        "source": 0,
        "target": 1,
        "bond": 1
      },
      {
        "source": 0,
        "target": 2,
        "bond": 1
      }
    ]
  }

Setting chart parameters

 
    var options = {
        domElement: "#container",
        uniqueId: 1,
        width: 500, 
        height: 500,
        borderThickness: 1,
        borderColor: "#ffffff",
        background: "#ffffff",
        charge: -1000,
        friction: 0.9,
        alpha: 0.1,
        theta: 0.8,
        linkStrength: 1,
        gravity: 0.1,
        maxAtomRadius: 6,
        colorScheme:["#2AA9CC", "#FCF78A"],
        bondThickness: 2,
        bondColor: "#000000",
        atomBorderThickness: 2,
        atomBorderColor: "#000000",
        atomTextColor: "#000000",
        atomSizeBasis: "Atomic Radius",
        boundingBox: true,
        borderRadiusX: 5,
        borderRadiusY: 5,
        detailedTooltips: true
    };
 
    var molecule = new Molecule(data,options);
    molecule.render();
 

Options

Bond Types include :-

• Single
• Double
• Triple
• Quadruple
• Wedged
• Wavy
• Dotted
• Dashed (Stripes)
• Dashed (Gradient)
• Arc

Test (WIP)

• Unit test cases in the testrunner.html
• Start a simple HTTP server and go to http://localhost:/testrunner.html
• The test cases will run for the demo example

Author

Arpit Narechania arpitnarechania@gmail.com

New Feature of Organic Compounds (added on Jan-2018)

• The new module IUPACname.js adds functionality of searching organic compounds using IUPAC names.
• This library allows you to add the side groups including methyl, ethyl and propyl on the main chain.
• Note that the library doesn't cover all names for organic compounds.

Types of organic compounds:

Limitations for IUPAC name search:

• The maximum number of carbon is 12.
• The double bond, triple bond, -OH, -C=O- are at the end of the main chain.
• The amide is always primary amide.
• More diverse functionality will be updated.

Examples for using organic compounds

Author for Organic Compounds

• Ying Wang wying102@vt.edu
• Shivaram Sitaram shivramp@hotmail.com

License

MIT (https://opensource.org/licenses/MIT.)