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.

Related Content you might be interested in

Current Title:

Small book image
Learning D3.js 5 Mapping - Second Edition
Thomas Newton | Oscar Villarreal | Lars Verspohl
Nov, 2017 | 298 pages
Small book image
Learn D3.js
Helder da Rocha
May, 2019 | 650 pages
Small book image
Expert Data Visualization
Jos Dirksen
Apr, 2017 | 394 pages
Small book image
D3.js Quick Start Guide
Matthew Huntington
Sep, 2018 | 180 pages
Table of Contents (13 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
Gathering Your Cartography Toolbox
Gathering Your Cartography Toolbox
Quick bootstrap
Step-by-step bootstrap
Using the web browser as a development tool
Summary
2
Creating Images from Simple Text
Creating Images from Simple Text
The SVG coordinate system
Line
Rectangle
Circle
Polygon
Path
Transform
Grouping
Text
Summary
3
Producing Graphics from Data - the Foundations of D3
Producing Graphics from Data - the Foundations of D3
Creating basic SVG elements
The enter() function
The update function
The exit() function
Fetch
Summary
4
Creating a Map
Creating a Map
Foundation - creating your basic map
Experiment 1 – adjusting the bounding box
Experiment 2 – creating choropleths
Experiment 3 – adding click events to our visualization
Experiment 4 – using updates and transitions to enhance our visualization
Experiment 5 – adding points of interest
Experiment 6 – adding visualizations as a point of interest
Summary
5
Click-Click Boom! Applying Interactivity to Your Map
Click-Click Boom! Applying Interactivity to Your Map
Events and how they occur
Experiment 1 – hover events and tooltips
Experiment 2 – tooltips with visualizations
Experiment 3 – panning and zooming
Experiment 4 – orthographic projections
Experiment 5 – rotating orthographic projections
Experiment 6 – dragging orthographic projections
Summary
6
Finding and Working with Geographic Data
Finding and Working with Geographic Data
Geodata file types
Summary
7
Testing
Testing
Code organization and reusable assets
Project structure
Writing testable code
Unit testing
Creating resilient visualization code
Summary
8
Drawing with Canvas and D3
Drawing with Canvas and D3
Introducing Canvas
Animating the Canvas
Summary
9
Mapping with Canvas and D3
Mapping with Canvas and D3
Choosing Canvas or SVG
Visualizing flight paths with Canvas and D3
Summary
10
Adding Interactivity to Your Canvas Map
Adding Interactivity to Your Canvas Map
Why Canvas interaction is different
Drawing the world on a Canvas
Making the world move
Finding the Canvas object under the mouse - Picking
Visualizing data per country and adding a tooltip
Summary
11
Shaping Maps with Data - Hexbin Maps
Shaping Maps with Data - Hexbin Maps
Reviewing map visualization techniques
Value and use of the hexagon
Making a hexbin map
Summary
12
Publishing Your Visualization with GitHub Pages
Publishing Your Visualization with GitHub Pages
What we will publish
Understanding the type of content you can publish
Hosting your code on GitHub
Publishing your project on GitHub Pages
Summary

Creating a Map

It's been quite a ride so far. We've gone through all the different aspects that encompass the creation of a map. We've touched on the basics of SVG, JavaScript, and D3. Now, it's time to put all the pieces together and actually have a final deliverable product. In this chapter, we will cover the following topics through a series of experiments:

  • Foundation - creating your basic map
  • Experiment 1 - adjusting the bounding box
  • Experiment 2 - creating choropleths
  • Experiment 3 - adding click events to our visualization
  • Experiment 4 - using updates and transitions to enhance our visualization
  • Experiment 5 - adding points of interest
  • Experiment 6 - adding visualizations as a point of interest
Previous Section
End of Section 1
Next Section