allow toggling MP+WBM element prevalence ptable heat maps between count modes 'occurrence' and 'composition'

bump elementari (to fix color bar tick label formatting)

Author: janosh

data/wbm/eda.py

@@ -30,17 +30,19 @@
 about_data_page = f"{ROOT}/site/src/routes/about-the-data"
 
 
-# %%
-wbm_elem_counts = count_elements(df_wbm.formula).astype(int)
-
-# wbm_elem_counts.to_json(f"{about_data_page}/wbm-element-counts.json")
-
-
 # %% load MP training set
 df_mp = pd.read_csv(DATA_FILES.mp_energies, na_filter=False)
-mp_elem_counts = count_elements(df_mp.formula_pretty).astype(int)
 
-# mp_elem_counts.to_json(f"{about_data_page}/mp-element-counts.json")
+
+# %%
+for count_mode in ["occurrence", "composition"]:
+    wbm_elem_counts = count_elements(df_wbm.formula, count_mode=count_mode).astype(int)
+
+    wbm_elem_counts.to_json(f"{about_data_page}/wbm-element-counts-{count_mode}.json")
+    mp_elem_counts = count_elements(df_mp.formula_pretty, count_mode=count_mode).astype(
+        int
+    )
+    mp_elem_counts.to_json(f"{about_data_page}/mp-element-counts-{count_mode}.json")
 
 
 # %% export element counts by WBM step to JSON

site/package.json

@@ -19,11 +19,11 @@
     "@iconify/svelte": "^3.1.3",
     "@rollup/plugin-yaml": "^4.0.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.15.9",
+    "@sveltejs/kit": "^1.15.11",
     "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
-    "elementari": "^0.1.6",
+    "elementari": "^0.1.8",
     "eslint": "^8.39.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
@@ -45,7 +45,7 @@
     "svelte2tsx": "^0.6.11",
     "tslib": "^2.5.0",
     "typescript": "5.0.4",
-    "vite": "^4.3.3"
+    "vite": "^4.3.4"
   },
   "prettier": {
     "semi": false,

site/src/routes/about-the-data/+page.svelte

@@ -8,19 +8,28 @@
   import DataReadme from '$root/data/wbm/readme.md'
   import type { ChemicalElement } from 'elementari'
   import { ColorBar, ColorScaleSelect, PeriodicTable, TableInset } from 'elementari'
-  import { Toggle } from 'svelte-zoo'
+  import Select from 'svelte-multiselect'
+  import { Toggle, Tooltip } from 'svelte-zoo'
   import type { Snapshot } from './$types'
-  import mp_elem_counts from './mp-element-counts.json'
-  import wbm_elem_counts from './wbm-element-counts.json'
 
-  let log = true // log color scale
+  const elem_counts = import.meta.glob(`./*-element-counts-{occu,comp}*.json`, {
+    eager: true,
+    import: 'default',
+  })
+
+  let log = false // log color scale
   let color_scale = [`Inferno`]
   let active_mp_elem: ChemicalElement
   let active_wbm_elem: ChemicalElement
+  const count_mode_ops = [`occurrence`, `composition`]
+  let count_mode = [count_mode_ops[0]]
+
+  $: mp_elem_counts = elem_counts[`./mp-element-counts-${count_mode[0]}.json`]
+  $: wbm_elem_counts = elem_counts[`./wbm-element-counts-${count_mode[0]}.json`]
 
   export const snapshot: Snapshot = {
-    capture: () => ({ color_scale, log }),
-    restore: (values) => ({ color_scale, log } = values),
+    capture: () => ({ color_scale, log, count_mode }),
+    restore: (values) => ({ color_scale, log, count_mode } = values),
   }
 </script>
 
@@ -46,10 +55,23 @@
           tick_labels={5}
           precision={3}
           range={[0, Math.max(...Object.values(wbm_elem_counts))]}
-          style="width: 85%; margin: 0 2em;"
+          style="width: 85%; margin: 0 2em 2em;"
         />
       </TableInset>
     </PeriodicTable>
+    <Tooltip
+      text="occurrence=(Fe: 1, O: 1), composition: Fe2O3=(Fe: 2, O: 3)"
+      style="display: inline-block; transform: translate(10cqw, 5ex);"
+    >
+      <label for="count-mode">Count Mode</label>
+    </Tooltip>
+    <Select
+      id="count-mode"
+      bind:selected={count_mode}
+      options={count_mode_ops}
+      minSelect={1}
+      maxSelect={1}
+    />
     <ColorScaleSelect bind:selected={color_scale} />
   </svelte:fragment>
   <svelte:fragment slot="mp-elements-heatmap">
@@ -68,7 +90,7 @@
           tick_labels={5}
           precision={3}
           range={[0, Math.max(...Object.values(mp_elem_counts))]}
-          style="width: 85%; margin: 0 2em;"
+          style="width: 85%; margin: 0 2em 2em;"
         />
       </TableInset>
     </PeriodicTable>
@@ -95,5 +117,6 @@
     gap: 1ex;
     place-content: center;
     align-items: start;
+    justify-items: center;
   }
 </style>

