Book Image

Learning D3.js Mapping

Book Image

Learning D3.js Mapping

Overview of this book

Table of Contents (14 chapters)
Learning D3.js Mapping
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
6
Finding and Working with Geographic Data
Index

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...