drawAxes()

in code/double-descent/js/origDoubleDescent.js [132:229]

• 87 lines of code
• 4 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));

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

    // add labels to axes
    this.textSvg
      .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 / 2)
      .text("Model Complexity")
      .attr("text-anchor", "middle");
    this.textSvg
      .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("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");
  }