Setting up a simple D3 development environment
The first thing you will need when you start a D3-powered data visualization project is a working development environment. In this recipe, we will show you how a simple D3 development environment can be set up within minutes.
Getting ready
Before we start, make sure that you have your favorite text editor installed and ready on your computer.
How to do it...
We''ll start by downloading D3.js through the following steps:
- Download the latest stable version of D3.js from https://d3js.org/ . You can download the archived, older releases from https://github.com/d3/d3/tags . Additionally, if you are interested in trying out the bleeding edge D3 build on master branch, then you can fork https://github.com/d3/d3 .
- Once it is downloaded and unzipped, you will find two D3 JavaScript files,
d3.jsandd3.min.js, and other informational files in the extracted folder. For development purpose, it is recommended that you use theÂd3.jsfile, the non-uglified (minimized) version, since it can help you trace and debug JavaScript inside the D3 library. Once extracted, place thed3.jsfile in the same folder with anindex.htmlfile containing the following HTML:<!-- index.html --> Â Â Â <!DOCTYPE html> Â Â Â <html> Â Â Â <head> Â Â Â <meta charset=""utf-8""> Â Â Â <title>Simple D3 Dev Env</title> Â Â Â <script type=""text/javascript"" src=""d3.js""></script> Â Â Â </head> Â Â Â <body> Â Â Â </body> Â Â Â </html>
This is all you need to create, in its simplest form, a D3-powered data visualization development environment. With this setup, you can essentially open the HTML file using your favorite text editor to start your development and also to view your visualization by opening the file in your browser.
Note
The source code for this recipe can be found at https://github.com/NickQiZhu/d3-cookbook-v2/tree/master/src/chapter1/simple-dev-env .
How it works...
D3 JavaScript library is very self-sufficient. It has no dependency on any other JavaScript library except what your browser already provides.
Note
If your visualization's target browser environment includes Internet Explorer 9, it is recommended that you use the compatibility library Aight, which can be found at https://github.com/shawnbot/aight , and Sizzle selector engine, which can be found at http://sizzlejs.com/ .
Having the following character encoding instruction in the header section was critical before D3 v4 release since the older version of D3 used UTF-8 symbols, such as π, in its source; however, with D3 v4.x, it is no longer necessary. It is still considered a good practice however, since other JavaScript libraries you will include might be using UTF-8 symbols, as shown in the following example:
<meta charset=""utf-8"">
Note
D3 is completely open source under a custom license agreement created by its author Michael Bostock. This license is pretty similar to the popular MIT license, with only one exception where it explicitly states that Michael Bostock's name cannot be used to endorse or promote products derived from this software without his permission.
There's more...
Throughout this cookbook, numerous recipe code examples will be provided. All example source code is provided and hosted on GitHub (https://github.com/ ), a popular open source social coding repository platform.
How to get source code
The easiest way to get all the recipe source code that you will need is to clone the Git repository (https://github.com/NickQiZhu/d3-cookbook-v2 ) for this book. If you are not planning to set up a development environment for the recipes, then you can safely skip this section.
Note
In case you are not familiar with Git, its clone concept is similar to the checkout concept in other version control software. However, cloning does a lot more than simply checking out the files. It also copies all branches and histories to your local machine, effectively cloning the entire repository to your local machine so you can work even when you are completely offline with this cloned repository in your own environment.
First, install a Git client on your computer. You can find a list of Git client software at https://git-scm.com/downloads , and a detailed guide on how to install it on different operating systems at https://git-scm.com/book/en/Getting-Started-Installing-Git .
Note
Another popular way to get Git and GitHub working is to install the GitHub client, which gives you a richer set of features than simply Git. However, at the time of writing this book, GitHub only offered client software for Windows and Mac OS; refer to https://desktop.github.com/ .
Once the Git client is installed, simply issuing the following command will download all recipe source code to your computer:
> git clone git@github.com:NickQiZhu/d3-cookbook-v2.git