site/src/routes/about-the-data/mp-element-counts-composition.json

@@ -0,0 +1 @@
+{"H":82651,"He":8,"Li":68094,"Be":3368,"B":24452,"C":32142,"N":38570,"O":875788,"F":69127,"Ne":1,"Na":43175,"Mg":94342,"Al":27435,"Si":42222,"P":55151,"S":67290,"Cl":27129,"Ar":2,"K":16561,"Ca":18724,"Sc":5730,"Ti":19468,"V":23426,"Cr":14274,"Mn":37674,"Fe":40513,"Co":31098,"Ni":24960,"Cu":23482,"Zn":16243,"Ga":13866,"Ge":15316,"As":8986,"Se":25339,"Br":12274,"Kr":26,"Rb":9262,"Sr":16720,"Y":9753,"Zr":9121,"Nb":13893,"Mo":14207,"Tc":1118,"Ru":5050,"Rh":6318,"Pd":7198,"Ag":8507,"Cd":6869,"In":9629,"Sn":13562,"Sb":12381,"Te":14257,"I":11851,"Xe":302,"Cs":7352,"Ba":18855,"La":13513,"Ce":5921,"Pr":6202,"Nd":6977,"Pm":823,"Sm":5912,"Eu":3683,"Gd":2770,"Tb":4604,"Dy":4643,"Ho":4535,"Er":4768,"Tm":3449,"Yb":4446,"Lu":3131,"Hf":5471,"Ta":8541,"W":10159,"Re":3042,"Os":2191,"Ir":4105,"Pt":5177,"Au":5088,"Hg":5547,"Tl":5665,"Pb":6927,"Bi":12069,"Po":0,"At":0,"Rn":0,"Fr":0,"Ra":0,"Ac":495,"Th":1920,"Pa":374,"U":4524,"Np":574,"Pu":735,"Am":0,"Cm":0,"Bk":0,"Cf":0,"Es":0,"Fm":0,"Md":0,"No":0,"Lr":0,"Rf":0,"Db":0,"Sg":0,"Bh":0,"Hs":0,"Mt":0,"Ds":0,"Rg":0,"Cn":0,"Nh":0,"Fl":0,"Mc":0,"Lv":0,"Ts":0,"Og":0}

site/src/routes/about-the-data/mp-element-counts-occurrence.json

