AUC Report

AUCReport is a linked, multi-variable AUC explorer that renders as a self-contained HTML page. It computes ROC curves and AUC values for every (variable, outcome) combination and presents them in an interactive 2 x 2 grid:

Left Right
Top AUC-AUC scatter (click a variable) ROC curve for X-axis outcome
Bottom Score distribution (boxplot or strip) ROC curve for Y-axis outcome

Clicking a point in the scatter plot updates the ROC curves and distribution chart for the selected variable.

Live demos

Explore the four interactive reports below. Click any point in the AUC-AUC scatter to update the linked panels.

Synthetic dataset

5 score variables with different affinities for 3 binary outcomes (400 patients, no missing data):

Synthetic with missing data

Same synthetic data with randomly introduced null patterns (fixed seed). Missing scores appear as cross marks below the distribution chart; sample sizes and missing counts are shown in the scatter tooltip:

Synthetic with auto-reverse

6-variable dataset where var_anti is the negation of var_0 (AUC < 0.5 for all outcomes). With auto_reverse=True (the default), it is automatically flipped and labelled (-) var_anti in the scatter and charts, while the other variables get a (+) prefix:

Synthetic with anti-correlated outcomes

Dataset with an additional outcome outcome_bad defined as 1 - outcome_0. With auto_reverse=True, the anti-correlated outcome is automatically flipped and labelled (-) outcome_bad in the scatter dropdowns and chart labels, while the other outcomes get a (+) prefix:

Diabetes dataset

sklearn diabetes dataset: 10 features (age, sex, bmi, bp, s1–s6) scored against 3 binary outcomes defined by progression quartile thresholds (Q25, Q50, Q75):

Basic usage

from plotutils.auc import AUCReport

report = AUCReport(
    df,
    variables=["var_0", "var_1", "var_2"],
    outcomes=["outcome_0", "outcome_1"],
    id_col="patient_id",
)
report.to_html("report.html")

Options

Distribution style

Use kind="strip" for a jittered strip plot instead of the default boxplot:

report = AUCReport(df, variables, outcomes, kind="strip")

Specificity levels

Annotate ROC curves at specific target specificity values. Each level draws a dashed cross-hair on the curve:

report = AUCReport(df, variables, outcomes, specificity_levels=[0.80, 0.90, 0.95])

Auto-reversing anti-correlated variables and outcomes

By default (auto_reverse=True), AUCReport performs two alignment steps:

  1. Outcome alignment — outcomes that are negatively correlated with a reference outcome (the first one by default, configurable via reference_outcome) have their labels flipped (0 ↔ 1). Reversed outcomes are labelled with a (-) prefix; others get (+).

  2. Variable alignment — after outcomes are aligned, variables whose AUC is below 0.5 for all outcomes are negated. Reversed variables are labelled with a (-) prefix; others get (+).

Prefixes are only shown when at least one item in the category is reversed.

# Default — anti-correlated outcomes and variables are reversed automatically.
report = AUCReport(df, variables, outcomes)

# Choose a specific reference outcome for alignment.
report = AUCReport(df, variables, outcomes, reference_outcome="survival")

# Disable — AUC < 0.5 values are shown as-is.
report = AUCReport(df, variables, outcomes, auto_reverse=False)

Missing data handling

AUCReport handles missing data gracefully:

Reference

plotutils.auc.AUCReport

Pre-computed linked AUC explorer that renders to a self-contained HTML page.

Parameters:

Name Type Description Default
df DataFrame

Data with one column per variable (continuous score) and one per outcome (binary 0/1 label), plus an optional ID column.

required
variables list[str]

Column names of the continuous score variables.

required
outcomes list[str]

Column names of the binary outcome variables.

required
id_col str or None

Optional column with sample / patient identifiers. When provided, hovering over points in the ROC and distribution charts reveals the ID.

None
kind (box, strip)

Distribution chart style: grouped boxplot or jittered strip plot.

"box"
specificity_levels list[float] or None

Target specificity levels to annotate on each ROC curve. Levels unreachable by a given curve are silently skipped. Defaults to [0.8, 0.9].

None
chart_width int

Pixel dimensions of each chart panel (ROC and distribution). The scatter panel is square with side chart_width + 20.

320
chart_height int

Pixel dimensions of each chart panel (ROC and distribution). The scatter panel is square with side chart_width + 20.

320

Examples:

One-liner for Quarto / Jupyter::

