in code/bias-variance/js/ErrorBar.js [106:205]
plotErrorLines(xVal, yVal) {
// resolve yVal
const noise = `noise_${yVal}`;
const error = `error_${yVal}`;
const bias = `bias_${yVal}`;
const variance = `var_${yVal}`;
const errorT = transition().delay(200).duration(1500);
// update y-axis depending on y-value
if (yVal === "final" || yVal == "point") {
this.yScaleError.domain([-0.05, 1.3]);
this.yAxisGroup
.transition()
.style("opacity", 1)
.call(axisLeft(this.yScaleError).tickSizeOuter(0).ticks(0));
} else {
this.yScaleError.domain([-0.05, 0.8]);
this.yAxisGroup
.transition()
.style("opacity", 1)
.call(axisLeft(this.yScaleError).tickSizeOuter(0).ticks(4));
}
// define line generators
const noiseLine = line()
.x((d) => this.xScaleError(+d[xVal]))
.y((d) => this.yScaleError(+d[noise]))
.curve(curveCatmullRom.alpha(0.8));
const errorLine = line()
.x((d) => this.xScaleError(+d[xVal]))
.y((d) => this.yScaleError(+d[error]))
.curve(curveCatmullRom.alpha(0.8));
const biasLine = line()
.x((d) => this.xScaleError(+d[xVal]))
.y((d) => this.yScaleError(+d[bias]))
.curve(curveCatmullRom.alpha(0.8));
const varLine = line()
.x((d) => this.xScaleError(+d[xVal]))
.y((d) => this.yScaleError(+d[variance]))
.curve(curveCatmullRom.alpha(0.8));
// draw noise data
this.noiseLine = this.svg
.selectAll("#noise-line")
.data([errorData], (d) => +d[xVal]);
this.noiseLine
.enter()
.append("path")
.attr("id", "noise-line")
.merge(this.noiseLine)
.attr("class", "error-line-bottom")
.transition(errorT)
.attr("d", noiseLine);
// draw error data
this.errorLine = this.svg
.selectAll("#error-line")
.data([errorData], (d) => +d[xVal]);
this.errorLine
.enter()
.append("path")
.attr("id", "error-line")
.merge(this.errorLine)
.attr("class", "error-line-bottom")
.transition(errorT)
.attr("d", errorLine);
// draw bias data
this.biasLine = this.svg
.selectAll("#bias-line")
.data([errorData], (d) => +d[xVal]);
this.biasLine
.enter()
.append("path")
.attr("id", "bias-line")
.merge(this.biasLine)
.attr("class", "error-line-bottom")
.transition(errorT)
.attr("d", biasLine);
// draw var data
this.varLine = this.svg
.selectAll("#var-line")
.data([errorData], (d) => +d[xVal]);
this.varLine
.enter()
.append("path")
.attr("id", "var-line")
.merge(this.varLine)
.attr("class", "error-line-bottom")
.transition(errorT)
.attr("d", varLine);
}