function mousemove()

in code/decision-tree/js/InformationGainLine.js [205:281]


    function mousemove(event) {
      // recover coordinate we need
      var x0 = self.xScale.invert(pointer(event)[0]);
      var i = bisect(
        self.data.map((d) => d.Diameter),
        x0
      );
      let selectedData = self.data[i];
      self.entTextL
        .html(`${format(".3f")(selectedData.ent_left)}`)
        .attr("x", self.xScale(selectedData.Diameter))
        .attr("y", self.yScale(selectedData.ent_left));
      self.entTextR
        .html(`${format(".3f")(selectedData.ent_right)}`)
        .attr("x", self.xScale(selectedData.Diameter))
        .attr("y", self.yScale(selectedData.ent_right));
      self.igText
        .html(`${format(".3f")(selectedData.ig)}`)
        .attr("x", self.xScale(selectedData.Diameter))
        .attr("y", self.yScale(selectedData.ig));

      // update top chart
      if (x0 < self.diameterMin) {
        select("#entropy-scatter-line")
          .raise()
          .attr("x1", self.xScale(self.diameterMin))
          .attr("x2", self.xScale(self.diameterMin));
        select("#ig-line")
          .raise()
          .attr("x1", self.xScale(self.diameterMin))
          .attr("x2", self.xScale(self.diameterMin));
      } else if (x0 >= self.diameterMax) {
        select("#entropy-scatter-line")
          .raise()
          .attr("x1", self.xScale(self.diameterMax))
          .attr("x2", self.xScale(self.diameterMax));
        select("#ig-line")
          .raise()
          .attr("x1", self.xScale(self.diameterMax))
          .attr("x2", self.xScale(self.diameterMax));
      } else {
        select("#entropy-scatter-line")
          .raise()
          .attr("x1", self.xScale(selectedData.Diameter))
          .attr("x2", self.xScale(selectedData.Diameter));
        select("#ig-line")
          .raise()
          .attr("x1", self.xScale(selectedData.Diameter))
          .attr("x2", self.xScale(selectedData.Diameter));
      }

      // color circles
      select(`#entropy-chart-scatter-svg`)
        .selectAll("circle.ig-scatter-circle")
        .each(function (d) {
          select(this).attr("stroke-width", 2);
          if (d.Diameter < self.diameterMin) {
            select(this)
              .classed("entropy-right", false)
              .attr("class", "entropy-left ig-scatter-circle");
          } else if (d.Diameter >= self.diameterMax) {
            select(this)
              .classed("entropy-left", false)
              .attr("class", "entropy-right ig-scatter-circle");
          } else if (d.Diameter <= x0) {
            select(this)
              .classed("entropy-right", false)
              .attr("class", "entropy-left ig-scatter-circle");
          } else {
            select(this)
              .classed("entropy-left", false)
              .attr("class", "entropy-right ig-scatter-circle");
          }
        });
      select(`#entropy-chart-scatter-svg`).select(".dt-scatter-legend").raise();
      select(`#entropy-chart-ig-svg`).select(".dt-scatter-legend").raise();
    }