Interactive Taylor Diagram

A Taylor diagram is a polar plot used to compare multiple models against a reference. It displays each model’s standard deviation as the radial distance and correlation coefficient as the azimuthal angle, with the reference standard deviation as the baseline. The RMSE is represented by the distance between a model point and the reference point, making it easy to assess how closely each model matches the reference in terms of variability and correlation.

One major advantage of the Taylor diagram is that it summarizes several key statistics in a single view, so differences among models can be compared quickly and clearly. This is especially useful for Earth system model evaluation, intercomparison, and benchmarking, because it helps identify which models best reproduce observed variability, which ones have the strongest agreement with reference data, and how performance changes across different simulations or variables.

Reference: Taylor, K. E. (2001), Summarizing multiple aspects of model performance in a single diagram, J. Geophys. Res., 106(D7), 7183–7192, doi:10.1029/2000JD900719.

This notebook shows usage examples of interactive Taylor Diagram. Detailed API description can be found here.

Import functions

from bokeh.plotting import output_file, save, output_notebook
from ESMBenchmarkViz import taylor_diagram

# Enable Bokeh output in the notebook
output_notebook()

Loading BokehJS ...

1: Basic usage

Example 1 show basic usage of the function.

# Sample data
std_devs = [0.3, 0.8, 1.2, 0.9, 1.1, 1.2, 1, 2]
correlations = [0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 1, 0.99]
names = ['Model A', 'Model B', 'Model C', 'Model D', 'Model E', 'Model F', 'Model G', 'Model H']
refstd = 1.25

# Figure settings
normalize = True  # Set Trur or False
step = 0.2

# Plot
p = taylor_diagram(std_devs, correlations, names, refstd, normalize=normalize, step=step)

2: More models with bigger figure size

Example 2 exapands to include more models in the plot.

std_devs = [0.3, 0.8, 1.2, 0.9, 1.1, 1.2, 1, 2, 1.3, 1.8, 2.2, 1.9, 2.1, 2.2, 2, 3]
correlations = [0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 1, 0.99, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 1, 0.99]
names = ['Model A', 'Model B', 'Model C', 'Model D', 'Model E', 'Model F', 'Model G', 'Model H', 'Model I', 'Model J', 'Model K', 'Model L', 'Model M', 'Model N', 'Model O', 'Model P']

refstd = 1.25
p = taylor_diagram(std_devs, correlations, names, refstd, normalize=normalize, step=step, colormap='magma_r', width=800)

3: Custom colors

Example 3 uses custom colors for data points.

std_devs = [0.8, 1.0, 1.2]  # Standard deviations of models
correlations = [0.9, 0.85, 0.7]  # Correlation coefficients
names = ["Model A", "Model B", "Model C"]  # Names of models
refstd = 1.0  # Standard deviation of reference model
colormap = ["red", "green", "blue"]  # Colors of models

taylor_diagram(std_devs, correlations, names, refstd, colormap=colormap)

figure(

id = 'p1850', …)

above = [],

align = 'auto',

aspect_ratio = 1,

aspect_scale = 1,

attribution = [],

background_fill_alpha = 1.0,

background_fill_color = '#ffffff',

background_hatch_alpha = 1.0,

background_hatch_color = 'black',

background_hatch_extra = {},

background_hatch_pattern = None,

background_hatch_scale = 12.0,

background_hatch_weight = 1.0,

below = [LinearAxis(id='p1864', ...)],

border_fill_alpha = 1.0,

border_fill_color = '#ffffff',

border_hatch_alpha = 1.0,

border_hatch_color = 'black',

border_hatch_extra = {},

border_hatch_pattern = None,

border_hatch_scale = 12.0,

border_hatch_weight = 1.0,

border_line_alpha = 1.0,

border_line_cap = 'butt',

border_line_color = None,

border_line_dash = [],

border_line_dash_offset = 0,

border_line_join = 'bevel',

border_line_width = 1,

center = [Grid(id='p1868', ...), Grid(id='p1873', ...), Label(id='p1896', ...), Label(id='p1915', ...), Label(id='p1934', ...), Label(id='p1953', ...), Label(id='p1972', ...), Label(id='p1991', ...), Label(id='p2010', ...), Label(id='p2020', ...), Label(id='p2021', ...), Label(id='p2022', ...), Label(id='p2023', ...), Label(id='p2024', ...), Label(id='p2025', ...), Label(id='p2026', ...), Label(id='p2045', ...), Label(id='p2055', ...), Label(id='p2065', ...), Label(id='p2075', ...), Label(id='p2085', ...), Label(id='p2095', ...), Label(id='p2105', ...), Label(id='p2115', ...), Label(id='p2125', ...), Label(id='p2135', ...), Label(id='p2145', ...), Label(id='p2155', ...), Label(id='p2165', ...), Legend(id='p2176', ...), LabelSet(id='p2178', ...), Label(id='p2183', ...), Label(id='p2184', ...)],

context_menu = 'auto',

css_classes = [],

css_variables = {},

disabled = False,

elements = [],

extra_x_ranges = {},

extra_x_scales = {},

extra_y_ranges = {},

extra_y_scales = {},

flow_mode = 'block',

frame_align = True,

frame_height = None,

frame_width = None,

height = 600,

height_policy = 'auto',

hidpi = True,

hold_render = False,

html_attributes = {},

html_id = None,

js_event_callbacks = {},

js_property_callbacks = {},

left = [LinearAxis(id='p1869', ...)],

lod_factor = 10,

lod_interval = 300,

lod_threshold = 2000,

lod_timeout = 500,

margin = None,

match_aspect = False,

max_height = None,

max_width = None,

min_border = 5,

