plotComplexCircleAll()

in code/bias-variance/js/ErrorBar.js [238:322]

• 70 lines of code
• 9 McCabe index (conditional complexity)

  plotComplexCircleAll() {
    // add a circle to each complex point
    // first, gcreate array for desired circles
    // const circlesData = errorData.filter((d) => d.x !== 0.503);
    // console.log("circleData", circlesData);

    const noise = `noise_final`;
    const error = `error_final`;
    const bias = `bias_final`;
    const variance = `var_final`;

    // noise
    this.svg
      .selectAll("circle.complexity")
      .data(errorData)
      .enter()
      .append("circle")
      .attr("class", "complexity")
      .attr("class", (d) => `complex-noise`)
      .style("stroke-width", 2)
      .attr("stroke", "white")
      .attr("cx", (d) => this.xScaleError(+d.x))
      .attr("cy", (d) => this.yScaleError(+d[noise]))
      .attr("r", 0)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 9.5 : 12)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 5 : 8);

    // error
    this.svg
      .selectAll("circle.complexity")
      .data(errorData)
      .enter()
      .append("circle")
      .attr("class", "complexity")
      .attr("class", (d) => `complex-error`)
      .style("stroke-width", 2)
      .attr("stroke", "white")
      .attr("cx", (d) => this.xScaleError(+d.x))
      .attr("cy", (d) => this.yScaleError(+d[error]))
      .attr("r", 0)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 9.5 : 12)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 5 : 8);

    // bias
    this.svg
      .selectAll("circle.complexity")
      .data(errorData)
      .enter()
      .append("circle")
      .attr("class", "complexity")
      .attr("class", (d) => `complex-bias`)
      .style("stroke-width", 2)
      .attr("stroke", "white")
      .attr("cx", (d) => this.xScaleError(+d.x))
      .attr("cy", (d) => this.yScaleError(+d[bias]))
      .attr("r", 0)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 9.5 : 12)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 5 : 8);

    // var
    this.svg
      .selectAll("circle.complexity")
      .data(errorData)
      .enter()
      .append("circle")
      .attr("class", "complexity")
      .attr("class", (d) => `complex-var`)
      .style("stroke-width", 2)
      .attr("stroke", "white")
      .attr("cx", (d) => this.xScaleError(+d.x))
      .attr("cy", (d) => this.yScaleError(+d[variance]))
      .attr("r", 0)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 9.5 : 12)
      .transition()
      .attr("r", window.innerWidth <= 600 ? 5 : 8);

    // next, plot circle for each point
  }