drawDoubleDescentLines()

in code/double-descent/js/DoubleDescent.js [633:749]

• 79 lines of code
• 1 McCabe index (conditional complexity)

  drawDoubleDescentLines() {
    // init line generator
    this.lineGenTrain = line()
      .x((d) => this.xScale(d.x))
      .y((d) => this.yScale(d[`y_train`]))
      .curve(curveCatmullRom.alpha(0.8));

    this.trainLineOutline = this.ddG
      .append("path")
      .attr("class", "dd-line-outline")
      .attr("id", `dd-line-train-outline`)
      .attr("d", this.lineGenTrain(ddTrainTest))
      .call((d) => pathTransition(d, 0, 0));

    this.trainLine = this.ddG
      .append("path")
      .attr("class", "dd-line")
      .attr("id", `dd-line-train`)
      .attr("d", this.lineGenTrain(ddTrainTest))
      .call((d) => pathTransition(d, 0, 0));

    // init line generator
    this.lineGenTest = line()
      .x((d) => this.xScale(d.x))
      .y((d) => this.yScale(d[`y_test`]))
      .curve(curveCatmullRom.alpha(0.8));

    // draw line for given stage
    this.testLineOutline = this.ddG
      .append("path")
      .attr("class", "dd-line-outline")
      .attr("id", `dd-line-test-outline`)
      .attr("d", this.lineGenTest(ddTrainTest))
      .call((d) => pathTransition(d, 0, 0));

    this.testLine = this.ddG
      .append("path")
      .attr("class", "dd-line")
      .attr("id", `dd-line-test`)
      .attr("d", this.lineGenTest(ddTrainTest))
      .call((d) => pathTransition(d, 0, 0));

    // const interpolationGradient = this.svg
    //   .append("defs")
    //   .append("linearGradient")
    //   .attr("id", "interpolationGradient")
    //   .attr("x1", "0%")
    //   .attr("y1", "100%")
    //   .attr("x2", "0%")
    //   .attr("y2", "0%");

    // interpolationGradient
    //   .append("stop")
    //   .attr("offset", "0%")
    //   .attr("stop-color", "#0f151b")
    //   .attr("stop-opacity", 0.76);
    // interpolationGradient
    //   .append("stop")
    //   .attr("offset", "100%")
    //   .attr("stop-color", "#232f3e")
    //   .attr("stop-opacity", 0);

    const bgGradient = this.svg
      .append("defs")
      .append("linearGradient")
      .attr("id", "bgGradient")
      .attr("x1", "0%")
      .attr("y1", "100%")
      .attr("x2", "0%")
      .attr("y2", "40%");

    bgGradient
      .append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "rgba(3, 117, 117, .25)")
      .attr("stop-opacity", 0.76);
    bgGradient
      .append("stop")
      .attr("offset", "90%")
      .attr("stop-color", "#232f3e")
      .attr("stop-opacity", 0);

    // make rect for bg gradient
    this.bgRect = this.ddG
      .append("rect")
      .attr("id", "rect-bg")
      .attr("x", this.xScale(this.plotXMin))
      .attr("y", this.yScale(23))
      .attr("width", this.WIDTH)
      .attr("height", this.yScale(0))
      .style("fill", "url(#bgGradient)");

    // add rects after so overlap
    this.rectOver = this.ddG
      .append("rect")
      .attr("id", "rect-interpolate")
      .attr("x", this.xScale(19))
      .attr("y", this.yScale(23))
      .attr("width", this.WIDTH - this.xScale(19))
      .attr("height", this.yScale(0) + 10)
      .attr("fill", "#232f3e")
      .attr("fill-opacity", 0);

    this.rectUnder = this.ddG
      .append("rect")
      .attr("id", "rect-interpolate")
      .attr("x", this.xScale(this.plotXMin))
      .attr("y", this.yScale(23))
      .attr("width", this.xScale(19))
      .attr("height", this.yScale(0) + 10)
      .attr("fill", "#232f3e")
      .attr("fill-opacity", 0);

    // this.rectOver.lower();
    // this.rectUnder.lower();
    this.bgRect.lower();
  }