Setting up the local web server

There are many options for setting up a local web server. For this book, we've created a simple gulp build file which starts a local web server. The advantage of this web server is that it will automatically reload the browser when any of the sources change, which makes developing D3 visualizations a lot more convenient.

To start this web server, we need to first install node.js, which is required to run our build file. Node.js can be downloaded from here: https://nodejs.org/en/download/. Once you've installed node.js, you need to run the following command once (npm install) in the <DVD3> directory:

    $ npm install
    ├─┬ gulp@3.9.1
    │ ├── archy@1.0.0
    ...
    <removed dependencies for clarity>
    ...
        │ └─┬ websocket-driver@0.6.5
        │   └── websocket-extensions@0.1.1
        ├── livereload-js@2.2.2
        └── qs@5.1.0

You will see a large number of dependencies being downloaded, but once it is done, you can simply start the web server by running the npm start command (also in the <DVD3> directory):

    $ npm start
    
    > dataviz-d3js@1.0.0 start /Users/jos/dev/git/dataviz-d3js
    > gulp
    
    [11:20:18] Using gulpfile ~/dev/git/dataviz-d3js/gulpfile.js
    [11:20:18] Starting 'connect'...
    [11:20:18] Finished 'connect' after 30 ms
    [11:20:18] Starting 'watch'...
    [11:20:18] Finished 'watch' after 34 ms
    [11:20:18] Starting 'default'...
    [11:20:18] Finished 'default' after 12 μs
    [11:20:18] Server started http://localhost:8080
    [11:20:18] LiveReload started on port 35729

At this point, you've got a web server running at http://localhost:8080. If you now point your browser to this URL, you can access all the examples from your browser:

Note that I use Chrome in all the screenshots. While everyone has their own preference for a browser, I feel that the Chrome browser, currently, has the best developer tools. In the rest of this book, I'll show some examples of how you can use Chrome's developer tools to get more insight into your visualization.