@@ -0,0 +1 @@
+{"H":10409,"He":8,"Li":21576,"Be":1186,"B":6363,"C":9069,"N":11419,"O":81887,"F":12067,"Ne":1,"Na":12795,"Mg":19007,"Al":7803,"Si":12756,"P":16814,"S":15341,"Cl":6385,"Ar":2,"K":8034,"Ca":8422,"Sc":2686,"Ti":7721,"V":9703,"Cr":6774,"Mn":13966,"Fe":12889,"Co":11045,"Ni":8293,"Cu":9903,"Zn":6905,"Ga":5076,"Ge":5497,"As":3894,"Se":6509,"Br":3011,"Kr":15,"Rb":4599,"Sr":7297,"Y":5012,"Zr":3847,"Nb":5460,"Mo":5411,"Tc":696,"Ru":2453,"Rh":2512,"Pd":2985,"Ag":4109,"Cd":3396,"In":4400,"Sn":6157,"Sb":5784,"Te":4980,"I":3004,"Xe":157,"Cs":4071,"Ba":8338,"La":5599,"Ce":3271,"Pr":2894,"Nd":3234,"Pm":537,"Sm":2902,"Eu":2431,"Gd":1659,"Tb":2225,"Dy":2318,"Ho":2164,"Er":2208,"Tm":1752,"Yb":2121,"Lu":1634,"Hf":2729,"Ta":3407,"W":5121,"Re":1476,"Os":1229,"Ir":2053,"Pt":2444,"Au":2515,"Hg":2341,"Tl":2998,"Pb":3021,"Bi":4936,"Po":0,"At":0,"Rn":0,"Fr":0,"Ra":0,"Ac":304,"Th":1059,"Pa":286,"U":2439,"Np":410,"Pu":463,"Am":0,"Cm":0,"Bk":0,"Cf":0,"Es":0,"Fm":0,"Md":0,"No":0,"Lr":0,"Rf":0,"Db":0,"Sg":0,"Bh":0,"Hs":0,"Mt":0,"Ds":0,"Rg":0,"Cn":0,"Nh":0,"Fl":0,"Mc":0,"Lv":0,"Ts":0,"Og":0}

site/src/routes/about-the-data/wbm-element-counts.json site/src/routes/about-the-data/wbm-element-counts-composition.json

@@ -0,0 +1 @@
+{"H":5227,"He":0,"Li":8104,"Be":859,"B":8050,"C":6390,"N":9158,"O":27946,"F":10060,"Ne":0,"Na":6720,"Mg":12482,"Al":18650,"Si":17175,"P":10663,"S":10596,"Cl":6189,"Ar":0,"K":8359,"Ca":10214,"Sc":8495,"Ti":7306,"V":5731,"Cr":7144,"Mn":14715,"Fe":17625,"Co":15724,"Ni":19539,"Cu":18487,"Zn":14585,"Ga":16296,"Ge":18593,"As":10877,"Se":10387,"Br":5917,"Kr":0,"Rb":7799,"Sr":10748,"Y":8847,"Zr":8131,"Nb":6165,"Mo":2093,"Tc":1095,"Ru":11703,"Rh":16069,"Pd":15493,"Ag":7568,"Cd":8573,"In":16618,"Sn":17416,"Sb":8780,"Te":8057,"I":4784,"Xe":1,"Cs":7185,"Ba":10508,"La":8787,"Ce":7586,"Pr":8158,"Nd":8039,"Pm":1193,"Sm":7918,"Eu":5466,"Gd":4670,"Tb":8708,"Dy":8425,"Ho":8057,"Er":8049,"Tm":8398,"Yb":9162,"Lu":5816,"Hf":6632,"Ta":5416,"W":1964,"Re":1953,"Os":6184,"Ir":11348,"Pt":15528,"Au":11878,"Hg":5349,"Tl":7980,"Pb":9442,"Bi":6090,"Po":0,"At":0,"Rn":0,"Fr":0,"Ra":0,"Ac":1416,"Th":8070,"Pa":2048,"U":6650,"Np":4927,"Pu":6699,"Am":0,"Cm":0,"Bk":0,"Cf":0,"Es":0,"Fm":0,"Md":0,"No":0,"Lr":0,"Rf":0,"Db":0,"Sg":0,"Bh":0,"Hs":0,"Mt":0,"Ds":0,"Rg":0,"Cn":0,"Nh":0,"Fl":0,"Mc":0,"Lv":0,"Ts":0,"Og":0}