Getting Started With NVD3.js

Welcome to a brand new tutorial series of using NVD3.js to its full potential, in this series all of the visualizations offered with the NVD3 will be walked-through plus much more. NVD3 doesn’t have every chart type in the world, but the ones it does, function very well. From static to real-time data and extremely responsive to screen-size changes.

Pre-Note

NVD3.js depends on the epic d3.js library, so always make sure that this is included in your local project files or pulled from a CDN. The version of D3.js that is preferred and works best with NVD3 is version number 3.5.3.

Setting Up

The first and foremost task to undertake is one of your own preference, dependent on if you’re happy with using a CDN to load the library or prefer it locally. See the next two sub-sections to do either.

NVD3 Via CDN

Lucky for us, this particular library is now hosted on two different content-delivery networks, so take your pick! Include either of the following in your page<head> section, of course, in pages that you want to utilize the charts.

CdnJS

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
    <!-- Include d3.js first -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>

JsDelivr

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nvd3@1.8.6/build/nv.d3.css">
    <!-- Include d3.js first -->
    <script src="https://cdn.jsdelivr.net/npm/d3@3.5.3/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nvd3@1.8.6/build/nv.d3.js"></script>

NVD3 Local

The alternative is to download the files and house them locally, this, of course, has its benefits of not the project not needing the internet to be able to use it. Follow the steps below to both downloads, place the files and reference them in your pages.

  1. Go to https://github.com/novus/nvd3
  2. Locate the Clone or download drop down, click it and click Download ZIP.
  3. Open up the downloaded zip named nvd3-master.zip
  4. Open the /build folder.
  5. Extract/Copy the nv.d3.js file to your projects JS/Scripts directory.
  6. Extract/Copy the nv.d3.css file to your projects CSS directory.
  7. Next, create a new .js file in your projects JS directory named d3-3.5.3.js
  8. Copy the contents of this script into the newly created d3-3.5.3.js file. Or Alternatively, source the d3 v3.5.3 yourself.
  9. Now reference the files within each page you want to utilize these charts, see code block example below, and you are finished!
    <link rel="stylesheet" href="css/nv.d3.css">
    <!-- Include d3.js first -->
    <script src="js/d3-3.5.3.min.js"></script>
    <script src="js/nv.d3.js"></script>

A Quick Test

Now that you’ve got the library referenced either locally or via CDN, you should now give it a quick test to make sure it’s working. Add the following two blocks of code to the page with the library loaded.

HTML

<div id="chart">
        <svg></svg>
    </div>

JavaScript

        var data = [{
            key: "ExampleData",
            values: [{
                    "label": "This",
                    "value": 10
                },
                {
                    "label": "Tutorial",
                    "value": 20
                },
                {
                    "label": "Worked",
                    "value": 30
                },
            ]
        }]

        nv.addGraph(function () {
            var chart = nv.models.discreteBarChart()
                .x(function (d) {
                    return d.label
                })
                .y(function (d) {
                    return d.value
                });

            d3.select('#chart svg')
                .datum(data)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });

If all is well, you should have a chart rendered just like below –

example-nvd3-chart

If not, then you should check your browsers dev tools console to see if everything has been referenced correctly.

Summary

This start to the series is exactly that, simply getting set up and ready to build some amazing charts. As with every article in this series, the comments are open for general queries with the tutorial.

SHARE ON

The Author: Dan Englishby

Getting Started With NVD3.js

You May Also Like

Leave a Reply

Your email address will not be published.