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.

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Free Chapter

Gathering Your Cartography Toolbox

Gathering Your Cartography Toolbox

Quick bootstrap

Step-by-step bootstrap

Using the web browser as a development tool

Creating Images from Simple Text

Creating Images from Simple Text

The SVG coordinate system

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

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

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

Finding and Working with Geographic Data

Finding and Working with Geographic Data

Geodata file types

Testing

Code organization and reusable assets

Project structure

Writing testable code

Creating resilient visualization code

Drawing with Canvas and D3

Drawing with Canvas and D3

Introducing Canvas

Animating the Canvas

Mapping with Canvas and D3

Mapping with Canvas and D3

Choosing Canvas or SVG

Visualizing flight paths with Canvas and D3

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

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

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

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Quick bootstrap

The following instructions assume that Node.js , npm, and git are already installed on your system. If not, feel free to follow the Step-by-Step bootstrap section.

Type the following in the command line to install a light webserver::

npm install -g http-server

Install TopoJSON:

npm install -g topojson

Clone the sample code with included libraries:

git clone --depth=1 https://github.com/PacktPublishing/Learning-D3js-4-Mapping-Second-Edition.git

Go to the root project:

cd d3jsMaps

To start the server type the following:

http-server

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you.

Now, open your web browser to http://localhost:8080/chapter-1/example-1.html, and you should see the following map: