entropy: entropy()

in code/decision-tree/js/EntropyBubble.js [395:534]

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

        entropy: entropy(permutation),
        x: prob(permutation),
      });
    }

    // Create entropy plot
    const padding = 50;

    const areaGradient = this.svg
      .append("defs")
      .append("linearGradient")
      .attr("id", "areaGradient")
      .attr("x1", "0%")
      .attr("y1", "0%")
      .attr("x2", "0%")
      .attr("y2", "100%");

    areaGradient
      .append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "rgb(188, 111, 177)")
      .attr("stop-opacity", 0.76);
    areaGradient
      .append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "white")
      .attr("stop-opacity", 0);

    this.xScale = scaleLinear()
      .domain([0, 1])
      .range([this.positionXScale(2), this.positionXScale(8)]);
    // .range([padding, this.WIDTH - padding])6

    this.yScale = scaleLinear()
      .domain([0, 1])
      .range([this.HEIGHT - padding, padding * 3]);

    // add axes
    // x
    this.entroypG
      .append("g")
      .attr("id", "entropy-x-axis")
      .attr("transform", `translate(${0}, ${this.HEIGHT - padding})`)
      .call(
        axisBottom(this.xScale)
          .tickFormat((x) => `${format(".0%")(x)}`)
          .ticks(5)
      );
    // y
    this.entroypG
      .append("g")
      .attr("id", "entropy-y-axis")
      .attr("transform", `translate(${self.positionXScale(2)}, 0)`)
      .call(
        axisLeft(this.yScale)
          .tickSize(-self.positionXScale(9) + self.positionXScale(3))
          .tickSizeOuter(0)
          .ticks(4)
      );
    // draw line
    this.entroypG
      .append("path")
      .datum(data)
      .style("fill", "url(#areaGradient)")
      .attr("stroke", "rgb(188, 111, 177)")
      .attr("stroke-width", 6)
      .attr(
        "d",
        line()
          .x((d) => this.xScale(d.x))
          .y((d) => this.yScale(d.entropy))
      );

    // // add title
    this.entroypG
      .append("text")
      .attr("class", "entropy-x-axis")
      .text(`Proportion of Positive Class`)
      .attr("x", this.WIDTH / 2)
      .attr("y", this.HEIGHT - padding + 40)
      .attr("text-anchor", "middle");

    this.entroypG
      .append("text")
      .text(mmobile ? "Negative" : "Negative Class")
      .attr("x", self.positionXScale(0))
      .attr("y", self.positionYScale(4))
      .attr("text-anchor", "middle")
      .attr("class", "entropy-class-label");

    this.entroypG
      .append("text")
      .text(mmobile ? "Positive" : "Positive Class")
      .attr("x", self.positionXScale(10))
      .attr("y", self.positionYScale(4))
      .attr("text-anchor", "middle")
      .attr("class", "entropy-class-label");
  }

  // initialize svg and params for chart
  initChartSvg(div) {
    // draw svg
    this.svg = select(`#${div}`)
      .append("svg")
      .attr("id", `${div}-svg`)
      .attr("width", this.WIDTH + this.MARGIN.LEFT + this.MARGIN.RIGHT)
      .attr("height", this.HEIGHT + this.MARGIN.TOP + this.MARGIN.BOTTOM)
      .style("background-color", "rgba(0,0,0,0");

    // append g to svg
    const g = this.svg
      .append("g")
      .attr("id", `${div}-g`)
      .attr("transform", `translate(${this.MARGIN.LEFT}, ${this.MARGIN.TOP})`);

    return g;
  }

  addScales() {
    const self = this;
    const nSplits = 12;
    const nYSplits = 15;
    this.positionXScale = scaleLinear()
      .domain([-1, nSplits - 1])
      .range([this.MARGIN.LEFT, this.WIDTH - this.MARGIN.RIGHT]);

    this.positionYScale = scaleLinear()
      .domain([-1, nYSplits - 1])
      .range([0, this.HEIGHT]);

    this.boundingCircleScale = scaleLinear()
      .domain(range(0, self.numCirclesPerGroup * 2 + 20))
      .range(mmobile ? range(5.95, 7) : range(20, 22.5));

    this.colorScale = scaleOrdinal()
      .domain(["positive", "negative"])
      .range(["teal", "deeppink"]);

    this.positions = {
      negative: {