Fixing the Voronoi Diagram

In this lecture, we are going to fix a problem with the Voronoi diagram. If we hover our mouse over any of the dots, the tooltip appears. That is great, but we have lost the effect we had on the circles. The circles remain the same color and size. It is not clear as to which dot the reader is hovering over. This can become even more difficult to read if we are hovering over dots clustered close together.

We can fix this problem by drawing another circle. We will draw a circle over the original circle. The newly drawn circle will be enlarged with its color change. As before, when the reader hovers away from the dot, the newly drawn dot will be removed.

Drawing a circle

We are going to start by drawing a circle. The new circle will be drawn in our mouseenter event. We are going to change the selection we are performing at the beginning of the function. The this keyword no longer references the circle. Instead, it references the <path> element.

Using the container selection, we will replace this selection with the append() function to add a new circle.