add marginal hull distribution along rolling_mae_vs_hull_dist_models plot top edge

use different line styles and markers for roc-models-all-in-one.svelte

Author: janosh

matbench_discovery/plots.py

@@ -547,16 +547,16 @@ def rolling_mae_vs_hull_dist(
         scatter_kwds = dict(
             fill="toself", opacity=0.2, hoverinfo="skip", showlegend=False
         )
-        peril_cone_anno = "MAE > |E<sub>above hull</sub>|"
+        triangle_anno = "MAE > |E<sub>above hull</sub>|"
         fig.add_scatter(
             x=(-1, -dft_acc, dft_acc, 1) if show_dft_acc else (-1, 0, 1),
             y=(1, dft_acc, dft_acc, 1) if show_dft_acc else (1, 0, 1),
-            name=peril_cone_anno,
+            name=triangle_anno,
             fillcolor="red",
             **scatter_kwds,
         )
         fig.add_annotation(
-            x=0, y=0.8, text=peril_cone_anno, showarrow=False, yref="paper"
+            x=0, y=0.7, text=triangle_anno, showarrow=False, yref="paper"
         )
 
         if show_dummy_mae:

scripts/model_figs/roc_prc_curves_models.py

@@ -74,12 +74,18 @@
     range_y=(0, 1.02),
     hover_name=facet_col,
     hover_data={facet_col: False},
-    **kwds if facet_plot else dict(color=facet_col, markers=True, marker_size=3),
+    **(kwds if facet_plot else dict(color=facet_col, markers=True)),
 )
 
 for anno in fig.layout.annotations:
     anno.text = anno.text.split("=", 1)[1]  # remove Model= from subplot titles
 
+line_styles = "solid dash dot dashdot".split() * 3
+markers = "circle square triangle-up triangle-down diamond cross star x".split() * 2
+for trace, ls, marker in zip(fig.data, line_styles, markers):
+    trace.line.dash = ls
+    trace.marker.symbol = marker
+
 if not facet_plot:
     fig.layout.legend.update(x=1, y=0, xanchor="right", title=None)
 fig.layout.coloraxis.colorbar.update(thickness=14, title_side="right")
@@ -100,37 +106,35 @@
 
 # %%
 save_fig(fig, f"{SITE_FIGS}/{img_name}.svelte")
-save_fig(fig, f"{PDF_FIGS}/{img_name}.pdf", width=1000, height=400)
+save_fig(fig, f"{PDF_FIGS}/{img_name}.pdf", width=500, height=500)
 
 
 # %%
 df_prc = pd.DataFrame()
+prec_col, recall_col = "Precision", "Recall"
 
 for model in (pbar := tqdm(list(df_each_pred), desc="Calculating ROC curves")):
     pbar.set_postfix_str(model)
     na_mask = df_preds[each_true_col].isna() | df_each_pred[model].isna()
     y_true = (df_preds[~na_mask][each_true_col] <= STABILITY_THRESHOLD).astype(int)
     y_pred = df_each_pred[model][~na_mask]
     prec, recall, thresholds = precision_recall_curve(y_true, y_pred, pos_label=0)
