Book Image

D3.js 4.x Data Visualization - Third Edition

By : Aendrew Rininsland, Teller
Book Image

D3.js 4.x Data Visualization - Third Edition

By: Aendrew Rininsland, Teller

Overview of this book

Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization. This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time. By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.
Table of Contents (11 chapters)
3
Shape Primitives of D3

Proximity detection and the Voronoi geom


A Voronoi geom (found in the d3-voronoi package) chops a geographic shape into discrete regions around points, such that no section overlaps and the entirety of the area is covered. Anything within a particular point's section is closer to that point than any other point. It's effectively another layout, but it's used more for utility than for display -- for instance, a grid of Voronoi regions is often used to increase the mouseover area of data in a chart so that your cursor will always be highlighting the nearest point. We will use the Voronoi geom to figure out what the closest major airport is to your current location, which we'll supply via the HTML5 Location API.

Replace the last line we wrote with the following:

async function renderView(ctx, next) {
if (ctx.method === 'GET') {
ctx.body =
&grave;<!doctype html>
<html>
  <head>
    <title>Find your nearest airport!</title>
  </head>
  <body>
    &lt...