from plotutils.auc import AUCReport
AUCReport(df, variables, outcomes, id_col="patient_id").to_html("report.html")
Source code in src/plotutils/auc.py
 540
 541
 542
 543
 544
 545
 546
 547
 548
 549
 550
 551
 552
 553
 554
 555
 556
 557
 558
 559
 560
 561
 562
 563
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616
 617
 618
 619
 620
 621
 622
 623
 624
 625
 626
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636
 637
 638
 639
 640
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651
 652
 653
 654
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682
 683
 684
 685
 686
 687
 688
 689
 690
 691
 692
 693
 694
 695
 696
 697
 698
 699
 700
 701
 702
 703
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727
 728
 729
 730
 731
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741
 742
 743
 744
 745
 746
 747
 748
 749
 750
 751
 752
 753
 754
 755
 756
 757
 758
 759
 760
 761
 762
 763
 764
 765
 766
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776
 777
 778
 779
 780
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800
 801
 802
 803
 804
 805
 806
 807
 808
 809
 810
 811
 812
 813
 814
 815
 816
 817
 818
 819
 820
 821
 822
 823
 824
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834
 835
 836
 837
 838
 839
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853
 854
 855
 856
 857
 858
 859
 860
 861
 862
 863
 864
 865
 866
 867
 868
 869
 870
 871
 872
 873
 874
 875
 876
 877
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904
 905
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925
 926
 927
 928
 929
 930
 931
 932
 933
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944
 945
 946
 947
 948
 949
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959
 960
 961
 962
 963
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978
 979
 980
 981
 982
 983
 984
 985
 986
 987
 988
 989
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
class AUCReport:
    """Pre-computed linked AUC explorer that renders to a self-contained HTML page.

    Parameters
    ----------
    df : pl.DataFrame
        Data with one column per variable (continuous score) and one per
        outcome (binary 0/1 label), plus an optional ID column.
    variables : list[str]
        Column names of the continuous score variables.
    outcomes : list[str]
        Column names of the binary outcome variables.
    id_col : str or None
        Optional column with sample / patient identifiers.  When provided,
        hovering over points in the ROC and distribution charts reveals the ID.
    kind : {"box", "strip"}
        Distribution chart style: grouped boxplot or jittered strip plot.
    specificity_levels : list[float] or None
        Target specificity levels to annotate on each ROC curve.  Levels
        unreachable by a given curve are silently skipped.
        Defaults to ``[0.8, 0.9]``.
    chart_width, chart_height : int
        Pixel dimensions of each chart panel (ROC and distribution).
        The scatter panel is square with side ``chart_width + 20``.

    Examples
    --------
    One-liner for Quarto / Jupyter::

        from plotutils.auc import AUCReport
        AUCReport(df, variables, outcomes, id_col="patient_id").to_html("report.html")
    """

    _DEFAULT_SPEC_LEVELS: list[float] = [0.8, 0.9, 0.99]

    def __init__(
        self,
        df: pl.DataFrame,
        variables: list[str],
        outcomes: list[str],
        id_col: str | None = None,
        kind: Literal["box", "strip"] = "box",
        specificity_levels: list[float] | None = None,
        chart_width: int = 320,
        chart_height: int = 290,
        auto_reverse: bool = True,
        reference_outcome: str | None = None,
    ) -> None:
        self._df = df
        self._variables = variables
        self._outcomes = outcomes
        self._id_col = id_col
        self._kind = kind
        self._target_spec = (
            specificity_levels
            if specificity_levels is not None
            else self._DEFAULT_SPEC_LEVELS
        )
        self._w = chart_width
        self._h = chart_height
        self._plot_dist = (
            plot_bivariate_boxes if kind == "box" else plot_bivariate_strip
        )

        # Phase 1: reverse anti-correlated outcomes (before any AUC computation).
        self._reversed_outcomes: set[str] = set()
        if auto_reverse and len(outcomes) > 1:
            ref = reference_outcome if reference_outcome is not None else outcomes[0]
            for out in outcomes:
                if out == ref:
                    continue
                # Pearson correlation on non-null overlap with the reference.
                pair = self._df.select([ref, out]).drop_nulls()
                if len(pair) < 2:
                    continue
                corr = pair.select(
                    pl.corr(pl.col(ref).cast(pl.Float64), pl.col(out).cast(pl.Float64))
                ).item()
                if corr is not None and corr < -0.3:
                    self._reversed_outcomes.add(out)

            if self._reversed_outcomes:
                self._df = self._df.with_columns(
                    [pl.col(out) * -1 + 1 for out in self._reversed_outcomes]
                )

        # Phase 2: compute AUC on (possibly outcome-aligned) data.
        self._auc_df = self._build_auc_df()

        # Phase 3: reverse variables where AUC < 0.5 for ALL outcomes.
        self._reversed: set[str] = set()
        if auto_reverse:
            auc_cols = [f"auc_{out}" for out in outcomes]
            for var in variables:
                row = self._auc_df.filter(pl.col("variable") == var)
                if row.is_empty():
                    continue
                aucs = [row[c].item() for c in auc_cols]
                non_null = [a for a in aucs if a is not None]
                if non_null and all(a < 0.5 for a in non_null):
                    self._reversed.add(var)

            if self._reversed:
                self._df = self._df.with_columns(
                    [pl.col(var) * -1 for var in self._reversed]
                )
                self._auc_df = self._build_auc_df()

        # Build display names: add (+)/(-) prefixes when any variable is reversed.
        if self._reversed:
            self._display_names = {
                var: f"(-) {var}" if var in self._reversed else f"(+) {var}"
                for var in variables
            }
        else:
            self._display_names = {var: var for var in variables}

        # Build outcome display names: add (+)/(-) prefixes when any outcome is reversed.
        if self._reversed_outcomes:
            self._outcome_display_names = {
                out: f"(-) {out}" if out in self._reversed_outcomes else f"(+) {out}"
                for out in outcomes
            }
        else:
            self._outcome_display_names = {out: out for out in outcomes}

        # Add display_name column to _auc_df.
        self._auc_df = self._auc_df.with_columns(
            pl.col("variable").replace_strict(self._display_names).alias("display_name")
        )

        # Pre-compute all chart specs (expensive, done once).
        self._roc_specs = self._build_roc_specs()
        self._dist_specs = self._build_dist_specs()

    # ── Internal builders ──────────────────────────────────────────────────

    def _build_auc_df(self) -> pl.DataFrame:
        n_total = len(self._df)
        # Outcome-level missingness is the same for all variables.
        outcome_missing: dict[str, int] = {
            out: int(self._df[out].is_null().sum()) for out in self._outcomes
        }
        rows = []
        for var in self._variables:
            n_score_missing = int(self._df[var].is_null().sum())
            row: dict = {
                "variable": var,
                "n_total": n_total,
                "n_score_missing": n_score_missing,
            }
            for out in self._outcomes:
                # Drop rows where score OR outcome is null before ROC computation.
                df_vo = (
                    self._df.select([var, out])
                    .rename({var: "score", out: "label"})
                    .drop_nulls()
                )
                n_valid = len(df_vo)
                row[f"n_valid_{out}"] = n_valid
                row[f"n_outcome_missing_{out}"] = outcome_missing[out]

                try:
                    roc = _compute_roc(df_vo, "score", "label")
                except InsufficientClassesError:
                    row[f"auc_{out}"] = None
                    for sl in self._target_spec:
                        row[f"pauc_{out}_q{int(sl * 100)}"] = None
                    continue
                row[f"auc_{out}"] = round(_compute_auc(roc), 4)
                # pAUC columns: one per specificity level, None if unreachable.
                max_spec = float(
                    roc.filter(pl.col("threshold").is_not_null())["specificity"].max()  # type: ignore[arg-type]
                )
                for sl in self._target_spec:
                    col = f"pauc_{out}_q{int(sl * 100)}"
                    if sl <= max_spec:
                        row[col] = round(
                            _compute_pauc(
                                roc, sl, 1.0, focus="specificity", mcclish=True
                            ),
                            4,
                        )
                    else:
                        row[col] = None
            rows.append(row)
        return pl.DataFrame(rows)

    def _build_roc_specs(self) -> dict[str, dict]:
        specs: dict[str, dict] = {}
        for var in self._variables:
            for out in self._outcomes:
                select_cols = [self._id_col, var, out] if self._id_col else [var, out]
                df_vo = (
                    self._df.select(select_cols)
                    .rename({var: "score", out: "label"})
                    .drop_nulls(subset=["score", "label"])
                )
                try:
                    roc_check = _compute_roc(
                        df_vo.select(["score", "label"]), "score", "label"
                    )
                except InsufficientClassesError:
                    continue
                max_spec = float(
                    roc_check.filter(pl.col("threshold").is_not_null())[
                        "specificity"
                    ].max()  # type: ignore[arg-type]
                )
                achievable = [s for s in self._target_spec if s <= max_spec] or None
                chart = plot_roc_curve(
                    df_vo,
                    score_col="score",
                    label_col="label",
                    id_col=self._id_col,
                    specificity_levels=achievable,
                    title=self._display_names[var],
                    width=self._w,
                    height=self._h,
                )
                specs[f"{var}|{out}"] = json.loads(chart.to_json())
        return specs

    def _build_dist_specs(self) -> dict[str, dict]:
        specs: dict[str, dict] = {}
        for var in self._variables:
            for out_x in self._outcomes:
                for out_y in self._outcomes:
                    if out_x == out_y:
                        continue

                    select_cols = [var, out_x, out_y]
                    if self._id_col:
                        select_cols.insert(0, self._id_col)

                    rename_map = {var: "score", out_x: "label_x", out_y: "label_y"}
                    df_full = (
                        self._df.select(select_cols)
                        .rename(rename_map)
                        .with_columns(
                            pl.col("label_x").cast(pl.Utf8).fill_null("Missing"),
                            pl.col("label_y").cast(pl.Utf8).fill_null("Missing"),
                        )
                    )

                    # Patients with null score → separate layer.
                    df_valid = df_full.filter(pl.col("score").is_not_null())
                    df_missing = df_full.filter(pl.col("score").is_null())

                    d: dict = {
                        "score": df_valid["score"].to_list(),
                        "label_x": df_valid["label_x"].to_list(),
                        "label_y": df_valid["label_y"].to_list(),
                    }
                    if self._id_col:
                        d[self._id_col] = df_valid[self._id_col].to_list()

                    missing_score_df: pl.DataFrame | None = None
                    if len(df_missing) > 0:
                        miss_d: dict = {
                            "label_x": df_missing["label_x"].to_list(),
                            "label_y": df_missing["label_y"].to_list(),
                        }
                        if self._id_col:
                            miss_d[self._id_col] = df_missing[self._id_col].to_list()
                        missing_score_df = pl.DataFrame(miss_d)

                    chart = self._plot_dist(
                        pl.DataFrame(d),
                        score_col="score",
                        label_x_col="label_x",
                        label_y_col="label_y",
                        id_col=self._id_col,
                        title=self._display_names[var],
                        x_title=self._outcome_display_names[out_x].replace("_", " "),
                        color_title=self._outcome_display_names[out_y].replace("_", " "),
                        y_title="score",
                        width=self._w,
                        height=self._h,
                        missing_score_df=missing_score_df,
                    )
                    specs[f"{var}|{out_x}|{out_y}"] = json.loads(chart.to_json())
        return specs

    @staticmethod
    def _auc_lookup(signal: str, outcomes: list[str], field: str = "auc_{out}") -> str:
        """Nested Vega ternary to pick the right datum field by signal value.

        Parameters
        ----------
        signal : str
            Name of the Vega signal (e.g. ``"outcome_x"``).
        outcomes : list[str]
            All possible outcome values.
        field : str
            Field name template with ``{out}`` placeholder (e.g.
            ``"auc_{out}"`` or ``"n_valid_{out}"``).
        """

        def _f(out: str) -> str:
            return field.format(out=out)

        expr = f"datum.{_f(outcomes[-1])}"
        for out in reversed(outcomes[:-1]):
            expr = f"{signal} == '{out}' ? datum.{_f(out)} : {expr}"
        return expr

    def _build_scatter(self) -> alt.Chart:
        outcomes = self._outcomes
        outcome_labels = [self._outcome_display_names[o].replace("_", " ") for o in outcomes]
        scatter_size = self._w + 20

        outcome_x = alt.param(
            name="outcome_x",
            value=outcomes[0],
            bind=alt.binding_select(
                options=outcomes, labels=outcome_labels, name="X-axis: "
            ),
        )
        outcome_y = alt.param(
            name="outcome_y",
            value=outcomes[1],
            bind=alt.binding_select(
                options=outcomes, labels=outcome_labels, name="Y-axis: "
            ),
        )
        click_sel = alt.selection_point(
            fields=["variable"], name="var_sel", on="click", empty=False
        )

        return (
            alt.Chart(self._auc_df)
            .transform_calculate(
                x_auc=self._auc_lookup("outcome_x", outcomes),
                y_auc=self._auc_lookup("outcome_y", outcomes),
                n_valid_x=self._auc_lookup("outcome_x", outcomes, "n_valid_{out}"),
                n_valid_y=self._auc_lookup("outcome_y", outcomes, "n_valid_{out}"),
                n_omiss_x=self._auc_lookup(
                    "outcome_x", outcomes, "n_outcome_missing_{out}"
                ),
                n_omiss_y=self._auc_lookup(
                    "outcome_y", outcomes, "n_outcome_missing_{out}"
                ),
            )
            .transform_calculate(
                _sz_x=(
                    '"X: " + datum.n_valid_x + "/" + datum.n_total'
                    ' + " (" + datum.n_omiss_x + " outcomes missing)"'
                ),
                _sz_y=(
                    '"Y: " + datum.n_valid_y + "/" + datum.n_total'
                    ' + " (" + datum.n_omiss_y + " outcomes missing)"'
                ),
                _sz_score='"Score missing: " + datum.n_score_missing',
            )
            .mark_point(filled=True)
            .encode(
                x=alt.X(
                    "x_auc:Q",
                    title="AUC (X outcome)",
                    scale=alt.Scale(domain=[0.4, 1.05]),
                ),
                y=alt.Y(
                    "y_auc:Q",
                    title="AUC (Y outcome)",
                    scale=alt.Scale(domain=[0.4, 1.05]),
                ),
                color=alt.condition(
                    click_sel,
                    alt.Color("display_name:N", legend=None),
                    alt.value("lightgray"),
                ),
                size=alt.condition(click_sel, alt.value(180), alt.value(80)),
                tooltip=[
                    alt.Tooltip("display_name:N", title="Variable"),
                    alt.Tooltip("x_auc:Q", format=".3f", title="AUC (X)"),
                    alt.Tooltip("y_auc:Q", format=".3f", title="AUC (Y)"),
                    alt.Tooltip("_sz_x:N", title="Sample size"),
                    alt.Tooltip("_sz_y:N", title=""),
                    alt.Tooltip("_sz_score:N", title=""),
                ],
            )
            .add_params(click_sel, outcome_x, outcome_y)
            .properties(
                title=alt.Title(
                    "AUC – AUC scatter",
                    subtitle="Click a variable to reveal its charts →",
                ),
                width=scatter_size,
                height=scatter_size,
            )
            .configure_axis(
                gridColor="#444", gridWidth=0.75, gridDash=[3, 3], gridOpacity=0.4
            )
            .configure_view(strokeWidth=0)
        )

    # ── Public API ─────────────────────────────────────────────────────────────

    def to_html(self, path: str | None = None) -> str:
        """Render the linked AUC explorer as a self-contained HTML page.

        Parameters
        ----------
        path : str or None
            If provided, write the HTML to this file path in addition to
            returning it.

        Returns
        -------
        str
            Full HTML page as a string (suitable for ``IPython.display.HTML``
            or Quarto ``{python}`` cells with ``output: asis``).
        """
        dist_kind_label = "Boxplot" if self._kind == "box" else "Strip plot"
        roc_specs_js = json.dumps(self._roc_specs)
        dist_specs_js = json.dumps(self._dist_specs)
        scatter_js = json.dumps(json.loads(self._build_scatter().to_json()))
        out_display_js = json.dumps(self._outcome_display_names)

        html = f"""<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Linked AUC Explorer</title>
  <script src="https://cdn.jsdelivr.net/npm/vega@6"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@6.1.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>
  <style>
    body {{
      font-family: sans-serif;
      margin: 0;
      padding: 20px 28px;
      background: #fafafa;
      color: #222;
    }}
    h1 {{ font-size: 18px; margin: 0 0 4px; }}
    p.hint {{ color: #777; font-size: 13px; margin: 0 0 18px; }}

    #grid {{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 20px;
      align-items: start;
    }}

    .cell-label {{
      font-size: 12px;
      font-weight: bold;
      color: #666;
      margin-bottom: 4px;
      min-height: 16px;
    }}

    .slot {{
      border: 2px dashed #ddd;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbb;
      font-size: 13px;
      box-sizing: border-box;
      min-height: 320px;
    }}

    /* Prevent Vega canvases from overflowing their grid cell */
    .vega-embed {{
      width: 100%;
    }}
    .vega-embed canvas, .vega-embed svg {{
      max-width: 100%;
      height: auto;
    }}
  </style>
</head>
<body>
  <h1>Linked AUC Explorer</h1>
  <p class="hint">
    Select outcomes for the scatter axes. Click a variable point to populate the other three charts.
  </p>

  <div id="grid">

    <!-- top-left: scatter -->
    <div>
      <div class="cell-label">AUC scatter</div>
      <div id="scatter"></div>
    </div>

    <!-- top-right: ROC for outcome X -->
    <div>
      <div class="cell-label" id="lbl-roc0">ROC — outcome X</div>
      <div class="slot" id="roc0"><span>← click a variable</span></div>
    </div>

    <!-- bottom-left: distribution chart -->
    <div>
      <div class="cell-label" id="lbl-dist">{dist_kind_label} — score distribution</div>
      <div class="slot" id="dist"><span>← click a variable</span></div>
    </div>

    <!-- bottom-right: ROC for outcome Y -->
    <div>
      <div class="cell-label" id="lbl-roc1">ROC — outcome Y</div>
      <div class="slot" id="roc1"><span>← click a variable</span></div>
    </div>

  </div>

<script>
const ROC  = {roc_specs_js};
const DIST = {dist_specs_js};
const SCATTER = {scatter_js};
const OUT_DISPLAY = {out_display_js};

let activeVar = null;
let activeDisplayName = null;

function embed(id, spec) {{
  vegaEmbed('#' + id, spec, {{actions: false}});
}}

function update(view) {{
  if (!activeVar) return;
  const ox = view.signal('outcome_x');
  const oy = view.signal('outcome_y');

  // ROC charts
  const oxLabel = (OUT_DISPLAY[ox] || ox).replace(/_/g, ' ');
  const oyLabel = (OUT_DISPLAY[oy] || oy).replace(/_/g, ' ');
  document.getElementById('lbl-roc0').textContent = 'ROC — ' + oxLabel + ' (' + activeDisplayName + ')';
  document.getElementById('lbl-roc1').textContent = 'ROC — ' + oyLabel + ' (' + activeDisplayName + ')';
  const roc0 = ROC[activeVar + '|' + ox];
  const roc1 = ROC[activeVar + '|' + oy];
  if (roc0) embed('roc0', roc0);
  if (roc1) embed('roc1', roc1);

  // Distribution chart
  document.getElementById('lbl-dist').textContent =
    '{dist_kind_label} — ' + activeDisplayName + ' score × ' + oxLabel + ' × ' + oyLabel;
  const dist = DIST[activeVar + '|' + ox + '|' + oy];
  if (dist) embed('dist', dist);
}}

vegaEmbed('#scatter', SCATTER, {{actions: false}}).then(function(r) {{
  const view = r.view;

  view.addEventListener('click', function(event, item) {{
    if (item && item.datum && item.datum.variable) {{
      activeVar = item.datum.variable;
      activeDisplayName = item.datum.display_name || activeVar;
      update(view);
    }}
  }});

  view.addSignalListener('outcome_x', function() {{ update(view); }});
  view.addSignalListener('outcome_y', function() {{ update(view); }});
}});
</script>
</body>
</html>
"""
        if path is not None:
            with open(path, "w", encoding="utf-8") as f:
                f.write(html)
        return html

    def _repr_html_(self) -> str:
        """Rich HTML display for Jupyter / Quarto notebooks."""
        return self.to_html()

