Sliders

Set the below variable values to see predictions of several response variables shown in the bar graph.
Description of the models can be found at the bottom of each page.

import {vl} from "@vega/vega-lite-api"
import { aq, op } from "@uwdata/arquero"
import {Plot} from "@mkfreeman/plot-tooltip"
import {addTooltips} from "@mkfreeman/plot-tooltip"


vg = require('vega-lite')

// references to images stored in data folder for each response variable
imageURL_invert = FileAttachment("/data/invert 2.png").url()
imageURL_peri = FileAttachment("/data/periphyton.png").url()
imageURL_gravel = FileAttachment("/data/gravel.png").url()
imageURL_parr = FileAttachment("/data/par_len.png").url()
imageURL_salmon = FileAttachment("/data/NOAA_atlantic_salmon.png").url()
//** imageURL_response = FileAttachment("/data/response_file_name.png").url() 


// function to convert all predictions that are negative to 0
function negativetozero(equation) { 
  return op.bin(equation, 0, op.greatest(equation), 0.0001)
}

Invertebrate, periphyton and juvenile salmon estimates

viewof peri = {
  const form = Inputs.range(
  [0, 0.5], // minimum and maximum values 
  {value: 0.25, //starting value
  step: (0.5)/100, //amount step by
  label: "Measured periphyton density (μg/cm²):"} //label above slider
); //below is formatting so do not alter
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%"; 
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
  
  return form;
}



// EPT
viewof EPT = {
  const form = Inputs.range(
  [0, 60], 
  {value: 30, step: 60/100, label: "Measured Ephemeroptera, Plecoptera, and Trichoptera density (g/m²):"}
);
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%";
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
  
  return form;
}

function invertbiomass(peri) { //returns predicted invert based on 
  return negativetozero(1.133+5.50*peri) //numbers here are intercept and slope
}

function peribiomass(EPT) {
  return negativetozero(0.01 + 0.08*EPT) 
}

// example adding predicitons for parr 
//** function parrbiomass(variable1) {
//**   return negativetozero(0.22 + 0.74*variable1) 
//** }

// error bar functions
function inverthigh(peri) {
  return negativetozero(1.133+0.19+(5.50+1.89)*peri)
}

function invertlow(peri) {
  return negativetozero(1.133-0.19+(5.50-1.89)*peri)
}

function perihigh(EPT) {
  return negativetozero((0.01+0.02)  + (0.08+0.02)*EPT) 
}

function perilow(EPT) {
  return negativetozero((0.01-0.02) + (0.08-0.02)*EPT) 
}

// example adding error bars for parr 
//** function parrhigh(variable1) {
//**   return negativetozero((0.22+0.003) + (0.74+0.2)*variable1) 
//** }

//** function parrlow(variable1) {
//**   return negativetozero((0.22-0.003) + (0.74-0.2)*variable1) 
//** }


// function that takes input from sliders and creates prediction of each response variable based on functions above
function myFunction(peri,
                    //** parr,
                    EPT) { 
  return aq.table({
  'peri': [peri,
           //** peri,
           peri], // repeat for each input (so if adding parr you would add the third rep of each peri and EPT
  'EPT': [EPT,
          //** EPT,
          EPT],
  //** 'variable1': [variable1, variable1, variable1],
  'response_type': ["Predicted invertebrate density (g/m²)", 
                    "Predicted periphyton density (μg/cm²)",
                    //** "Predicted parr density (g m⁻²)"
                    ],
  'response_predict': [invertbiomass(peri), // order same as response type
                      peribiomass(EPT),
                      //** parrbiomass(variable1)
                      ],
  'response_errorhigh': [inverthigh(peri), // order same as response type
                        perihigh(EPT),
                      //** parrhigh(variable1)
                        ],
  'response_errorlow': [invertlow(peri), // order same as response type
                        perilow(EPT),
                      //** parrlow(variable1)
                        ]
  })
}

// create the table
predictions_ps = myFunction(peri, 
                            EPT,
                            //** parr,
                            ) 


