Book Image

Learning D3.js 5 Mapping - Second Edition

By : Thomas Newton, Oscar Villarreal, Lars Verspohl
Book Image

Learning D3.js 5 Mapping - Second Edition

By: Thomas Newton, Oscar Villarreal, Lars Verspohl

Overview of this book

D3.js is a visualization library used for the creation and control of dynamic and interactive graphical forms. It is a library used to manipulate HTML and SVG documents as well as the Canvas element based on data. Using D3.js, developers can create interactive maps for the web, that look and feel beautiful. This book will show you how build and design maps with D3.js and gives you great insight into projections, colors, and the most appropriate types of map. The book begins by helping you set up all the tools necessary to build visualizations and maps. Then it covers obtaining geographic data, modifying it to your specific needs, visualizing it with augmented data using D3.js. It will further show you how to draw and map with the Canvas API and how to publish your visualization. By the end of this book, you'll be creating maps like the election maps and the kind of infographics you'll find on sites like the New York Times.
Table of Contents (13 chapters)
6
Finding and Working with Geographic Data

Drawing with Canvas and D3

So far you have used D3 to render your visualizations with mostly SVG, and sometimes HTML, elements. In this section, you will learn how to use HTML5 Canvas to draw and animate your visualizations. Canvas can be used as an alternative to SVG, especially if you want to render more elements on screen. You will get an overview of what Canvas is and how it compares with SVG. You will learn how to draw and animate with Canvas and how you can use D3 with it.

After covering the foundations, we will visualize flight paths first with SVG and then with Canvas to contrast and compare the two rendering approaches hands on. First and foremost, this will give you a practical understanding of how Canvas works as an alternative to SVG. Secondly, it will showcase how Canvas can solve problems you might have when animating thousands of points at once with SVG, as browsers...