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();
}