Setting up a simple D3 development environment
First thing you need when starting 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 you have your favorite text editor installed and ready on your computer.
How to do it...
We'll start by downloading D3.js:
- Download the latest stable version of D3.js from http://d3js.org/. You can download the archived, older releases from https://github.com/mbostock/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/mbostock/d3.
- Once downloaded and unzipped, you will find three files
d3.v3.js,d3.v3.min.js, and its license in the extracted folder. For development it is recommended to used3.v3.js, the "non-uglified" (minimized) version, since it can help you trace and debug JavaScript inside D3 library. Once extracted place thed3.v3.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.v3.js"></script> </head> <body> </body> </html>
Tip
If you download D3 from a source or a tagged version, the JavaScript file name will be slightly different. Instead of d3.v3.js, it will simply be called d3.js.
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 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/tree/master/src/chapter1/simple-dev-env.
How it works...
D3 JavaScript library is very self-sufficient. It has no dependency on any JavaScript library than other what your browser already provides. In fact, it can even be used in a non-browser environment such as Node.js with some minimum setup (I will cover this in more detail in later chapters).
Tip
If your visualization's target browser environment includes Internet Explorer 9, it is recommended to use the compatibility library Aight, which can be found at https://github.com/shawnbot/aight, and Sizzle selector engine at http://sizzlejs.com/.
Having the following character encoding instruction in header section is critical:
<meta charset="utf-8">
The character encoding instructs browsers and validators what set of characters to use when rendering web pages. Otherwise your browser will not be able to load D3 JavaScript library since D3 uses utf-8 character for certain symbols such as π.
Note
D3 is completely open source, and it is open sourced 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 permission.
There's more...
Throughout this cookbook numerous recipe code examples will be provided. All example source code are 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 need is to clone the Git repository (https://github.com/NickQiZhu/d3-cookbook) for this book. If you are not planning to set up a development environment for the recipes then you can safely skip this section.
Tip
If you are not familiar with Git, clone is similar to the check-out concept in other versions of 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 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 here http://git-scm.com/downloads, and a detailed guide on how to install it on different operating systems here http://git-scm.com/book/en/Getting-Started-Installing-Git.
Tip
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, GitHub only offered client software for Windows and Mac OS.
GitHub for Windows: http://windows.github.com/.
GitHub for Mac: http://mac.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.git
Tip
Or if you choose to use GitHub client, then simply click the Fork button on the repository page https://github.com/NickQiZhu/d3-cookbook. This will make this repository appear in your GitHub client.
