Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learning D3.js 5 Mapping

You're reading from   Learning D3.js 5 Mapping Build cutting-edge maps and visualizations with JavaScript

Arrow left icon
Product type Paperback
Published in Nov 2017
Publisher
ISBN-13 9781787280175
Length 298 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (3):
Arrow left icon
Thomas Newton Thomas Newton
Author Profile Icon Thomas Newton
Thomas Newton
Oscar Villarreal Oscar Villarreal
Author Profile Icon Oscar Villarreal
Oscar Villarreal
Lars Verspohl Lars Verspohl
Author Profile Icon Lars Verspohl
Lars Verspohl
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Gathering Your Cartography Toolbox FREE CHAPTER 2. Creating Images from Simple Text 3. Producing Graphics from Data - the Foundations of D3 4. Creating a Map 5. Click-Click Boom! Applying Interactivity to Your Map 6. Finding and Working with Geographic Data 7. Testing 8. Drawing with Canvas and D3 9. Mapping with Canvas and D3 10. Adding Interactivity to Your Canvas Map 11. Shaping Maps with Data - Hexbin Maps 12. Publishing Your Visualization with GitHub Pages

Step-by-step bootstrap

The next section covers detailed instructions to set up your development environment if you do not have any of the required packages. By the end of the chapter, you will have a working environment for the rest of the book (an example of a running map and an initial look at tools used to create visualizations).

A lightweight web server

Technically, most of the content we will craft can render directly in the browser without the use of a web server. However, we highly recommend you do not go ahead with this approach. Running a web server in your local development environment is extremely easy and provides several benefits:

  • Geographic information, statistical data, and visualization code can be clearly separated into isolated files
  • API calls can be stubbed and simulated, allowing easy integration into a full-stack application in the future
  • It will prevent common mistakes when making Fetch calls to fetch geographic and statistical data (for example, the same-origin policy)

For our choice of web server and other tools in our toolbox, we will rely on a Node.js package named http-server. Node.js is a platform built on Chrome's JavaScript runtime, which is used to build fast, scalable network applications. The platform includes Node Package Manager (npm), which was created by other members of the vibrant Node.js community and allows the developer to quickly install packages of pre-built software.

To install Node.js, simply perform the following steps:

  1. Go to the website http://nodejs.org.
  2. Click on the INSTALL button.
  3. Open the downloaded package and follow the defaults.

To test the installation, type the following in the command line:

node -v

Something similar should return:

v0.10.26 

This means we have installed the given version of Node.js.

TopoJSON is a command-line utility used to create files in the TopoJSON-serialized format. The TopoJSON format will be discussed in detail in Chapter 6, Finding and Working with Geographic Data. The TopoJSON utility is also installed via npm.

We have already installed Node.js and npm, so enter the following on the command line:

npm install -g topojson
npm install –g shapefile

Once the installation is complete, you should check the version of TopoJSON installed on your machine just as we did with Node.js:

geo2topo --version

If you see version 3.x, it means you have successfully installed TopoJSON.

TopoJSON uses node-gyp which has several dependencies based on the operating system. Please go to http://github.com/TooTallNate/node-gyp for details.

If you're using Windows, the basic steps to get TopoJSON working are as follows:

  1. Install Python 2.x (3.x not supported at the time of writing this book).
  2. Install Microsoft Visual Studio C++ 2012 for Desktop (Express).
You have been reading a chapter from
Learning D3.js 5 Mapping - Second Edition
Published in: Nov 2017
Publisher:
ISBN-13: 9781787280175
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime