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 1 – hover events


Building on our previous example, we can easily swap our click method into a hover method. Instead of having var click, we will now have var hover with the corresponding function. Feel free to open example-1.html of the chapter-5 code base to go over the complete example (http://localhost:8080/chapter-5/example-1.html). Let's review the changes necessary to change our click event to a hover event. In this particular case, we will need a little more CSS and HTML. In our <style> tag, add the following lines:

#tooltip{
position: absolute;
z-index: 2;
background: rgba(0,153,76,0.8);
width:130px;
height:20px;
color:white;
font-size: 14px;
padding:5px;
top:-150px;
left:-150px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

This style is for a basic tooltip. It is positioned "absolutely" so that it can take whatever x and y coordinates we give it (left and top). It also has some filler...