drawAxes()

in code/double-descent/js/DoubleDescent.js [157:321]

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

  drawAxes() {
    // define scales
    this.xScale = scaleLinear()
      .domain([this.plotXMin, 30])
      .range([0, this.WIDTH]);
    this.yScale = scaleLinear().domain([0, 23]).range([this.HEIGHT, 0]);

    // // draw x-axis
    this.xAxis = this.ddG
      .append("g")
      .attr("class", "axis")
      .attr("id", "dd-x-axis")
      .attr("transform", `translate(0, ${this.HEIGHT})`)
      .attr("vector-effect", "non-scaling-stroke");

    this.xAxis.call(axisBottom(this.xScale).tickSizeOuter(0).ticks(4));

    // draw y-axis
    this.yAxis = this.ddG
      .append("g")
      .attr("class", "axis")
      .attr("id", "dd-y-axis");

    this.yAxis.call(
      axisLeft(this.yScale)
        .tickSizeOuter(0)
        .ticks(4)
        .tickFormat((d, i) => ["0%", "20%", "40%", "60%", "80%"][i])
    );

    // make tick longer for y-axis
    select("#dd-y-axis").selectAll("line").attr("x2", this.WIDTH);

    // add labels to axes
    this.svg
      .append("text")
      .attr("class", "dd-axis-text")
      .attr("id", "dd-x-axis-text")
      .attr("x", (this.WIDTH + this.MARGIN.LEFT + this.MARGIN.RIGHT) / 2)
      .attr("y", this.HEIGHT + this.MARGIN.TOP + this.MARGIN.BOTTOM / 1.2)
      .text("Measure of Model Complexity")
      .attr("text-anchor", "middle");
    // this.svg
    //   .append("text")
    //   .attr("class", "dd-axis-text")
    //   .attr("id", "dd-y-axis-text")
    //   .attr("y", this.MARGIN.LEFT / 2)
    //   .attr("x", -(this.HEIGHT / 2 + this.MARGIN.TOP))
    //   .attr("dy", ".05em")
    //   .attr("transform", "rotate(-90)")
    //   .attr("text-anchor", "middle")
    //   .text("Prediction Error");

    // add arrow for x-axis
    this.svg
      .append("defs")
      .append("marker")
      .attr("id", "arrowhead-right")
      .attr("refX", 5)
      .attr("refY", 4.7)
      .attr("markerWidth", 16)
      .attr("markerHeight", 13)
      .append("path")
      .attr("d", "M 0 0 L 5 5 L 0 10")
      .attr("stroke", "#a6a6a6")
      .attr("stroke-width", 2)
      .attr("fill", "none")
      .style("opacity", 0.6);

    // add arrow to x-axis
    this.svg
      .select("#dd-x-axis path.domain")
      .attr("marker-end", "url(#arrowhead-right)");

    // add arrow for y-axis
    this.svg
      .append("defs")
      .append("marker")
      .attr("id", "arrowhead-up")
      .attr("refX", 5)
      .attr("refY", 10)
      .attr("markerWidth", 16)
      .attr("markerHeight", 23)
      .append("path")
      .attr("d", "M 10 10 L 5 5 L 0 10")
      .attr("stroke", "#a6a6a6")
      .attr("stroke-width", 2)
      .attr("fill", "none")
      .style("opacity", 0.6);

    this.svg
      .select("#dd-y-axis path.domain")
      .attr("marker-end", "url(#arrowhead-up)");

    this.lineSeparator = this.ddG
      .append("line")
      .attr("id", "line-separator")
      .attr("stroke", "white")
      .style("stroke-width", 4)
      .style("pointer-events", "none")
      .style("stroke-dasharray", 5)
      .attr("vector-effect", "non-scaling-stroke")
      .attr("x1", this.xScale(19))
      .attr("y1", this.yScale(0))
      .attr("x2", this.xScale(19))
      .attr("y2", this.yScale(0));

    // // add circles
    // this.ddG
    //   .selectAll("circle.test")
    //   .data(ddTrainTest)
    //   .join("circle")
    //   .attr("r", 5)
    //   .attr("class", "test")
    //   .attr("cx", (d) => this.xScale(d.x))
    //   .attr("cy", (d) => this.yScale(d.y_test))
    //   .attr("fill", "teal");
    // this.ddG
    //   .selectAll("circle.train")
    //   .data(ddTrainTest)
    //   .join("circle")
    //   .attr("r", 9)
    //   .attr("class", "train")
    //   .attr("cx", (d) => this.xScale(d.x))
    //   .attr("cy", (d) => this.yScale(d.y_train))
    //   .attr("fill", "coral")
    //   .attr("opacity", 0.5);

    // // texts
    // this.ddG
    //   .append("text")
    //   .attr("class", "dd-annotation-text")
    //   .attr("id", "text-classic-regime")
    //   .attr("x", this.xScale(10))
    //   .attr("y", this.yScale(0))
    //   .attr("text-anchor", "middle")
    //   .text("Classical Regime");
    this.interpolationText = this.ddG
      .append("text")
      .attr("class", "dd-annotation-text")
      .attr("id", "text-interpolation-threshold");

    this.interpolationText
      .attr("x", this.xScale(19))
      .attr("y", this.yScale(22.9))
      .attr("text-anchor", "middle")
      .text("Interpolation")
      .append("tspan")
      .text("Threshold")
      // .style('font-size', '.1rem')
      .attr("x", this.xScale(19))
      .attr("dy", "1.1em");
    this.interpolationText.attr("opacity", 0);
    // // texts
    // this.ddG
    //   .append("text")
    //   .attr("class", "dd-annotation-text")
    //   .attr("id", "text-interpolation-regime")
    //   .attr("x", this.xScale(25))
    //   .attr("y", this.yScale(0))
    //   .attr("text-anchor", "middle")
    //   .text("Interpolation Regime");

    selectAll(".dd-annotation-text").raise();
  }