Chapter 5. Creating User Interface Elements

In the previous chapter, we learned how to use the drag behavior and SVG elements to create reusable controls and user interface elements. In this chapter, we will learn how to create additional elements to complement our projects. When designing data visualizations, screen real estate is one of the scarcest resources; we need to get the most out of our pixels without cluttering the screen. One of the strategies to solve this problem is to add contextual user interface elements, allowing the user to request any additional information in a quick and nonintrusive way. A tooltip does just that: it displays additional information about an item without cluttering the entire visualization.

If the page has a large number of elements, the user can lose track of the important parts of the visualization or have difficulties in tracking individual elements. One solution is to highlight the important elements, so we can guide the users' attention...