1.2.0 • Published 6 years ago
d3-molecule v1.2.0
Project Title: d3-molecule
d3-molecule is an open-source library for learning Chemical Bonding in an interactive way.
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' | 'Atomic Weight ' |
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
- Ying Wang wying102@vt.edu
- Shivaram Sitaram shivramp@hotmail.com