// create a table that stores the image paths
images = aq.table({
  'response_type': ["Predicted invertebrate density (g/m²)",
                    "Predicted periphyton density (μg/cm²)",
                    //** "Predicted parr density (g m⁻²)",
                    ],
  'image_path': [imageURL_invert, //order these to match  ordered response variables (response_type)
                  imageURL_peri
                  //** imageURL_parr,
                  ] 
})


// create the bar plot based on predictions_ps
Plot.plot({
  width: Math.max(width, 550),
  height: Math.floor(0.25 * width),
  marginLeft: 0,
  marginRight: 0,
  marginBottom: 70,
  color: {scheme: "dark2" ,
  legend: false},
  y: {domain: [0,8], axis: null},
  x: {label: null, domain: ["Predicted invertebrate density (g/m²)", 
                            "Predicted periphyton density (μg/cm²)",
                            //** "Predicted parr density (g m⁻²) "
                            ]},
  
  // create bar graph
  marks:[
    Plot.axisX({fontSize: Math.max(16, width / 80)}), 
    Plot.barY(predictions_ps,
     {x: "response_type",
     y: "response_predict",
     fill: "response_type"}), 
    
     // write out predicted value
    Plot.text(predictions_ps, {x: "response_type", y: "response_predict", text: "response_predict", dy: -7, dx: -width/8, lineAnchor: "bottom", fontSize: Math.max(16, width / 80)}), 
    
    // add error bars
    Plot.ruleX(predictions_ps, {x: "response_type", y1: 'response_errorlow', y2: 'response_errorhigh', strokeWidth: 3}) 
   ]
})

Plot.plot({
  width: Math.max(width, 550),
  height: Math.floor(0.1 * width),
  marginLeft: 0,
  marginRight: 0,
  colour: {legend: false},
  y: {domain: [0,0], axis: null},
  x: {label: "Response type", axis: null, fontSize: 22, 
      domain: ["Predicted invertebrate density (g/m²)", // match this order to above
              "Predicted periphyton density (μg/cm²)",
               //** "Predicted parr density (g m⁻²) "
               ]},
  marks:[
    Plot.image(images, 
      {x: "response_type",
      y: [0, 0, 0, 0],
      src: "image_path",
      width: 150,
      axis: null
      })
   ]
})

Desciption of models and variables:

A suite of predictor variables, measured in field, were assessed for their correlation to invertebrate and periphyton biomass, using general linear models (GLMs) compared using Akaike’s Information Criterion corrected for small sample sizes. The variables we included in the final models are represented as sliders above.

Sliders:

Periphyton density (μg cm⁻²): The density of algae, microbes, bacteria, and detritus attached to substrate.

Ephemeroptera, Plecoptera, and Trichoptera density (g m⁻²): The density of invertebrates on the families Ephemeroptera, Plecoptera, and Trichoptera.

Predicted values:

Invertebrate density (g cm⁻²): The density of all invertebrates predicted to occur based on GLMs.

Periphyton density (μg cm⁻²): The density of algae, microbes, bacteria, and detritus attached to substrate, predicted to occur based on GLMs.

Citation: …

Gravel and spawning estimates

viewof DIS_AV_CMS = {  //name slider
  const form = Inputs.range(
  [0, 300],  // put minimum values and maximum
  {value: 1, // starting value
   step: 300/1000, // amount able to step by
   label: "Discharge (m³/s):"} // label above slider
);  // below is all styling
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%";
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
    
  const label = form.querySelector("label");
  label.style.cssText += "width: 100%";

  return form;
}

// Stream width
viewof swidth = {
  const form = Inputs.range(
  [0, 100], 
  {value: 20, step: 100/100, label: "Stream width (m):"}
);
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%";
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
  
  const label = form.querySelector("label");
  label.style.cssText += "width: 100%; margin-top: 10px";

  return form;
}

