Book Image

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner
Book Image

Data Visualization with D3 and AngularJS

By: Erik Hanchett, Christoph Körner

Overview of this book

Table of Contents (16 chapters)
Data Visualization with D3 and AngularJS
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Cursors


With the previous knowledge, we are already prepared to implement cursors for our visualization directives. Cursor lets us interact with the visualization because they can show us more detail about the presented values. In my opinion, every two-dimensional graph should have an option to enable cursors; it facilitates understanding a graph.

A simple cursor

First, we want to start with a cursor that solely follows the mouse movements and shows the current values of the axes at the position of the cursor. The following image visualizes what we want to achieve. I bordered the cursor values with red color to better show where we want to place the cursor labels later:

A simple cursor

First, let's discuss the steps that we have to implement to achieve a result similar to the previous image. Every time we move the mouse, we need to:

  • Find the coordinates of the cursor

  • Get the corresponding axis values of the cursor's coordinates

  • Draw a line parallel to the y axis at the x position of the cursor

  • Draw...