Mapping with Canvas and D3

It's time to leave our house and tree. I know it's sad, but we'll move on to potentially more exciting things to build. You covered a lot of ground in the previous chapter. You learned how to draw with Canvas, how to animate with Canvas, and a pattern to combine the D3 life cycle with Canvas. As D3 is usually in cahoots with SVG, you also learned about a few key differences between SVG and Canvas. Understanding the advantages and limitations of either approach is key to making informed decisions about which mode of rendering to use. Here's what we will go through in this chapter:

• We'll start off with a summary of the key reasons for using either SVG or Canvas.
• We will then move on to review steps to build a flight path visualization with SVG, before building one with Canvas.
• Along the way, we will focus on measuring the performance...

Choosing Canvas or SVG

You have already seen some benefits and some challenges to overcome when working with either of the two rendering methods. This section is supposed to summarize the most important differences. As such, it should give you a good understanding of what to use in which circumstance. Note, that I am juxtaposing SVG and Canvas rather than HTML and SVG with Canvas. It seems appropriate to focus on SVG as it is D3's main building block due to its visualization advantages. However, the same logic applies to the equally retained HTML.

Reasons to choose SVG

Let's first look at the SVG benefits:

• SVG is a vector-based graphics system. It allows resolution independent drawings you can scale without affecting...

Visualizing flight paths with Canvas and D3

Data can come with a great many number of individual data points. Maps especially can be the playground for large datasets. While it might be tempting to visualize features of a dataset as individual elements, in explanatory data visualization especially it often makes sense to aggregate data to bring across a single point well. While Canvas allows you to show and animate many points, it is power you might want to use responsibly.

Having said that, it can often be mesmerizing to watch dynamic data unfold as well as bringing across a specific point. Combining user engagement with concise learnings is of course a great plus you should leverage if possible. Considering map data, there are a great many examples of dynamic visualizations with numerous animated elements, such as natural elements like winds or ocean currents, cultural elements...

Summary

In this chapter, you have learned how to build a flight path visualization in SVG and in Canvas, bringing together much of what you have learned before. You have seen how it requires a different mental model to program animations with Canvas, probably best summarized by the game loop: process your data, clear the drawing, re-draw the animation. You have used D3 to set up the visualizations, but you have also seen that due to the different coding concept, Canvas might require you to step away a little from D3 core functionality like transitions. However, all that paid off by witnessing the power of Canvas when it comes to animation. Instead of being able to fluidly animate 1,000 points we managed to animate 15,000 points safely and 20,000 points still gracefully with optimized Canvas techniques.

After having seen the benefits of Canvas, let's now find a workaround...