min_border_bottom = None,

min_border_left = None,

min_border_right = None,

min_border_top = None,

min_height = None,

min_width = None,

name = None,

outline_line_alpha = 1.0,

outline_line_cap = 'butt',

outline_line_color = '#e5e5e5',

outline_line_dash = [],

outline_line_dash_offset = 0,

outline_line_join = 'bevel',

outline_line_width = 1,

output_backend = 'canvas',

renderers = [GlyphRenderer(id='p1893', ...), GlyphRenderer(id='p1903', ...), GlyphRenderer(id='p1912', ...), GlyphRenderer(id='p1922', ...), GlyphRenderer(id='p1931', ...), GlyphRenderer(id='p1941', ...), GlyphRenderer(id='p1950', ...), GlyphRenderer(id='p1960', ...), GlyphRenderer(id='p1969', ...), GlyphRenderer(id='p1979', ...), GlyphRenderer(id='p1988', ...), GlyphRenderer(id='p1998', ...), GlyphRenderer(id='p2007', ...), GlyphRenderer(id='p2017', ...), GlyphRenderer(id='p2033', ...), GlyphRenderer(id='p2042', ...), GlyphRenderer(id='p2052', ...), GlyphRenderer(id='p2062', ...), GlyphRenderer(id='p2072', ...), GlyphRenderer(id='p2082', ...), GlyphRenderer(id='p2092', ...), GlyphRenderer(id='p2102', ...), GlyphRenderer(id='p2112', ...), GlyphRenderer(id='p2122', ...), GlyphRenderer(id='p2132', ...), GlyphRenderer(id='p2142', ...), GlyphRenderer(id='p2152', ...), GlyphRenderer(id='p2162', ...), GlyphRenderer(id='p2173', ...)],

reset_policy = 'standard',

resizable = False,

right = [],

sizing_mode = None,

styles = {},

stylesheets = [],

subscribed_events = PropertyValueSet(),

syncable = True,

tags = [],

title = Title(id='p1853', ...),

title_location = 'above',

toolbar = Toolbar(id='p1859', ...),

toolbar_inner = False,

toolbar_location = 'right',

toolbar_sticky = True,

visible = True,

width = 600,

width_policy = 'auto',

window_axis = 'none',

x_range = Range1d(id='p1860', ...),

x_scale = LinearScale(id='p1862', ...),

y_range = Range1d(id='p1861', ...),

y_scale = LinearScale(id='p1863', ...))

6: Save to PNG

Example 6 demonstrates the save functionality. The toolbar now includes a save button for interactive saving, and you can also export static PNG files programmatically using the static parameter.

# The plot now has a save button in the toolbar (look for the download icon)
p = taylor_diagram(std_devs, correlations, names, refstd, colormap=colormap, width=500)

# For programmatic PNG export, use the static parameter:
# Uncomment the lines below to save as PNG file
# p_png = taylor_diagram(
#     std_devs, correlations, names, refstd,
#     colormap=colormap,
#     static=True,
#     static_filename='taylor_diagram_example.png',
#     show_plot=False  # Avoid double display
# )
# print('PNG saved to: taylor_diagram_example.png')

# Note: Static PNG export requires selenium and chromedriver

4: Show Diagnostic figures in tooltips

Example 4 expands example 3 and generates an interactive Taylor Diagram where each data point is accompanied by a diagnostic figure.

images = [
        'images/image1.jpg',
        'images/image2.jpg',
        'images/image3.jpg',
    ]

# Images appear in tooltips when hovering, but no panel is shown (default behavior)
p = taylor_diagram(
    std_devs,
    correlations,
    names,
    refstd,
    colormap=colormap,
    images=images,
    width=500
)
# With show_image_panel=False (default), images only appear in tooltips
# The plot width stays at 500px (not doubled)

5: Show Diagnostic figures in tooltips with interactive panel

Example 5 expands example 4 and generates an interactive Taylor Diagram where each data point is accompanied by a diagnostic figure. Set show_image_panel=True to display the interactive panel on the right with dropdown menu and navigation buttons.

images = [
        'images/model_sample1.png',
        'images/model_sample2.png',
        'images/model_sample3.png',
    ]

p = taylor_diagram(
    std_devs, correlations, names, refstd,
    colormap=colormap, images=images,
    show_image_panel=True,  # Show the interactive image panel
    width=500
)

6: Save to PNG

Example 6 demonstrates the save functionality. The toolbar now includes a save button for interactive saving, and you can also export static PNG files programmatically using the static parameter.

# The plot now has a save button in the toolbar (look for the download icon)
p = taylor_diagram(std_devs, correlations, names, refstd, colormap=colormap, width=500)

# For programmatic PNG export, use the static parameter:
# Uncomment the lines below to save as PNG file
# p_png = taylor_diagram(
#     std_devs, correlations, names, refstd,
#     colormap=colormap,
#     static=True,
#     static_filename='taylor_diagram_example.png',
#     show_plot=False  # Avoid double display
# )
# print('PNG saved to: taylor_diagram_example.png')

# Note: Static PNG export requires selenium and chromedriver

7: Save to HTML

# Create a plot to save (with show_plot=False to avoid double display)
p = taylor_diagram(
    std_devs, correlations, names, refstd,
    colormap=colormap, images=images, width=500,
    show_plot=False
)

# Set output to static HTML file
output_file(filename="interactive_taylor_diagram.html", title="Interactive Taylor Diagram")

# Save the results to a file
save(p)

# Result: [`interactive_taylor_diagram.html`](interactive_taylor_diagram.html)

'/Users/lee1043/Documents/Research/git/ESMBenchmarkViz/docs/examples/interactive_taylor_diagram.html'