Issue Time

Similar to Lead Time case of streamflow forecasts, one may be interested in historical streamflow forecasts that are issued at different times. This analysis can help understand how streamflow forecast performance was in the past using different hydrologic models and rainfall products.

As shown in animation below, user can examine the hydrologic model predictions with respect to streamflow forecast issue times using HydroVisE.

The config file for this example is provided below:

{
  "page":{
    "title": "HydroVisE - Hydrologic Forecast Visualization Issue Time"
  },
  "data_part": {
    "min_val": 2016,
    "max_val": 2018,
    "step": 1,
    "initial": 2016
  },
  "traces": {
    "t1": {
      "prod": "Q",
      "x_name": "dt",
      "y_name": "Q",
      "modEnabled": 1,
      "dynamic": 0,
      "ensemble": 0,
      "template": {
        "var": [
          "comID",
          "yr"
        ],
        "path_format": "./services/read_usgs.php?sid={0}&yr={1}&par=00060"
      },
      "style": {
        "type": "scattergl",
        "mode": "lines",
        "name": "USGS",
        "line": {
          "width": 2,
          "color": "black"
        }
      }
    },
    "t2": {
      "prod": "nwm_mrms",
      "x_name": "dt",
      "y_name": "Q",
      "modEnabled": 1,
      "dynamic": 1,
      "ensemble": 0,
      "template": {
         "var": [
           "yr",
           "sliderState",
           "comID"
         ],
        "path_format": "../services/read_tar.php?fn=/noaa_nws/issue_time/{0}_nwm_mrms/{1}/{2}.csv",
        "argConv": {
          "var": "sliderState",
          "arguments": "v",
          "body": "return String(moment.unix(v).format('YYYYMMDD_HH'));"
        }
      },
      "style": {
        "type": "scattergl",
        "mode": "lines",
        "name": "NWM(MRMS)",
        "line": {
          "color": "#004c00"
        }
      }
    },
    "t3": {
      "prod": "nwm_ifc",
      "x_name": "dt",
      "y_name": "Q",
      "modEnabled": 1,
      "dynamic": 1,
      "ensemble": 0,
      "template": {
        "var": [
          "yr",
          "sliderState",
          "comID"
        ],
        "path_format": "../services/read_tar.php?fn=/noaa_nws/issue_time/{0}_nwm_ifc/{1}/{2}.csv",
        "argConv": {
          "var": "sliderState",
          "arguments": "v",
          "body": "return String(moment.unix(v).format('YYYYMMDD_HH'));"
        }
      },
      "style": {
        "type": "scattergl",
        "mode": "lines",
        "name": "NWM(IFC)",
        "line": {
          "color": "#009900"
        }
      }
    },
    "t4": {
      "prod": "hlm_mrms",
      "x_name": "dt",
      "y_name": "Q",
      "dynamic": 1,
      "ensemble": 0,
      "modEnabled": 1,
      "template": {
            "var": [
              "yr",
              "sliderState",
              "comID"
            ],
            "path_format": "../services/read_tar.php?fn=/noaa_nws/issue_time/{0}_hlm_mrms/{1}/{2}.csv",
            "argConv": {
              "var": "sliderState",
              "arguments": "v",
              "body": "return String(moment.unix(v).format('YYYYMMDD_HH'));"
            }
      },
      "style": {
        "type": "scattergl",
        "mode": "lines",
        "name": "HLM(MRMS)",
        "line": {
          "color": "#000066"
        }
      }
    },

    "t5": {
      "prod": "hlm_ifc",
      "x_name": "dt",
      "y_name": "Q",
      "modEnabled": 1,
      "dynamic": 1,
      "ensemble": 0,
      "template": {
         "var": [
           "yr",
           "sliderState",
           "comID"
         ],
        "path_format": "../services/read_tar.php?fn=/noaa_nws/issue_time/{0}_hlm_ifc/{1}/{2}.csv",
        "argConv": {
          "var": "sliderState",
          "arguments": "v",
          "body": "return String(moment.unix(v).format('YYYYMMDD_HH'));"
        }
      },
      "style": {
        "type": "scattergl",
        "mode": "lines",
        "name": "HLM(IFC)",
        "line": {
          "color": "#0000b2"
        }
      }
    }
  },
  "modTrace": {
    "modJS": "./applications/plugin/modQ2S.js",
    "modMethod": "Q2Stage",
    "modEvnt": "evntQ2Stage",
    "default": "flw",
    "mod": {
      "default": {
        "button": "Discharge",
        "pltPath": "yaxis.title",
        "val": "Q (m3/s)"
      },
      "derived": {
        "button": "Stage",
        "pltPath": "yaxis.title",
        "val": "Stage (ft)"
      }
    }
  },
  "timeSlider": {
    "dynamicRange": {
        "arguments": "v",
        "body": "return parseInt(moment(v.format(systemState.yr)).format('X'))"
    },
    "min": "{0}-04-01 00:00:00 GMT",
    "max": "{0}-12-01 00:00:00 GMT",
    "step": 3600,
    "value": 1,
    "label": {
      "arguments": "v",
      "body": "return 'Issue time:' + String(moment.unix(v).format('YYYY-MM-DD HH'))"
    }
  },
  "horizontalGrid": {
    "filename": "./data/sig_stage_flow_usgs.csv",
    "comID": "usgs_id",
    "unit_convert": 0.0283168,
    "style": {
      "type": "line",
      "xref": "paper",
      "x0": 0,
      "x1": 1,
      "yref": "y",
      "y0": 0,
      "y1": 0,
      "line": {
        "color": "gray",
        "width": 0.75
      }
    },
    "lines": {
      "flw_action": {
        "color": "#ffff00"
      },
      "flw_flood": {
        "color": "#f89500"
      },
      "flw_moderate": {
        "color": "#ff0000"
      },
      "flw_major": {
        "color": "#d836ff"
      }
    }
  },
  "mapMarkers": {
    "fnPath": "lid_usgs.geojson.gz",
    "comIDName": "usgs_id",
    "geomType":"point",
    "disabled_markerAttrs": {
      "template": {
        "var": [],
        "path_format": "./data/metrics.csv"
      },
      "comID": "USGS_ID"
    },
    "onEachFeature":{
      "click": "clickFeature"
    },
    "plotTitle": {
      "template": {
        "var": ["usgs_name","area"],
        "format": "{0}<br>Area: {1} km<sup>2</sup>"
      }
    },
    "tooltip": {
      "template": {
        "var": [
          "usgs_id",
          "area"
        ],
        "format": "USGS id: {0}<br>Area:{1} km<sup>2</sup>"
      },
      "format": "",
      "propertires": [
        "usgs_id",
        "area",
        "metric"
      ]
    },
    "additionalShapes":{
      "template": {
        "var": ["comID"],
        "format": "./services/get_boundary.php?id={0}"
      }
    }
  },
  "controls": {
    "markerAttrs": {
      "v1": {
        "var_id": "kge",
        "var_name": "KGE",
        "onEvent": "selectMetric",
        "selected": 1
      },
      "v3": {
        "var_id": "cc",
        "var_name": "Correlation",
        "onEvent": "selectMetric",
        "selected": 0
      },
      "v4": {
        "var_id": "nrmse",
        "var_name": "nRMSE",
        "onEvent": "selectMetric",
        "selected": 0
      },
      "v5": {
        "var_id": "mae",
        "var_name": "nMAE",
        "onEvent": "selectMetric",
        "selected": 0
      }
    },
    "prod": {
      "v1": {
        "var_id": "ifc_hlm",
        "var_name": "IFC (HLM)",
        "onEvent": "select_sim_type",
        "selected": 1
      },
      "v2": {
        "var_id": "ifc_nwm",
        "var_name": "IFC (NWM)",
        "onEvent": "select_sim_type",
        "selected": 0
      },
      "v3": {
        "var_id": "mrms_hlm",
        "var_name": "MRMS (HLM)",
        "onEvent": "select_sim_type",
        "selected": 0
      },
      "v4": {
        "var_id": "mrms_nwm",
        "var_name": "MRMS (NWM)",
        "onEvent": "select_sim_type",
        "selected": 0
      }
    },
    "baseMapType": {
      "v1": {
        "var_id": "light_all",
        "var_name": "Light",
        "onEvent": "basemap_changer",
        "selected": 1
      },
      "v2": {
        "var_id": "Dark",
        "var_name": "Dark",
        "onEvent": "basemap_changer",
        "selected": 0
      },
      "v3": {
        "var_id": "Esri Imagery",
        "var_name": "Esri Imagery",
        "onEvent": "basemap_changer",
        "selected": 0
      },
      "v4": {
        "var_id": "Toner",
        "var_name": "Toner",
        "onEvent": "basemap_changer",
        "selected": 0
      }
    }
  },
  "plotlyLayout": {
    "margin": {
      "l": 80,
      "r": 80,
      "b": 70,
      "t": 50,
      "pad": 1
    },
    "titlefont": {
      "size": 16,
      "color": "black"
    },
    "legend": {
      "x": 0,
      "y": 1,
      "traceorder": "normal",
      "font": {
        "size": 14,
        "color": "#000"
      },
      "bgcolor": "rgba(255,255,255,0.90)",
      "bordercolor": "#000000",
      "borderwidth": 1,
      "orientation": "h"
    },
    "xaxis": {
      "titlefont": {
        "size": 18,
        "color": "#1c1c1c"
      },
      "tickfont": {
        "size": 18,
        "color": "black"
      },
      "type": "date"
    },
    "yaxis": {
      "title": "Q (m3/s)",
      "titlefont": {
        "size": 18,
        "color": "#1c1c1c"
      },
      "tickfont": {
        "size": 18,
        "color": "black"
      },
      "autorange": true,
      "rangemode": "tozero",
      "hoverformat": ".1f"
    },
    "plot_bgcolor": "#fff",
    "paper_bgcolor": "#eee",
    "hovermode": "closest",
    "updatemenus": [
      {
        "buttons": [],
        "direction": "left",
        "pad": {
          "r": 10,
          "t": 10
        },
        "showactive": true,
        "type": "buttons",
        "x": 0,
        "xanchor": "left",
        "y": 1.15,
        "yanchor": "top"
      }
    ],
    "initMD": "-04-01 00:00:00",
    "finalMD": "-12-01 00:00:00"
  },
  "mapLayers": {
    "ifc_rvr.geojson": {
      "fnPath": "data/staticLayers/kmls/ifc_rvr.geojson.gz",
      "fn": "ifc_rvr.geojson",
      "var_name": "IFC Bridge Sensor",
      "onEvent": "toggLyrStd",
      "selected": false
    },
    "eqd_nexrad.kmz": {
      "fnPath": "data/staticLayers/kmls/eqd_nexrad.kmz",
      "fn": "eqd_nexrad.kmz",
      "var_name": "Thiessen Polygon",
      "onEvent": "toggLyrStd",
      "selected": false
    },
    "nexrad_150_wgs84.kmz": {
      "fnPath": "data/staticLayers/kmls/nexrad_150_wgs84.kmz",
      "fn": "nexrad_150_wgs84.kmz",
      "var_name": "NEXRAD 150 km",
      "onEvent": "toggLyrStd",
      "selected": false
    },
    "nexrad230km.kmz": {
      "fnPath": "data/staticLayers/kmls/nexrad230km.kmz",
      "fn": "nexrad230km.kmz",
      "var_name": "NEXRAD 230 km",
      "onEvent": "toggLyrStd",
      "selected": false
    },
    "wt_area.kmz": {
      "fnPath": "data/staticLayers/kmls/wt_area.kmz",
      "fn": "wt_area.kmz",
      "var_name": "Wind Farms",
      "onEvent": "toggLyrStd",
      "selected": false
    },    
    "IACounties.geojson": {
      "fnPath": "data/staticLayers/kmls/IACounties.geojson.gz",
      "fn": "IACounties.geojson",
      "var_name": "IA Counties",
      "onEvent": "toggLyrStd",
      "selected": false
    }
  },
  "map": {
    "center": [
      41.9472,
      -93.5403
    ],
    "defaultZoom": 8,
    "maxZoom": 15,
    "basemapList": {
      "default": {
        "id": "light_all",
        "url": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
        "attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, &copy; <a href=\"https://carto.com/attributions\">CARTO</a>",
        "subdomains": "abcd"
      }
    }
  },
  "customBaseMap": {
    "url": "data/staticLayers/kmls/ifc_net3_simp.geojson.gz",
    "colors": {
      "3": "#00e4ff",
      "4": "#00c5ff",
      "5": "#00acff",
      "6": "#018eff",
      "7": "#007dff",
      "8": "#007bff",
      "9": "#0055ff",
      "10": "#000000",
      "11": "#321321"
    },
    "name" : "River Network",
    "propoertyName": "h_order"
  },
  "twoDTimeseries": {
    "smap": {
      "timestamps": {
        "fPath": "data/2dData/timestamps/SMAPL3v2.json",
        "extension": "json"
      },
      "fPath": "data/2dData/SMAPL3v2",
      "extension": "geotiff"
    }
  }
}