to_html(path=None)

Render the linked AUC explorer as a self-contained HTML page.

Parameters:

Name Type Description Default
path str or None

If provided, write the HTML to this file path in addition to returning it.

None

Returns:

Type Description
str

Full HTML page as a string (suitable for IPython.display.HTML or Quarto {python} cells with output: asis).

Source code in src/plotutils/auc.py
    def to_html(self, path: str | None = None) -> str:
        """Render the linked AUC explorer as a self-contained HTML page.

        Parameters
        ----------
        path : str or None
            If provided, write the HTML to this file path in addition to
            returning it.

        Returns
        -------
        str
            Full HTML page as a string (suitable for ``IPython.display.HTML``
            or Quarto ``{python}`` cells with ``output: asis``).
        """
        dist_kind_label = "Boxplot" if self._kind == "box" else "Strip plot"
        roc_specs_js = json.dumps(self._roc_specs)
        dist_specs_js = json.dumps(self._dist_specs)
        scatter_js = json.dumps(json.loads(self._build_scatter().to_json()))
        out_display_js = json.dumps(self._outcome_display_names)

        html = f"""<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Linked AUC Explorer</title>
  <script src="https://cdn.jsdelivr.net/npm/vega@6"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@6.1.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>
  <style>
    body {{
      font-family: sans-serif;
      margin: 0;
      padding: 20px 28px;
      background: #fafafa;
      color: #222;
    }}
    h1 {{ font-size: 18px; margin: 0 0 4px; }}
    p.hint {{ color: #777; font-size: 13px; margin: 0 0 18px; }}

    #grid {{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 20px;
      align-items: start;
    }}

    .cell-label {{
      font-size: 12px;
      font-weight: bold;
      color: #666;
      margin-bottom: 4px;
      min-height: 16px;
    }}

    .slot {{
      border: 2px dashed #ddd;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbb;
      font-size: 13px;
      box-sizing: border-box;
      min-height: 320px;
    }}

    /* Prevent Vega canvases from overflowing their grid cell */
    .vega-embed {{
      width: 100%;
    }}
    .vega-embed canvas, .vega-embed svg {{
      max-width: 100%;
      height: auto;
    }}
  </style>
</head>
<body>
  <h1>Linked AUC Explorer</h1>
  <p class="hint">
    Select outcomes for the scatter axes. Click a variable point to populate the other three charts.
  </p>

  <div id="grid">

    <!-- top-left: scatter -->
    <div>
      <div class="cell-label">AUC scatter</div>
      <div id="scatter"></div>
    </div>

    <!-- top-right: ROC for outcome X -->
    <div>
      <div class="cell-label" id="lbl-roc0">ROC — outcome X</div>
      <div class="slot" id="roc0"><span>← click a variable</span></div>
    </div>

    <!-- bottom-left: distribution chart -->
    <div>
      <div class="cell-label" id="lbl-dist">{dist_kind_label} — score distribution</div>
      <div class="slot" id="dist"><span>← click a variable</span></div>
    </div>

    <!-- bottom-right: ROC for outcome Y -->
    <div>
      <div class="cell-label" id="lbl-roc1">ROC — outcome Y</div>
      <div class="slot" id="roc1"><span>← click a variable</span></div>
    </div>

  </div>

<script>
const ROC  = {roc_specs_js};
const DIST = {dist_specs_js};
const SCATTER = {scatter_js};
const OUT_DISPLAY = {out_display_js};

let activeVar = null;
let activeDisplayName = null;

function embed(id, spec) {{
  vegaEmbed('#' + id, spec, {{actions: false}});
}}

function update(view) {{
  if (!activeVar) return;
  const ox = view.signal('outcome_x');
  const oy = view.signal('outcome_y');

  // ROC charts
  const oxLabel = (OUT_DISPLAY[ox] || ox).replace(/_/g, ' ');
  const oyLabel = (OUT_DISPLAY[oy] || oy).replace(/_/g, ' ');
  document.getElementById('lbl-roc0').textContent = 'ROC — ' + oxLabel + ' (' + activeDisplayName + ')';
  document.getElementById('lbl-roc1').textContent = 'ROC — ' + oyLabel + ' (' + activeDisplayName + ')';
  const roc0 = ROC[activeVar + '|' + ox];
  const roc1 = ROC[activeVar + '|' + oy];
  if (roc0) embed('roc0', roc0);
  if (roc1) embed('roc1', roc1);

  // Distribution chart
  document.getElementById('lbl-dist').textContent =
    '{dist_kind_label} — ' + activeDisplayName + ' score × ' + oxLabel + ' × ' + oyLabel;
  const dist = DIST[activeVar + '|' + ox + '|' + oy];
  if (dist) embed('dist', dist);
}}

vegaEmbed('#scatter', SCATTER, {{actions: false}}).then(function(r) {{
  const view = r.view;

  view.addEventListener('click', function(event, item) {{
    if (item && item.datum && item.datum.variable) {{
      activeVar = item.datum.variable;
      activeDisplayName = item.datum.display_name || activeVar;
      update(view);
    }}
  }});

  view.addSignalListener('outcome_x', function() {{ update(view); }});
  view.addSignalListener('outcome_y', function() {{ update(view); }});
}});
</script>
</body>
</html>
"""
        if path is not None:
            with open(path, "w", encoding="utf-8") as f:
                f.write(html)
        return html