D3.js applications can be built using many, if not any, web development tools. The choice of tool is often dependent upon the individual coder, as each platform (.Net, Node.JS, Ruby on Rails, and so on) provides their own (and many third-party) tools.
This book will not be prescriptive and specify editors. Instead, it will generally refer you to the online and functional examples of all the code, and leave it to the readers to reproduce them in their own development environment.
The examples in this book will be delivered using a combination of Js Bin (http://jsbin.com/) and bl.ocks.org (http://bl.ocks.org/), and we will use the Google Chrome Developer tools for examining the DOM in our examples. A brief introduction to each is therefore worthwhile, as each example in this book will be linked to an example on bl.ocks.org, which itself will contain a link to the code in Js Bin for you to play with dynamically.
Js Bin (http://jsbin.com/) is a website that functions as a development tool for facilitating the quick creation and sharing of simple JavaScript applications that run within the browser. It provides many features, including saving and sharing of HTML and JavaScript, real-time update of the UI while you are editing, and a very cool ability to push your code and data to GitHub.
Note
GitHub is a free code sharing and source code management tool. If you are not familiar with it, check it out at http://www.github.com.
I think that Js Bin provides one of the least-friction means of getting up and coding with D3.js. You can simply go to the website, start editing in HTML, CSS, or JavaScript, and see the results as you type in the browser pane. No need for installing any development tools or web servers!
As an example of Js Bin, the following link will take you to the first of our examples, the canonical Hello World application written purely in HTML. http://jsbin.com/zimeqe/edit?html,output.
The preceding screenshot displays a single bin, a combination of HTML, CSS, and JavaScript that is stored within Js Bin's servers. The Js Bin user interface provides multiple tabs/panes for the HTML, CSS, JavaScript, Console, and HTML output from the code in the bin. With Auto-run JS selected, the output will be regenerated on every interactive change to any of the code.
This makes Js Bin excellent for interactively demonstrating and creating D3.js visualizations.
bl.ocks.org (http://bl.ocks.org) is a service for D3.js code examples that you place on GitHub, a free source code and sharing repository, in an entity known as a gist. A gist is simply one or more reusable and sharable piece of code that are managed by GitHub. They are an excellent means of remembering and sharing small code examples.
bl.ocks.org was created by Mike Bostock, the original creator of D3.js. It is able to create great D3.js visualizations using gists, provided that the gist itself is a piece of D3.js code. Many, if not most, D3.js examples on the Web are presented as examples on bl.ocks.org, and this book will follow this model.
For a demonstration, open http://bl.ocks.org/d3byex/ed79b9fee311091333d6, which takes you to a bl.ock.org version of the Hello World example. Opening the link will present you with the following content.
This bl.ock follows a pattern that will be used throughout the book. Each example will be in its own bl.ocks.org and consist of a title, the D3.js code in operation, a link to live code on Js Bin, and then the HTML and any data that is in use in the example.
At the very top of the page, there is a link that you can click which will also take you to the gist on GitHub.
The link displayed in the preceding screenshot takes you to the following page at https://gist.github.com/d3byex/ed79b9fee311091333d6
This code is not dynamic like the one on Js Bin, but you can click on the Download Zip button, and all the files in the gist get downloaded to your system as a ZIP file.