Color the 3D structure by a property

python/examples/colors.py

@@ -0,0 +1,84 @@
+"""
+Atom property coloring in chemiscope
+====================================
+
+This example demonstrates how to color atoms based on scalar
+properties.
+
+Note that the same parameters can be used with `chemiscope.show`
+to visualize an interactive widget in a Jupyter notebook.
+"""
+
+import ase.io
+import chemiscope
+import numpy as np
+
+# loads a dataset of structures
+frames = ase.io.read("data/alpha-mu.xyz", ":")
+
+# converts the arrays from the format they are stored in to an array
+# format that can be processed by the ASE utilities
+for a in frames:
+    a.arrays["polarizability"] = np.array(
+        [
+            (axx + ayy + azz) / 3
+            for (axx, ayy, azz) in zip(
+                a.arrays["axx"], a.arrays["ayy"], a.arrays["azz"]
+            )
+        ]
+    )
+
+    # one possible measure of anisotropy...
+    a.arrays["alpha_eigenvalues"] = np.array(
+        [
+            np.linalg.eigvalsh([[axx, axy, axz], [axy, ayy, ayz], [axz, ayz, azz]])
+            for (axx, ayy, azz, axy, axz, ayz) in zip(
+                a.arrays["axx"],
+                a.arrays["ayy"],
+                a.arrays["azz"],
+                a.arrays["axy"],
+                a.arrays["axz"],
+                a.arrays["ayz"],
+            )
+        ]
+    )
+
+    a.arrays["anisotropy"] = (
+        a.arrays["alpha_eigenvalues"][:, 2] - a.arrays["alpha_eigenvalues"][:, 0]
+    )
+
+chemiscope.write_input(
+    "colors-example.json.gz",
+    frames=frames,
+    properties=chemiscope.extract_properties(
+        frames, only=["polarizability", "anisotropy", "alpha_eigenvalues"]
+    ),
+    settings={  # the write_input function also allows defining the default visualization settings
+        "map": {
+            "x": {"property": "alpha_eigenvalues[1]"},
+            "y": {"property": "alpha_eigenvalues[2]"},
+            "z": {"property": "alpha_eigenvalues[3]"},
+            "palette": "seismic",
+            "color": {"property": "anisotropy"},
+        },
+        "structure": [
+            {
+                "spaceFilling": False,
+                "atomLabels": False,
+                "atoms": True,
+                "axes": "off",
+                "keepOrientation": False,
+                "playbackDelay": 700,
+                "environments": {
+                    "activated": True,
+                    "bgColor": "CPK",
+                    "bgStyle": "licorice",
+                    "center": False,
+                    "cutoff": 4,
+                },
+                "color": {"property": "anisotropy", "min": 1, "max": 15},
+            }
+        ],
+    },
+    environments=chemiscope.all_atomic_environments(frames),
+)

src/structure/options.ts

@@ -114,7 +114,7 @@ export class StructureOptions extends OptionsGroup {
             min: new HTMLOption('number', 0),
             max: new HTMLOption('number', 0),
             mode: new HTMLOption('string', 'linear'),
-            palette: new HTMLOption('string', 'Rwb'),
+            palette: new HTMLOption('string', 'bwr'),
         };
 
         // Handling undefined propertiesName:
@@ -131,7 +131,7 @@ export class StructureOptions extends OptionsGroup {
             );
         }
         this.color.mode.validate = optionValidator(['linear', 'log', 'sqrt', 'inverse'], 'mode');
-        this.color.palette.validate = optionValidator(['Rwb', 'Roygb', 'Sinebow'], 'palette');
+        this.color.palette.validate = optionValidator(['bwr', 'Roygb', 'Sinebow'], 'palette');
 
         this.environments.bgColor.validate = optionValidator(
             ['grey', 'CPK', 'prop'],
@@ -299,7 +299,7 @@ export class StructureOptions extends OptionsGroup {
         // ======= color palette
         const selectPalette = this.getModalElement<HTMLSelectElement>('atom-color-palette');
         selectPalette.options.length = 0;
-        for (const key of ['Rwb', 'Roygb', 'Sinebow']) {
+        for (const key of ['bwr', 'Roygb', 'Sinebow']) {
             selectPalette.options.add(new Option(key, key));
         }
         this.color.palette.bind(selectPalette, 'value');

src/structure/viewer.ts

@@ -1264,7 +1264,7 @@ export class MoleculeViewer {
 
         let grad: $3Dmol.Gradient = new $3Dmol.Gradient.RWB(max, min);
 
-        if (this._options.color.palette.value === 'Rwb') {
+        if (this._options.color.palette.value === 'bwr') {
             // min and max are swapped to ensure red is used for high values, blue for low values
             grad = new $3Dmol.Gradient.RWB(max, min);
         } else if (this._options.color.palette.value === 'Roygb') {