Scott Murray

Tutorials > D3 > Setup

Setup

Last updated 2015 September 10

These tutorials address D3 version 3. To learn the latest and greatest of versions 4.x, preorder the second edition of my book.

Downloading D3

Start by creating a new folder for your project. Within that folder, I recommend creating a sub-folder called d3. Then download the latest version of d3.v3.js into that sub-folder. As of this writing, the current version of D3 is 3.4.2.

D3 is also provided in a “minified” version, d3.v3.min.js, from which whitespace has been removed for smaller file sizes and faster load times. The functionality is the same, but typically you’d use the regular version while working on a project (for friendlier debugging), and then switch to the minified version once you’ve launched the project publicly (for optimized load times). The choice is up to you, but in these tutorials we’ll be using the standard version.

A third option is to download the entire D3 repository, which gives you not just the JavaScript files, but also all of the component source code. You can browse the repository contents first, or just download the whole thing as a compressed ZIP file.

Referencing D3

Create a simple HTML page within your project folder named index.html. Your folder structure should now look something like this:

project-folder/
    d3/
        d3.v3.js
        d3.v3.min.js (optional)
    index.html

Now paste the following into your HTML file, so it references D3 in the head and provides room for your JavaScript code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
        </script>
    </body>
</html>     

Viewing Your Page

In some cases, you can just open your HTML file in a web browser to view it. However, when loading external data sources, it is more reliable to run a local web server and view your page from http://localhost:8888/. You could use a server like MAMP or see the notes on the wiki on activating a quick, temporary server.

Next up: Adding elements

Interactive Data Visualization for the WebThese tutorials have been expanded into a book, Interactive Data Visualization for the Web, published by O’Reilly in March 2013. You can purchase the ebook and print editions from O’Reilly, but a second edition is coming soon, so I really recommend you preorder that. A free, online version includes interactive examples. Download the sample code files and sign up to receive updates by email.

Follow me on Twitter or watch this RSS feed for other updates.

These tutorials have been generously translated to Catalan (Català) by Joan Prim, Chinese (简体中文) by Wentao Wang, French (Français) by Sylvain Kieffer, Japanese (日本語版) by Hideharu Sakai, Russian (русский) by Sergey Ivanov, and Spanish (Español) by Gabriel Coch.

Also see my video courses, “An Introduction to d3.js: From Scattered to Scatterplot” and “Intermediate d3.js: Charts, Layouts, and Maps.”