plotErrorLines()

in code/bias-variance/js/ErrorBar.js [106:205]


  plotErrorLines(xVal, yVal) {
    // resolve yVal
    const noise = `noise_${yVal}`;
    const error = `error_${yVal}`;
    const bias = `bias_${yVal}`;
    const variance = `var_${yVal}`;
    const errorT = transition().delay(200).duration(1500);

    // update y-axis depending on y-value
    if (yVal === "final" || yVal == "point") {
      this.yScaleError.domain([-0.05, 1.3]);
      this.yAxisGroup
        .transition()
        .style("opacity", 1)
        .call(axisLeft(this.yScaleError).tickSizeOuter(0).ticks(0));
    } else {
      this.yScaleError.domain([-0.05, 0.8]);
      this.yAxisGroup
        .transition()
        .style("opacity", 1)
        .call(axisLeft(this.yScaleError).tickSizeOuter(0).ticks(4));
    }

    // define line generators
    const noiseLine = line()
      .x((d) => this.xScaleError(+d[xVal]))
      .y((d) => this.yScaleError(+d[noise]))
      .curve(curveCatmullRom.alpha(0.8));

    const errorLine = line()
      .x((d) => this.xScaleError(+d[xVal]))
      .y((d) => this.yScaleError(+d[error]))
      .curve(curveCatmullRom.alpha(0.8));

    const biasLine = line()
      .x((d) => this.xScaleError(+d[xVal]))
      .y((d) => this.yScaleError(+d[bias]))
      .curve(curveCatmullRom.alpha(0.8));

    const varLine = line()
      .x((d) => this.xScaleError(+d[xVal]))
      .y((d) => this.yScaleError(+d[variance]))
      .curve(curveCatmullRom.alpha(0.8));

    // draw noise data
    this.noiseLine = this.svg
      .selectAll("#noise-line")
      .data([errorData], (d) => +d[xVal]);

    this.noiseLine
      .enter()
      .append("path")
      .attr("id", "noise-line")
      .merge(this.noiseLine)
      .attr("class", "error-line-bottom")
      .transition(errorT)
      .attr("d", noiseLine);

    // draw error data
    this.errorLine = this.svg
      .selectAll("#error-line")
      .data([errorData], (d) => +d[xVal]);

    this.errorLine
      .enter()
      .append("path")
      .attr("id", "error-line")
      .merge(this.errorLine)
      .attr("class", "error-line-bottom")
      .transition(errorT)
      .attr("d", errorLine);

    // draw bias data
    this.biasLine = this.svg
      .selectAll("#bias-line")
      .data([errorData], (d) => +d[xVal]);

    this.biasLine
      .enter()
      .append("path")
      .attr("id", "bias-line")
      .merge(this.biasLine)
      .attr("class", "error-line-bottom")
      .transition(errorT)
      .attr("d", biasLine);

    // draw var data
    this.varLine = this.svg
      .selectAll("#var-line")
      .data([errorData], (d) => +d[xVal]);

    this.varLine
      .enter()
      .append("path")
      .attr("id", "var-line")
      .merge(this.varLine)
      .attr("class", "error-line-bottom")
      .transition(errorT)
      .attr("d", varLine);
  }