code: def plot_grids(dataset, model_names, out_dir=None):
      if out_dir is not None:
          os.mkdir(out_dir)
  
      scores = []
      for model in model_names:
          scores.extend(run_experiments(dataset=dataset, model=model))
  
      prefix = "<style type='text/css'> .shap_benchmark__select:focus { outline-width: 0 }</style>"
      out = ""  # background: rgb(30, 136, 229)
  
      # out += "<div style='font-weight: regular; font-size: 24px; text-align: center; background: #f8f8f8; color: #000; padding: 20px;'>SHAP Benchmark</div>\n"
      # out += "<div style='height: 1px; background: #ddd;'></div>\n"
      # out += "<div style='height: 7px; background-image: linear-gradient(to right, rgb(30, 136, 229), rgb(255, 13, 87));'></div>"
  
      out += "<div style='position: fixed; left: 0px; top: 0px; right: 0px; height: 230px; background: #fff;'>\n"  # box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      out += "<div style='position: absolute; bottom: 0px; left: 0px; right: 0px;' align='center'><table style='border-width: 1px; margin-right: 100px'>\n"
      for ind, model in enumerate(model_names):
          row_keys, col_keys, data = make_grid(scores, dataset, model)
          #         print(data)
          #         print(colors.red_blue_solid(0.))
          #         print(colors.red_blue_solid(1.))
          #         return
          for metric in col_keys:
              save_plot = False
              if metric.startswith("human_"):
                  plot_human(dataset, model, metric)
                  save_plot = True
              elif metric not in [
                  "local_accuracy",
                  "runtime",
                  "consistency_guarantees",
              ]:
                  plot_curve(dataset, model, metric)
                  save_plot = True
  
              if save_plot:
                  buf = io.BytesIO()
                  pl.gcf().set_size_inches(1200.0 / 175, 1000.0 / 175)
                  pl.savefig(buf, format="png", dpi=175)
                  if out_dir is not None:
                      pl.savefig(
                          f"{out_dir}/plot_{dataset}_{model}_{metric}.pdf",
                          format="pdf",
                      )
                  pl.close()
                  buf.seek(0)
                  data_uri = (
                      base64.b64encode(buf.read())
                      .decode("utf-8")
                      .replace("\n", "")
                  )
                  plot_id = (
                      "plot__" + dataset + "__" + model + "__" + metric
                  )
                  prefix += f"<div onclick='document.getElementById(\"{plot_id}\").style.display = \"none\"' style='display: none; position: fixed; z-index: 10000; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(255,255,255,0.9);' id='{plot_id}'>"
                  prefix += (
                      "<img width='600' height='500' style='margin-left: auto; margin-right: auto; margin-top: 230px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);' src='data:image/png;base64,%s'>"
                      % data_uri
                  )
                  prefix += "</div>"
  
          model_title = (
              getattr(models, dataset + "__" + model)
              .__doc__.split("\n")[0]
              .strip()
          )
  
          if ind == 0:
              out += "<tr><td style='background: #fff; width: 250px'></td></td>"
              for j in range(data.shape[1]):
                  metric_title = (
                      getattr(metrics, col_keys[j])
                      .__doc__.split("\n")[0]
                      .strip()
                  )
                  out += (
                      "<td style='width: 40px; min-width: 40px; background: #fff; text-align: right;'><div style='margin-left: 10px; margin-bottom: -5px; white-space: nowrap; transform: rotate(-45deg); transform-origin: left top 0; width: 1.5em; margin-top: 8em'>"
                      + metric_title
                      + "</div></td>"
                  )
              out += "</tr>\n"
              out += "</table></div></div>\n"
              out += "<table style='border-width: 1px; margin-right: 100px; margin-top: 230px;'>\n"
          out += (
              "<tr><td style='background: #fff'></td><td colspan='%d' style='background: #fff; font-weight: bold; text-align: center; margin-top: 10px;'>%s</td></tr>\n"
              % (data.shape[1], model_title)
          )
          for i in range(data.shape[0]):
              out += "<tr>"
              #             if i == 0:
              #                 out += "<td rowspan='%d' style='background: #fff; text-align: center; white-space: nowrap; vertical-align: middle; '><div style='font-weight: bold; transform: rotate(-90deg); transform-origin: left top 0; width: 1.5em; margin-top: 8em'>%s</div></td>" % (data.shape[0], model_name)
              method_title = (
                  getattr(methods, row_keys[i])
                  .__doc__.split("\n")[0]
                  .strip()
              )
              out += (
                  "<td style='background: #ffffff; text-align: right; width: 250px' title='shap.LinearExplainer(model)'>"
                  + method_title
                  + "</td>\n"
              )
              for j in range(data.shape[1]):
                  plot_id = (
                      "plot__"
                      + dataset
                      + "__"
                      + model
                      + "__"
                      + col_keys[j]
                  )
                  out += (
                      "<td onclick='document.getElementById(\"%s\").style.display = \"block\"' style='padding: 0px; padding-left: 0px; padding-right: 0px; border-left: 0px solid #999; width: 42px; min-width: 42px; height: 34px; background-color: #fff'>"
                      % plot_id
                  )
                  # out += "<div style='opacity: "+str(2*(max(1-data[i,j], data[i,j])-0.5))+"; background-color: rgb" + str(tuple(v*255 for v in colors.red_blue_solid(0. if data[i,j] < 0.5 else 1.)[:-1])) + "; height: "+str((30*max(1-data[i,j], data[i,j])))+"px; margin-left: auto; margin-right: auto; width:"+str((30*max(1-data[i,j], data[i,j])))+"px'></div>"
                  out += (
                      "<div style='opacity: "
                      + str(1)
                      + "; background-color: rgb"
                      + str(
                          tuple(
                              int(v * 255)
                              for v in colors.red_blue_no_bounds(
                                  5 * (data[i, j] - 0.8)
                              )[:-1]
                          )
                      )
                      + "; height: "
                      + str(30 * data[i, j])
                      + "px; margin-left: auto; margin-right: auto; width:"
                      + str(30 * data[i, j])
                      + "px'></div>"
                  )
                  # out += "<div style='float: left; background-color: #eee; height: 10px; width: "+str((40*(1-data[i,j])))+"px'></div>"
                  out += "</td>\n"
              out += "</tr>\n"  #
  
          out += (
              "<tr><td colspan='%d' style='background: #fff'></td></tr>"
              % (data.shape[1] + 1)
          )
      out += "</table>"
  
      out += "<div style='position: fixed; left: 0px; top: 0px; right: 0px; text-align: left; padding: 20px; text-align: right'>\n"
      out += (
          "<div style='float: left; font-weight: regular; font-size: 24px; color: #000;'>SHAP Benchmark <span style='font-size: 14px; color: #777777;'>v"
          + __version__
          + "</span></div>\n"
      )
      # select {
      #   margin: 50px;
      #   width: 150px;
      #   padding: 5px 35px 5px 5px;
      #   font-size: 16px;
      #   border: 1px solid #ccc;
      #   height: 34px;
      #   -webkit-appearance: none;
      #   -moz-appearance: none;
      #   appearance: none;
      #   background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
      # }
      # out += "<div style='display: inline-block; margin-right: 20px; font-weight: normal; text-decoration: none; font-size: 18px; color: #000;'>Dataset:</div>\n"
  
      out += "<select id='shap_benchmark__select' onchange=\"document.location = '../' + this.value + '/index.html'\"dir='rtl' class='shap_benchmark__select' style='font-weight: normal; font-size: 20px; color: #000; padding: 10px; background: #fff; border: 1px solid #fff; -webkit-appearance: none; appearance: none;'>\n"
      out += (
          "<option value='human' "
          + ("selected" if dataset == "human" else "")
          + ">Agreement with Human Intuition</option>\n"
      )
      out += (
          "<option value='corrgroups60' "
          + ("selected" if dataset == "corrgroups60" else "")
          + ">Correlated Groups 60 Dataset</option>\n"
      )
      out += (
          "<option value='independentlinear60' "
          + ("selected" if dataset == "independentlinear60" else "")
          + ">Independent Linear 60 Dataset</option>\n"
      )
      # out += "<option>CRIC</option>\n"
      out += "</select>\n"
      # out += "<script> document.onload = function() { document.getElementById('shap_benchmark__select').value = '"+dataset+"'; }</script>"
      # out += "<div style='display: inline-block; margin-left: 20px; font-weight: normal; text-decoration: none; font-size: 18px; color: #000;'>CRIC</div>\n"
      out += "</div>\n"
  
      # output the legend
      out += "<table style='border-width: 0px; width: 100px; position: fixed; right: 50px; top: 200px; background: rgba(255, 255, 255, 0.9)'>\n"
      out += "<tr><td style='background: #fff; font-weight: normal; text-align: center'>Higher score</td></tr>\n"
      legend_size = 21
      for i in range(legend_size - 9):
          out += "<tr>"
          out += "<td style='padding: 0px; padding-left: 0px; padding-right: 0px; border-left: 0px solid #999; height: 34px'>"
          val = (legend_size - i - 1) / (legend_size - 1)
          out += (
              "<div style='opacity: 1; background-color: rgb"
              + str(
                  tuple(
                      int(v * 255)
                      for v in colors.red_blue_no_bounds(
                          5 * (val - 0.8)
                      )
                  )[:-1]
              )
              + "; height: "
              + str(30 * val)
              + "px; margin-left: auto; margin-right: auto; width:"
              + str(30 * val)
              + "px'></div>"
          )
          out += "</td>"
          out += "</tr>\n"  #
      out += "<tr><td style='background: #fff; font-weight: normal; text-align: center'>Lower score</td></tr>\n"
      out += "</table>\n"
  
      if out_dir is not None:
          with open(out_dir + "/index.html", "w") as f:
              f.write(
                  "<html><body style='margin: 0px; font-size: 16px; font-family: \"Myriad Pro\", Arial, sans-serif;'><center>"
              )
              f.write(prefix)
              f.write(out)
              f.write("</center></body></html>")
      else:
          return HTML(prefix + out)
  
file_path: shap/shap/benchmark/plots.py
imports: import base64
  import io
  import os
  import numpy
  import sklearn
  from matplotlib.colors import LinearSegmentedColormap
  from ..None import __version__
  from ..plots import colors
  from .None import methods, metrics, models
  from .experiments import run_experiments
label_desc: Use image node_id 8 for calling a global function with example usage: plot_grids(dataset, model_names, out_dir) and returns: HTML