DataTooltip = { chart; //tooltip that shows further info on the circles const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "20px") .style("font-weight", "bold"); setTimeout(function() { d3.selectAll("circle.points") //change color and make tooltip visible .on("mouseover", function(d) { d3.select(this).attr("fill", ccfc); tooltip.style("visibility", "visible").html(getTooltipText(d)); }) /*update tooltip position based position. X can easily be updated via the year attribute, since it is the same for all features. to have one function for possible Y-attributes, the function is based on the mouse coordinates. y-coordinates of 440 is roughly equal to an attribute value of 25. */ .on("mousemove", function(d) { if (d.year > 2015) { if (d3.mouse(this)[1] > 440) { tooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX - 200 + "px"); } else { tooltip .style("top", d3.event.pageY + 20 + "px") .style("left", d3.event.pageX - 200 + "px"); } } else { if (d3.mouse(this)[1] > 440) { tooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX + 10 + "px"); } else { tooltip .style("top", d3.event.pageY + 20 + "px") .style("left", d3.event.pageX + 10 + "px"); } } }) //reset circle color and hide tooltip .on("mouseout", function(d) { d3.select(this).attr("fill", d => { if (parseInt(d.id) < IDYBP[1]) { return colorScheme(d.id / nrOfBinElements[0]); } else if (d.id < IDYBP[2]) { return colorScheme((d.id - IDYBP[1] - 1) / nrOfBinElements[1]); } else if (d.id < IDYBP[3]) { return colorScheme((d.id - IDYBP[2] - 1) / nrOfBinElements[2]); } else if (d.id < IDYBP[4]) { return colorScheme((d.id - IDYBP[3] - 1) / nrOfBinElements[3]); } else if (d.id < IDYBP[5]) { return colorScheme((d.id - IDYBP[4] - 1) / nrOfBinElements[4]); } else if (d.id < IDYBP[6]) { return colorScheme((d.id - IDYBP[5] - 1) / nrOfBinElements[5]); } else if (d.id < IDYBP[7]) { return colorScheme((d.id - IDYBP[6] - 1) / nrOfBinElements[6]); } else if (d.id < IDYBP[8]) { return colorScheme((d.id - IDYBP[7] - 1) / nrOfBinElements[7]); } else if (d.id < IDYBP[9]) { return colorScheme((d.id - IDYBP[8] - 1) / nrOfBinElements[8]); } else if (d.id <= IDYBP[10]) { return colorScheme((d.id - IDYBP[9] - 1) / nrOfBinElements[9]); } }); tooltip.style("visibility", "hidden"); }); }, 100); function underThirty(d) { var selAttr, param; param = featureSelectionData.filter(x => x.name == attribute)[0] ? featureSelectionData.filter(x => x.name == attribute)[0].param : 0; selAttr = param ? d[param] : 0; return selAttr <= 30 ? true : false; } }