SVG generated by the Chemistry Development Kit (CDK) can be manipulated with JavaScript. This pages provides examples for demonstration and inspiration.
SVG generated by the Chemistry Development Kit (CDK) can be manipulated with JavaScript. This pages provides examples for demonstration and inspiration.
In this example we use events from the HTML table to add emphasis in the depiction. You can toggle a highlight that shows the atom-atom mapping and hover over compound names to highlight it in the sketch.
SMILES: Cl[c:2]1[c:11]2[c:6]([c:7]3[cH:15][cH:14][cH:13][cH:12][c:8]3[cH:9][cH:10]2)[n:5][cH:4][n:3]1.[Br-].[CH2:22]([Mg+])[CH:23]([CH3:25])[CH3:24]>C/C(=C/C(=O)C)/[O-].C/C(=C/C(=O)C)/[O-].C/C(=C/C(=O)C)/[O-].[Fe+3].Cl.O1CCCC1.CN1CCCC1=O>[CH2:22]([c:2]1[c:11]2[c:6]([c:7]3[cH:15][cH:14][cH:13][cH:12][c:8]3[cH:9][cH:10]2)[n:5][cH:4][n:3]1)[CH:23]([CH3:25])[CH3:24] |f:1.2,3.4.5.6| US20140231770A1_0287
| US20140231770A1 [0287] |
Atom Map:
|
|
|---|---|---|
| Reactants | Amount | Mass |
| 4-chlorobenzo[h]quinazoline | 2.5 mmol | 0.53 g |
| tris(2,4-pentanedionato)iron(III) | 0.148 mmol | 52 mg |
| Products | Yield | Mass (Actual) |
| 4-Isobutylbenzo[h]quinazoline | 24 % | 0.14g |
| Agents | Volume | Concentration |
| tetrahydrofuran | 25 mL | |
| isobutylmagnesium bromide | 2.6 mL | 1M |
| hydrochloric acid | 1M | |
| 1-methyl-2-pyrrolidone | 2 mL | |
Events can work in reverse in that a selection of the depiction causes something to happen in the HTML. The hit boxes can be a little finicky so I've made the depiction slightly larger.
SMILES: Cc1cc2OC(=O)C=C(CN=[N+]=[N-])c2cc1S(=O)(=O)Nc3cccc(c3)[N+](=O)[O-] CHEMBL1085157
| Moiety: |
|---|