Skip to content

Latest commit

 

History

History
252 lines (208 loc) · 9.81 KB

README.md

File metadata and controls

252 lines (208 loc) · 9.81 KB
Raw

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

  • 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

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 :-

  • 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:

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

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

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.)