Archive

Archive for March, 2015

Using D3 Tooltips

March 9, 2015 Leave a comment

Tooltips can be extremely useful for displaying additional information NOT currently being rendered in the core D3  visualization, be it a chart, graph, map, etc..  Tooltips can also enhance the overall aesthetic value of the visualization through the implementation of CSS and D3 transitions.  Let’s face it…D3 isn’t just about displaying data…it’s about “visualizing” it in such a way that captivates the user and creates a “wow thats cool” experience.

Before we get started let me first admit that at this point I’m still a newbie to D3 (only 4 months in) and much of this tutorial has been the result of studying the works of Mike Bostock and the following sites\tutorials\forums

I’m a firm believer that the best way to convey a new concept is to first demo a real world example and then break that down into the functional components.   Interestingly enough this tutorial began as an assist to a post made by a fellow techie on Google’s D3 Groups.  He originally requested help on several areas of a bar graph and one that caught my attention was: “displaying the name column on the tooltip”.  After reviewing his code I was quickly able to edit and provide a working solution, which you can view on CODEPEN...perhaps I’m not such a newbie after all..:}

tooltips-bargraph

Although the solution I provided worked to add the tooltip another fellow D3 enthusiast and more senior coder, Nick,  posted his solution as well on Codepen, which fulfilled all the users requirements, and then some. His code was also more structured and included additional code snippets for using RawGit, CSS styling\animation, as well as a different technique for positioning a tooltip.

So let’s start by reviewing the code I posted and then we’ll incorporate Nick’s tooltip code in a future post.

Tooltip Implementation

The most obvious place to start is:

  • Adding the tooltip
  • MOUSEOVER event to display tooltip

The code used to add the tooltip

var tooltip = d3.select('body').append('div')
  .style('position','absolute')
  .style('padding','0 10px')
  .style('opacity',0)
  .attr('class','tooltip')

Let’s break this down:

Position: Absolute – The position of the tooltip will be relative to the where the mouse pointer is located when the mouseover event is initiated.

Padding: 0 10px – This will pad the the div 0 px top\bottom and 10px left\right.

Opacity: 0 – This makes the tooltip invisible and provides a starting point for the transition() method when the mouseover event it initiated.

Class: tooltip – This adds a class to the div which can be used to apply additional CSS styling.

Now that we have a div in place let’s add the mouseover\mouseout events.

var rect = myChart
   .on('mouseover', function(d) {
      tooltip.transition()
        .style('opacity', .9)
        .style('background', 'lightsteelblue')
      tooltip.html( d.name + ": " + d.totalp )
        .style('left',(d3.event.pageX - 35) + 'px')
        .style('top', (d3.event.pageY - 30) + 'px')
   })
   .on('mouseout', function(d) {
      tooltip.transition()
        .style('opacity', 0)
})

Let’s break this down:

.on() – This is a method used to execute an eventlistener and requires the event to listen for, in this case both “mouseover “and “mouseout” and a callback function which executes a block of code, in this case the tooltip.transition() and tooltip.html().

tooltip.transition() – This calls the tooltip class, which was an attribute added to the div when it was created, and then executes the transition() method which changes an elements attributes, in this case the opacity will transition from 0 to .9.   I’ve also added a background color of lightsteelblue.  Transition is also used on the mouseout event to set the opacity back to 0, thereby making the tooltip seemingly disappear.

tooltip.html – This adds the text we want to display in the tooltip as well as where to position the tooltip.  The d3.event.pageX and d3.event.pageY are used as the coordinates for positioning the tooltip based on the mouse location.  In this case were looking to enter the tooltip above the mouse by moving it -35px to the left and -30px above.

So this lesson provides the basics for adding a tooltip.  In the next blog article I will discuss additional options on positioning the tooltip as I’m too crazy about displaying the data within the bar itself.   Although this technique works fine for a line chart or world map with points of interest it’s not the best implementation for a bar chart.  I’ll also review orgainizing the code a bit more by moving the mouseover\mouseout callback functions into their own named function.

Categories: Uncategorized Tags: