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

Path

When creating maps with D3, the path SVG tag is used most often. Using the definition from W3C, you can think of the path tag as a series of commands that explain how to draw any shape by moving a pen on a piece of paper. The path commands start with the location to place the pen and then a series of follow-up commands that tell the pen how to connect additional points with lines. The path shapes can also be filled or have their outline styled.

Let's look at a very simple example to replicate the triangle we created as a polygon.

Open your browser, go to http://localhost:8080/chapter-2/path.html, and you will see the following output on your screen:

Right-click anywhere in the triangle and select Inspect element.

The path command for this shape is as follows:

<path d="M 120 120 L 220 220, 420 120 Z" stroke="steelblue" 
fill="lightyellow&quot...