Project Title: d3-molecule

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

Screenshot

Version History

Version Date Brief Description Author(s)
v1.0.0 2017/03/01 Initial creation arpitnarechania@gmail.com
v1.0.3 2017/03/01 Update Readme arpitnarechania@gmail.com
v1.1.1 2017/12/31 Update Readme arpitnarechania@gmail.com
v2.0.0 2018/02/07 Visualize organic chemical structures based on IUPAC conventions wying102@vt.edu; shivramp@hotmail.com

Usage and Features

Features WIP

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

Option Description Type Example
domElement The DOM element to append the molecule to string '#container'
uniqueId A Unique ID in case multiple molecules are added (as in the demo) number 1
width Width of the svg container number 500
height Height of the svg container number 500
borderThickness Thickness of the border of the svg container number 1
borderColor Color of the border of the svg container string '#000000'
background Background color of the svg container string '#FFFFFF'
charge The Repulsion/ Attraction force between atoms number -1000
friction The friction parameter of a force directed graph number 0.9
alpha The alpha parameter of a force directed graph number 0.1
theta The theta parameter of a force directed graph number 0.8
linkStrength The linkStrength parameter of a force directed graph number 1
gravity The gravity parameter of a force directed graph number 0.1
maxAtomRadius Radius of the biggest atom in the molecule number 6
colorScheme Color scheme of the atoms list ["#2AA9CC", "#FCF78A"]
bondThickness Bond thickness number 1
bondColor Bond Color string '#000000'
atomBorderThickness Atom border thickness string 1
atomBorderColor Atom border color string '#000000'
atomTextColor Atom text color string '#000000'
atomSizeBasis Basis on which the atom circle svgs be rendered string 'Atomic Radius'
boundingBox If the molecule should be constrained inside the svg container boolean true
borderRadiusX SVG container's border (X) parameter number 5
borderRadiusY SVG container's border (Y) parameter number 5
detailedTooltips If detailed info about the element to be shown on hover or not boolean true

Bond Types include :-

Test (WIP)

Author

Arpit Narechania arpitnarechania@gmail.com


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

Types of organic compounds:

Organic Compounds
Alkanes
Alkenes
Alkynes
Alkyl halides
Alcohols
Ethers
Aldehydes
Ketones
Carboxylic Acids
Esters
Amines
Amides

Limitations for IUPAC name search:

Examples for using organic compounds

Organic Compounds Example
Alkanes methane, 2-methyl-4-ethyloctane
Alkenes ethene,2-methyl-4-ethyloctene
Alkynes ethyne,2-methyl-4-ethyloctyne
Alkyl halides 3-fluoro-4-ethyloctyne
Alcohols ethanol
Ethers ethyl methyl ether
Aldehydes 3-methylbutanal
Ketones propanone
Carboxylic Acids ethanoic acid
Esters methyl propanoate
Amines ethyl methyl amine
Amides butamide

Author for Organic Compounds

License

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