// Stream gradient
viewof sgr_dk_rav = {
  const form = Inputs.range(
  [0, 50], 
  {value: 3.5, step: 50/100, label: "Stream gradient (mm/m):"}
);
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%";
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
  
  const label = form.querySelector("label");
  label.style.cssText += "width: 100%; margin-top: 10px";

  return form;
}

// Fish length
viewof fish = {
  const form = Inputs.range(
  [40, 200], 
  {value: 100, step: (200-40)/100, label: "Fish length (cm):"}
);
  form.range.style.cssText += "accent-color: #1f78b4; width: 110%";
  form.number.style.cssText += "color: #031D5E; background-color: #E4F3F7; border: 1px solid #031D5E; border-radius: 3px; text-align: right; padding: none";
  
  const label = form.querySelector("label");
  label.style.cssText += "width: 100%; margin-top: 10px";

  return form;
}

function gravelsize(DIS_AV_CMS, swidth, sgr_dk_rav) {
  return (2000 * op.pow(0.04, (3 / 5)) * op.pow((DIS_AV_CMS / swidth), (3 / 5)) * op.pow(sgr_dk_rav/1000, (7 / 10)) / (650 * 0.04)) * 1000 ;
}



// ideal fish size as exponential curve, where 16 is ideal for 0.1 m fish and 64 is ideal for 2m fish

function idealsize(fish) {
  return 109 * (op.pow(1.26, fish/100) - 1)
}

// spawning suitability that responds to fish length
function spawningprob(DIS_AV_CMS, swidth, sgr_dk_rav, fish) {
  if(16 <= gravelsize(DIS_AV_CMS, swidth, sgr_dk_rav) <=64) {
  return op.exp((-1/2) * (op.pow((gravelsize(DIS_AV_CMS, swidth, sgr_dk_rav) - idealsize(fish))/8, 2)));
  } else {
  return 0
  }
}



// function that takes input from sliders and creates prediction of each response variable based on above functions

function gravelFunction(DIS_AV_CMS, swidth, sgr_dk_rav, fish) {
  return aq.table({
  'DIS_AV_CMS': [DIS_AV_CMS, DIS_AV_CMS], // repeat for each value predicting
  'swidth': [swidth, swidth],
  'sgr_dk_rav':[sgr_dk_rav, sgr_dk_rav],
  'fish': [fish, fish],
  'response_type': ["Predicted gravel size (D50; mm)", 
                    "Suitability of predicted gravel size for \nspawning by salmon of given length" //not sure what this variable will be yet
                    ], // ordered alphabetically
                      
  'response_predict': [gravelsize(DIS_AV_CMS, swidth, sgr_dk_rav),
                        spawningprob(DIS_AV_CMS, swidth, sgr_dk_rav, fish)*2000
                      ],
  'response_predict_label': [gravelsize(DIS_AV_CMS, swidth, sgr_dk_rav),
                        spawningprob(DIS_AV_CMS, swidth, sgr_dk_rav, fish)
                      ]
  })
}

// create the table
predictions_gravel = gravelFunction(DIS_AV_CMS, swidth, sgr_dk_rav, fish)

// create a tables that stores the image paths
image_gravel = aq.table({ //split gravel and salmon so I could specify the image sizes better
  'response_type': ["Gravel size D50 (m)"
                    ], 
  'image_path': [imageURL_gravel
                  ] 
})

image_salmon = aq.table({ 
  'response_type': ["Probability salmon spawn in predicted gravel size",
                    ],
  'image_path': [imageURL_salmon
                  ] 
})

// create the bar plot based on predictions_ps
Plot.plot({
  width: Math.max(width, 550),
  height: Math.floor(0.45 * width),
  marginLeft: 0,
  marginRight: 0,
  marginBottom: 70,
  color: {scheme: "dark2" ,
  legend: false},
  y: {domain: [0, 2100], label: null},
  x: {label: null},
  marks:[
    Plot.axisX({fontSize: Math.max(16, width / 60), marginBottom: 40}),
    Plot.barY(predictions_gravel,
     {x: "response_type",
     y: "response_predict",
     fill: "response_type"}), // create bar graph
    Plot.text(predictions_gravel, {x: "response_type", y: "response_predict", text: "response_predict_label", dy: -7, dx: -width/8, lineAnchor: "bottom", fontSize: Math.max(16, width / 60)}) // write out predicted value
   ]
})

