drawScatter()

in code/decision-tree/js/InformationGainScatter.js [49:128]
69 lines of code
1 McCabe index (conditional complexity)

  drawScatter() {
    const self = this;
    // set up svg

    // define scales
    // x-scale
    this.xScale = scaleLinear()
      .domain([0, 1.05])
      .range([this.MARGIN.LEFT, this.WIDTH - this.MARGIN.RIGHT]);

    // y-scale
    this.yScale = scaleLinear()
      .domain([0, 16])
      .range([this.HEIGHT - this.MARGIN.BOTTOM, this.MARGIN.TOP]);

    // color scale
    this.colorScale = scaleOrdinal()
      .domain(["oak", "cherry", "apple"])
      .range(["#F9BC92", "#7B3972", "#74ADA9"]);

    // define axes
    const xAxisGeneratorLoess = axisBottom(this.xScale)
      .ticks(4)
      .tickSizeOuter(0);

    const yAxisGeneratorLoess = axisLeft(this.yScale).tickSizeOuter(0);

    // add x-axis
    this.xAxis = this.scatterG
      .append("g")
      .attr("class", "axis")
      .attr("id", "dt-scatter-x-axis")
      .call(xAxisGeneratorLoess)
      .attr("transform", `translate(0, ${this.HEIGHT - this.MARGIN.BOTTOM})`);

    // add y-axis
    this.yAxis = this.scatterG
      .append("g")
      .attr("class", "axis")
      .attr("id", "dt-scatter-y-axis")
      .call(yAxisGeneratorLoess)
      .attr("transform", `translate(${this.MARGIN.LEFT}, 0)`);

    // add text labels
    this.xLabel = this.svg
      .append("text")
      .attr("class", "scatter-axis-text")
      .attr("x", this.MARGIN.LEFT)
      .attr("y", this.HEIGHT + this.MARGIN.TOP + this.MARGIN.BOTTOM)
      .attr("text-anchor", "left")
      .text("Diameter");

    this.circles = this.scatterG
      .selectAll("circle.ig-scatter-circle")
      .data(scatterData)
      .enter()
      .append("circle")
      .attr("class", "ig-scatter-circle")
      .attr("r", this.circleSize)
      .attr("fill", (d) => this.colorScale(d.Family))
      .attr("cx", (d) => this.xScale(+d.Diameter))
      .attr("cy", (d) => this.yScale(+d.Height))
      .attr("stroke", "white")
      .attr("stroke-width", 1)
      .attr("fill-opacity", 1);

    // add tooltip line
    this.line = this.scatterG
      .append("line")
      .attr("id", "entropy-scatter-line")
      .attr("x1", this.xScale(0.444))
      .attr("x2", this.xScale(0.444))
      .attr("y1", 0)
      .attr("y1", this.HEIGHT)
      .attr("fill", "none")
      .style("pointer-events", "none");

    // add legend
    this.addLegend();
  }