Basic Interaction - Data Tooltips
  Duration: 12:33
Part of Course: Introductory D3 Course
This Lesson is for subscribers

Basic-interaction-data-tooltips_280x158
Unlock this lesson NOW!
  • Get expert advice on Basic Interaction - Data Tooltips
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • A scatterplot chart has an X-Axis, Y-Axis, and Legend to help the user interpret the visual markings representing data
  • Sometimes, you will want to take this a step further and be able to hover over any of the points in the scatterplot chart and have a tool tip display the X and Y coordinates and potentially some more information about the particular data point
  • The Document Object Model has several different types of Event Drivers - Mouse events, Touch events, Keyboard events, HTML frame events, HTML form events, User Interface events, and many more
  • The d3.selection.on operator allows you to add an event listener to each element in the current selection
  • D3 invokes the listener in the same way it invokes other operator functions - by passing the current datum d, index i, and the "this" context for the current DOM element
  • D3 allows for the use of chain syntax to bind more than one event listener to any selection
  • Because event interactions can get complicated quickly, common practice is to use named functions rather than anonymous functions in the even listener definition
  • D3.event gives you the event properties at the time it was triggered, this includes a time stamp of when the event occurred, the horizontal coordinate, the vertical coordinate, and several other properties.
  • D3.event captures an event when it happens and stores it in the variable d3.event
  • When you define an event listener, it's worth remembering that you need a d3 selection of 'things' to bind the event listeners to

This Transcript is for subscribers.

Basic-interaction-data-tooltips_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Basic Interaction - Data Tooltips
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index