Plot.plot({
  width: Math.max(width, 550),
  height: Math.floor(0.1 * width),
  marginTop: 20,
  marginLeft: 0,
  marginRight: 0,
  colour: {legend: false},
  y: {domain: [0,0], axis: null},
  x: {label: "Response type", axis: null, fontSize: 22},
  marks:[
    Plot.image(image_gravel, 
      {x: "response_type",
      y: [0, 0],
      src: "image_path",
      width: width/8,
      axis: null
      }),
    Plot.image(image_salmon, 
      {x: "response_type",
      y: [0, 0],
      src: "image_path",
      width: 200,
      axis: null
      })
   ]
})

Desciption of models and variables:

Gravel size is important to the Atlantic Salmon spawning; too fine or too coarse, and the salmon will either not spawn or have poor egg survival (Purchase 2018).

D50 Gravel size: was predicted based on the following calculations (Wilkins & Snyder 2011)

D50 = 𝛕_b / (𝛒_s - 𝛒) * g * 𝛕^*

Parameters:
𝛕_b = 𝛒 * g * n^3/5 * [Q/W]^3/5 * S^7/10
𝛒 = density of water = 1000 kg/m³
g = acceleration by gravity = 9.80665 m/s²
n = channel roughness coefficient = n = 0.04 as estimate for gravel bed rivers from Barnes 1967
𝛒_s = sediment density = 2650 kg/m^3
* = Shields parameter = 0.04 to follow Wilkins & Snyder 2011

Variables to retreive from HydroSHEDs:
S = channel gradient, Calculated as the ratio between the elevation drop within the river reach (i.e. the difference between min. and max. elevation along the reach) and the length of the reach.
Q = Discharge (m³/s), Average long-term discharge estimate for river reach, in cubic meters per second.
W = channel width (m), Calculated as the surface river area of the river reach segment divided by length of the river reach segment.


Spawning suitability: in predicted gravel size for fish of chosen length (m) calculated using the following equation:

Suitability = e^{((-1/2) * ((D50 - ideal.fish.gravel)/8)2)}

Ideal.fish.gravel = 109 * (1.26^fish.length - 1)

This equation associates a higher probability of spawning in larger gravel for longer fish, and a higher probability of spawning in smaller gravel for smaller fish.
Assumes the ideal spawning gravel for a fish of 2m is 64 mm, for a fish of 1 m is 32 mm, for a fish of 0 m is 16 mm etc, with a bell shaped distribution of suitability around the ideal gravel size with a standard deviation of 8. If D50 is lower than 16 or higher than 64, the suitability is 0.

Citations:

Barnes, H. 1967. Roughness Characteristics of Natural Channels. United States Geological Survey: Publications.
Linke, S., Lehner, B., Ouellet Dallaire, C., Ariwi, J., Grill, G., Anand, M., Beames, P., Burchard-Levine, V., Maxwell, S., Moidu, H., Tan, F., Thieme, M. (2019). Global hydro-environmental sub-basin and river reach characteristics at high spatial resolution. Scientific Data 6: 283. doi: https://doi.org/10.1038/s41597-019-0300-6
Lehner, B., Messager, M.L., Korver, M.C., Linke, S. (2022). Global hydro-environmental lake characteristics at high spatial resolution. Scientific Data 9: 351. doi: https://doi.org/10.1038/s41597-022-01425-z
Purchase, C. (2018). A systematic review on the effectiveness of salmonid spawning habitat improvements, and recommendations to potentially increase productivity of depressed Newfoundland Atlantic salmon (Salmo salar) populations.
Wilkins, and Snyder. 2011. Geomorphic comparison of two Atlantic coastal rivers: Toward an understanding of physical controls on Atlantic salmon habitat. River Research and Applications.