dm
d3-molecule
npm i d3-molecule
dm

d3-molecule

D3 based interactive visualization library + tool to make render atoms and molecules learning chemical bonding in a fun way.

by Arpit Narechania

1.2.0 (see all)License:MITTypeScript:Not Found
npm i d3-molecule
Readme

Project Title: d3-molecule

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

Screenshot

Version History

VersionDateBrief DescriptionAuthor(s)
v1.0.02017/03/01Initial creationarpitnarechania@gmail.com
v1.0.32017/03/01Update Readmearpitnarechania@gmail.com
v1.1.12017/12/31Update Readmearpitnarechania@gmail.com
v2.0.02018/02/07Visualize organic chemical structures based on IUPAC conventionswying102@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

OptionDescriptionTypeExample
domElementThe DOM element to append the molecule tostring'#container'
uniqueIdA Unique ID in case multiple molecules are added (as in the demo)number1
widthWidth of the svg containernumber500
heightHeight of the svg containernumber500
borderThicknessThickness of the border of the svg containernumber1
borderColorColor of the border of the svg containerstring'#000000'
backgroundBackground color of the svg containerstring'#FFFFFF'
chargeThe Repulsion/ Attraction force between atomsnumber-1000
frictionThe friction parameter of a force directed graphnumber0.9
alphaThe alpha parameter of a force directed graphnumber0.1
thetaThe theta parameter of a force directed graphnumber0.8
linkStrengthThe linkStrength parameter of a force directed graphnumber1
gravityThe gravity parameter of a force directed graphnumber0.1
maxAtomRadiusRadius of the biggest atom in the moleculenumber6
colorSchemeColor scheme of the atomslist["#2AA9CC", "#FCF78A"]
bondThicknessBond thicknessnumber1
bondColorBond Colorstring'#000000'
atomBorderThicknessAtom border thicknessstring1
atomBorderColorAtom border colorstring'#000000'
atomTextColorAtom text colorstring'#000000'
atomSizeBasisBasis on which the atom circle svgs be renderedstring'Atomic Radius'
boundingBoxIf the molecule should be constrained inside the svg containerbooleantrue
borderRadiusXSVG container's border (X) parameternumber5
borderRadiusYSVG container's border (Y) parameternumber5
detailedTooltipsIf detailed info about the element to be shown on hover or notbooleantrue

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
  • 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 CompoundsExample
Alkanesmethane, 2-methyl-4-ethyloctane
Alkenesethene, 2-methyl-4-ethyloctene
Alkynesethyne, 2-methyl-4-ethyloctyne
Alkyl halides3-fluoro-4-ethyloctyne
Alcoholsethanol
Ethersethyl methyl ether
Aldehydes3-methylbutanal
Ketonespropanone
Carboxylic Acidsethanoic acid
Estersmethyl propanoate
Aminesethyl methyl amine
Amidesbutamide

Author for Organic Compounds

License

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

Downloads/wk

6

GitHub Stars

41

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.2.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial