Book Image

Data Visualization with D3.js Cookbook

By : Nick Zhu
Book Image

Data Visualization with D3.js Cookbook

By: Nick Zhu

Overview of this book

D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today. "Data Visualization with D3.js Cookbook" is packed with practical recipes to help you learn every aspect of data visualization with D3. "Data Visualization with D3.js Cookbook" is designed to provide you with all the guidance you need to get to grips with data visualization with D3. With this book, you will create breathtaking data visualization with professional efficiency and precision with the help of practical recipes, illustrations, and code samples. "Data Visualization with D3.js Cookbook" starts off by touching upon data visualization and D3 basics before gradually taking you through a number of practical recipes covering a wide range of topics you need to know about D3. You will learn the fundamental concepts of data visualization, functional JavaScript, and D3 fundamentals including element selection, data binding, animation, and SVG generation. You will also learn how to leverage more advanced techniques such as custom interpolators, custom tweening, timers, the layout manager, force manipulation, and so on. This book also provides a number of pre-built chart recipes with ready-to-go sample code to help you bootstrap quickly.
Table of Contents (21 chapters)
Data Visualization with D3.js Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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:

  1. 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.

  2. 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 use d3.v3.js, the "non-uglified" (minimized) version, since it can help you trace and debug JavaScript inside D3 library. Once extracted place the d3.v3.js file in the same folder with an index.html file 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.

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.