Experiment 2 – tooltips with visualizations

In this next experiment, we will enhance our tooltips with additional visualizations. In a similar fashion, we will outline the additional code to provide this functionality (http://localhost:8080/chapter-5/example-2.html).

To our CSS, we will need to add the following lines of code:

#tooltip svg{
border-top:0;
margin-left:-5px;
margin-top:7px;
}

This will style our SVG container (inside our tooltip DOM element) to align it with the label of the state.

Next, we'll include two new scripts to create visualizations:

<script src="base.js"></script>
<script src="sparkline.js"></script>

The preceding JavaScript files contain the D3 code that creates a line chart visualization. The chart itself contains and leverages the reusable chart pattern described by Mike Bostock at http://bost.ocks.org/mike/chart/. Feel free to examine the code; it is a very simple visualization that follows the enter, update, and exit pattern. We will explore...