-    df_tmp = pd.DataFrame(
-        {
-            "Precision": prec[:-1],
-            "Recall": recall[:-1],
-            color_col: thresholds,
-            facet_col: model,
-        }
-    ).round(3)
-
-    df_prc = pd.concat([df_prc, df_tmp])
+    dct = {
+        prec_col: prec[:-1],
+        recall_col: recall[:-1],
+        color_col: thresholds,
+        facet_col: model,
+    }
+    df_prc = pd.concat([df_prc, pd.DataFrame(dct).round(3)])
 
 
 # %%
 n_cols = 3
 n_rows = math.ceil(len(models) / n_cols)
 
 fig = df_prc.iloc[:: len(df_roc) // 500 or 1].plot.scatter(
-    x="Recall",
-    y="Precision",
+    x=recall_col,
+    y=prec_col,
     facet_col=facet_col,
     facet_col_wrap=n_cols,
     facet_row_spacing=0.04,
@@ -149,7 +153,7 @@
     anno.text = anno.text.split("=", 1)[1]  # remove Model= from subplot titles
 
 fig.layout.coloraxis.colorbar.update(
-    x=0.5, y=1.03, thickness=14, len=0.4, orientation="h"
+    x=0.5, y=1.03, thickness=11, len=0.8, orientation="h"
 )
 fig.add_hline(y=0.5, line=line)
 fig.add_annotation(

scripts/model_figs/rolling_mae_vs_hull_dist_models.py

@@ -4,6 +4,8 @@
 # %%
 from typing import Final
 
+import numpy as np
+import plotly.graph_objects as go
 from pymatviz.utils import save_fig
 
 from matbench_discovery import PDF_FIGS, SITE_FIGS
@@ -23,7 +25,6 @@
 
 
 # %%
-# sort df columns by MAE (so that the legend is sorted too)
 backend: Final = "plotly"
 
 fig, df_err, df_std = rolling_mae_vs_hull_dist(
@@ -52,13 +53,35 @@
 
     # increase line width
     fig.update_traces(line=dict(width=3))
-    fig.layout.legend.update(bgcolor="rgba(0,0,0,0)")
+    fig.layout.legend.update(
+        bgcolor="rgba(0,0,0,0)", title="", x=1.01, y=0, yanchor="bottom"
+    )
     # increase legend handle size and reverse order
     fig.layout.margin.update(l=5, r=5, t=5, b=55)
+
+    # plot marginal histogram of true hull distances
+    counts, bins = np.histogram(
+        df_preds[each_true_col], bins=400, range=fig.layout.xaxis.range
+    )
+    marginal_trace = go.Scatter(
+        x=bins, y=counts, name="Density", fill="tozeroy", showlegend=False, yaxis="y2"
+    )
+    marginal_trace.marker.color = "rgba(0, 150, 200, 1)"
+    # add marginal trace to existing figure
+    fig.add_trace(marginal_trace)
+
+    # update layout to include marginal plot
+    fig.layout.update(
+        yaxis1=dict(domain=[0, 0.75]),  # main yaxis
+        yaxis2=dict(  # marginal yaxis
+            domain=[0.8, 1], tickformat="s", tickvals=[*range(0, 100_000, 2000)]
+        ),
+    )
     fig.show()
+
 img_name = "rolling-mae-vs-hull-dist-models"
 
 
 # %%
 save_fig(fig, f"{SITE_FIGS}/{img_name}.svelte")
-save_fig(fig, f"{PDF_FIGS}/{img_name}.pdf", width=520, height=350)
+save_fig(fig, f"{PDF_FIGS}/{img_name}.pdf", width=600, height=400)

site/package.json

@@ -20,35 +20,35 @@
     "@iconify/svelte": "^3.1.4",
     "@rollup/plugin-yaml": "^4.1.1",
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/vite-plugin-svelte": "^2.4.3",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@sveltejs/kit": "^1.22.6",
+    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
     "d3-scale-chromatic": "^3.0.0",
     "elementari": "^0.2.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "eslint-plugin-svelte": "^2.32.4",
     "hastscript": "^8.0.0",
     "highlight.js": "^11.8.0",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.8",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "prettier-plugin-svelte": "^3.0.3",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.0",
     "svelte-multiselect": "^10.1.0",
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.5",
     "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.19",
-    "tslib": "^2.6.1",
+    "svelte2tsx": "^0.6.20",
+    "tslib": "^2.6.2",
     "typescript": "5.1.6",
-    "vite": "^4.4.8"
+    "vite": "^4.4.9"
   },
   "prettier": {
     "semi": false,

site/src/figs/roc-models-all-in-one.svelte

@@ -9,6 +9,8 @@
   export let stats: ModelStatLabel[] // [key, label, unit][]
   export let sort_by: keyof ModelData
   export let show_details: boolean = false
+  export let style: string | null = null
+  export let metrics_style: string | null = null
 
   $: ({ model_name, missing_preds, missing_percent, hyperparams, notes, training_set } =
     data)
@@ -23,7 +25,7 @@
   const target = { target: `_blank`, rel: `noopener` }
 </script>
 
-<h2 id={model_name.toLowerCase().replaceAll(` `, `-`)}>
+<h2 id={model_name.toLowerCase().replaceAll(` `, `-`)} {style}>
   {model_name}
   <button
     on:click={() => (show_details = !show_details)}
@@ -107,7 +109,7 @@
     </section>
   </div>
 {/if}
-<section class="metrics">
+<section class="metrics" style={metrics_style}>
   <h3 class="toc-exclude">Metrics</h3>
   <ul>
     {#each stats as { key, label, unit }}
@@ -143,7 +145,7 @@
   <section>
     <h3 class="toc-exclude">Notes</h3>
     <ul>
-      {#each [`description`, `training`].filter((k) => k in (notes ?? {})) as key}
+      {#each [`description`, `training`].filter((key) => key in (notes ?? {})) as key}
         <li>{@html notes[key]}</li>
       {/each}
     </ul>
@@ -154,6 +156,7 @@
   h2 {
     margin: 8pt 0 1em;
     text-align: center;
+    border-radius: 5pt;
   }
   button {
     background: none;

site/src/figs/rolling-mae-vs-hull-dist-models.svelte

@@ -20,7 +20,7 @@
   <ol>
     {#each found_on_page as { title, id, author, DOI, URL: href, issued } (id)}
       <li>
-        <strong {id}>{title}</strong>
+        <p {id}>{title}</p>
         <span>
           {@html author
             .slice(0, n_authors)
@@ -61,8 +61,8 @@
   ol > li {
     margin: 1ex 0;
   }
-  ol > li > strong {
-    display: block;
+  ol > li > p {
+    margin: 0;
   }
   ol > li > :is(small, span) {
     font-weight: lighter;

site/src/lib/ModelCard.svelte

@@ -86,7 +86,7 @@
   </ul>
 
   <legend>
-    best
+    heading color: best
     <ColorBar color_scale={interpolatePuOr} style="min-width: min(70vw, 400px);" />
     worst
   </legend>
@@ -97,9 +97,14 @@
         animate:flip={{ duration: 400 }}
         in:fade={{ delay: 100 }}
         out:fade={{ delay: 100 }}
-        style="background-color: {bg_color(model[sort_by], min_val, max_val)};"
       >
-        <ModelCard data={model} {stats} {sort_by} bind:show_details />
+        <ModelCard
+          data={model}
+          {stats}
+          {sort_by}
+          bind:show_details
+          style="background-color: {bg_color(model[sort_by], min_val, max_val)};"
+        />
         <!-- maybe show this text in a tooltip: This model was not trained on the
         canonical training set. It's results should not be seen as a one-to-one
         comparison to the other models but rather proof of concept of what is possible. -->