Adding Interactivity to Your Canvas Map

In the preceding chapter, you saw one of the shining qualities of Canvas in action – animating thousands of points on the screen in a smooth animation. In this chapter, you will deal with one Canvas caveat: interaction. While interaction with HTML or SVG elements is straightforward, it requires a little more thought and some tricks to achieve with Canvas. In this chapter, you will follow along these thoughts and learn the tricks needed to do the following things:

• Making a globe move, and adding zoom and rotation interaction to it
• Learning how to interact with Canvas elements through picking
• Retrieving data from a Canvas element to display it in a tooltip

After this chapter, you will have covered all important facets of Canvas, drawing, animating, and, finally, interacting with Canvas.

...

Why Canvas interaction is different

In the preceding chapter, you achieved a smooth animation of thousands of points by doing away with the DOM. The DOM is a representation of each element in browser memory. Bypassing it, you were dealing with much less overhead during animation. However, the DOM can be very useful for other goals in web development. High up on that list – especially for data visualization – is the interaction with elements on screen.

You can just add an onmousemove or onclick listener to an element. You can’t do that to elements on a Canvas. They are a pixel manifestation of past code, not represented as a model within the browser.

However, don’t despair, there are indirect yet simple techniques to interact with your Canvas. We’ll be looking at the most important techniques in this chapter, building an interactive globe:

A...

Drawing the world on a Canvas

Let’s start drawing a globe. This is straightforward, very much building on the preceding chapter.

Setting up

First, you will create a few variables required for initialization. We’ll come back to this list as the application grows, but, for now, it’s lean:

var width = 960,
    height = 600,
    projectionScale = height / 2.1,
    translation = [width / 2, height / 2];

You are setting the width and height of the Canvas as well as the scale and the translation of the globe. Each projection has their own ideal starting scale. You can play with this number to find the right scale. You will use the width and height straight away, setting up the Canvas and its context:

var canvas...

Making the world move

Zooming into and rotating a globe projection is a truly joyous pastime, I find. Apart from being such fun, it’s also extremely useful when dealing with globe projections, as the user needs to be able to view the world from different angles.

In this section, we will add our first bit of Canvas interactivity to the globe. We will equip the users with the ability to zoom into and rotate the globe. Apart from setting up two additional global variables, we will exclusively do work in the ready() function–our central function tasked to prepare the data. From now onward, it will also deal with interactivity, right here:

function ready(world) {
  var countries = topojson.feature(world, 
  world.objects.ne_110m_admin_0_countries);
  requestAnimationFrame(function() {
    renderScene(countries);
  });

  /* Interactivity goes here */
}

Also, note that we wrapped...

Finding the Canvas object under the mouse - Picking

We’ve done zooming and rotating. Let’s celebrate by adding another key piece of interactivity: the mouseover. In fact, we don’t want just any mouseover. We want to mouse over an object drawn on the Canvas and retrieve information from that object. Once we have that, we have a lot—we can create tooltips, we can highlight the object, we can link views with another graph showing the same data point, and so on.

Picking, the theory

So, how are we doing this? As established many times above, we can’t just add a listener to a set of pixels, because an event is an object maintained by the browser, interacting with DOM nodes. However, our browser...

Visualizing data per country and adding a tooltip

You learned to build a data-driven and -giving representation of your visual. You have also used it to highlight the country at hover. However, you haven’t really tapped into the plentiful options of interaction this gives you. Let’s do this now. There’s a lot you could do, but I think a tooltip would be a reasonable place to start.

Before we embark on the tooltip build, let’s add some more interesting data to the globe. So far, we have country name, country name abbreviation, and population estimate. That’s already something to work with. However, let’s task ourselves with adding an additional data source to our globe, visualize it appropriately, and add a sensible interaction for user exploration.

As a little reminder, this is what you will build:

Our final Canvas adventure

View the...

Summary

You have officially seen and used Canvas. You’ve reveled in its shining moments and mastered its quirks. You have started with a royal blue rectangle and have now successfully built a whole world, which you can spin, resize as desired, and retrieve country-specific information from. On the way, you have also seen how Canvas works in comparison to SVG. You have learned about the benefits and issues when coding a little closer to the graphics processing part of your machine.

The idea of these chapters has, of course, been to extend your technical skill set. However, beyond that, it’s the alternative concept of how to approach Canvas—the procedural style, the game loop routine, and the way Canvas interacts with D3—that broadens your horizon as a developer and allows for a different perspective to tackle problems.

...