drawFigure()

in code/double-descent2/js/DeltaChart.js [80:210]

• 113 lines of code
• 5 McCabe index (conditional complexity)

  drawFigure() {
    // add circles
    this.deltaPlot
      .selectAll("circle.delta-circle")
      .data(this.circleData)
      .enter()
      .append("circle")
      .attr("class", "delta-circle")
      .attr("r", 3.5)
      .attr("cx", (d) => this.xScale(d.x))
      .attr("cy", (d) => this.yScale(d.y));

    // draw lines
    this.deltaPlot
      .append("line")
      .attr("class", "delta-line")
      .attr("x1", this.xScale(this.circleData[0].x))
      .attr("y1", this.yScale(this.circleData[0].y))
      .attr("x2", this.xScale(this.circleData[1].x))
      .attr("y2", this.yScale(this.circleData[1].y));

    this.deltaPlot
      .append("line")
      .attr("class", "delta-line")
      .attr("x1", this.xScale(this.circleData[1].x))
      .attr("y1", this.yScale(this.circleData[1].y))
      .attr("x2", this.xScale(this.circleData[2].x))
      .attr("y2", this.yScale(this.circleData[2].y));

    // delta line
    this.deltaPlot
      .append("line")
      .attr("class", "delta-line")
      .attr("x1", this.xScale(this.deltaData[0].x))
      .attr("y1", this.yScale(this.deltaData[0].y))
      .attr("x2", this.xScale(this.deltaData[1].x))
      .attr("y2", this.yScale(this.deltaData[1].y));

    // delta circles
    this.deltaPlot
      .selectAll("rect.delta2-rect")
      .data(this.deltaData)
      .enter()
      .append("rect")
      .attr("class", "delta2-rect")
      .attr("width", 1)
      .attr("height", 8)
      .attr("x", (d) => this.xScale(d.x))
      .attr("y", (d) => this.yScale(d.y) - 4);

    // delta rects
    this.deltaPlot
      .selectAll("rect.delta3-rect")
      .data(this.deltaLabelData)
      .enter()
      .append("rect")
      .attr("class", "delta3-rect")
      .attr("width", 1)
      .attr("height", 8)
      .attr("x", (d) => this.xScale(d.x))
      .attr("y", (d) => this.yScale(d.y) - 4);

    // add text
    this.deltaPlot
      .selectAll(".axis-text")
      .data(this.circleData, (d) => d.x)
      .enter()
      .append("text")
      .attr("class", "axis-text")
      .attr("x", (d) => this.xScale(d.x))
      .attr("y", this.innerHeight + 15)
      .attr("dx", 2)
      .attr("text-anchor", "middle")
      .html("t")
      .style("font-size", "1rem")
      .append("tspan")
      .text((d, i) => {
        if (i == 0) {
          return "i-1";
        } else if (i == 2) {
          return "i+1";
        } else {
          return "i";
        }
      })
      .style("font-size", ".6rem");

    // draw delta annotation
    this.deltaPlot
      .selectAll(".axis-text2")
      .data(this.deltaLabelData, (d) => d.x)
      .enter()
      .append("text")
      .attr("class", "axis-text2")
      .attr("x", (d) => this.xScale(d.x))
      .attr("y", (d) => this.yScale(d.y))
      .attr("dx", 0)
      .attr("dy", -8)
      .attr("text-anchor", "middle")
      .html("δ")
      .style("font-size", "1rem")
      .append("tspan")
      .text((d, i) => (i == 0 ? "i" : "i+1"))
      .style("font-size", ".6rem");

    // draw Delta annotations
    this.deltaPlot
      .append("text")
      .attr("x", (d) => this.xScale(2.5))
      .attr("y", (d) => this.yScale(this.deltaData[0].y))
      .attr("dx", 0)
      .attr("dy", -8)
      .attr("text-anchor", "middle")
      .html("Δ")
      .style("font-size", "1rem")
      .append("tspan")
      .text((d, i) => (i == 0 ? "i" : "i+1"))
      .style("font-size", ".8rem");

    // draw vertical lines
    this.deltaPlot
      .selectAll(".interpretation-vertical-line")
      .data(this.circleData)
      .enter()
      .append("line")
      .attr("class", "interpretation-vertical-line")
      .attr("x1", (d) => this.xScale(d.x))
      .attr("y1", (d) => this.yScale(0))
      .attr("x2", (d) => this.xScale(d.x))
      .attr("y2", (d) => this.yScale(d.y));
  }