NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations.
For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post.
Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time.
Real-world use case: A data dashboard
Dashboards can be used for pretty much anything. As long as you’ve got data to analyze, you’re good to go, whether that be some sales data or the average weather for the last 20 years. Let’s build something like this:
See the Pen Dashboard NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Setting up the environment
To setup an NVD3 chart, we require three things:
- The NVD3 JavaScript library
- The NVD3 CSS library
- The D3.js library (a dependency for NVD3)
All of these are available through Cloudflare’s CDN network. Here’s an HTML template with all those resources ready to go:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Making a Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
</head>
<body>
</body>
</html>Data sources
For this tutorial, I thought using some raw, factual data that’s already been formatted into JSON would be easiest. I’m using two sources of information: one about global average temperatures over time and the other reporting world population statistics. I’ve already formatted the data into JSON, so it’s ready to copy and paste!
Creating a line chart
Let’s go ahead and create a line chart with some global temperature data. The raw data I’ve put together in JSON represents the last twenty years of temperature changes compared to the global average.
First, we’ll add a placeholder element for the chart to attach to when the JavaScript is executed.
<div id="averageDegreesLineChart" class='with-3d-shadow with-transitions averageDegreesLineChart'>
<svg></svg>
</div>Then add the following JSON in some script tags before the </body> tag:
var temperatureIndexJSON = [
{
key: "Temp +- Avg.",
values: [{ "x": 1998, "y": 0.45 }, { "x": 1999, "y": 0.48 }, { "x": 2000, "y": 0.5 }, { "x": 2001, "y": 0.52 }, { "x": 2002, "y": 0.55 }, { "x": 2003, "y": 0.58 }, { "x": 2004, "y": 0.6 }, { "x": 2005, "y": 0.61 }, { "x": 2006, "y": 0.61 }, { "x": 2007, "y": 0.61 }, { "x": 2008, "y": 0.62 }, { "x": 2009, "y": 0.62 }, { "x": 2010, "y": 0.62 }, { "x": 2011, "y": 0.63 }, { "x": 2012, "y": 0.67 }, { "x": 2013, "y": 0.71 }, { "x": 2014, "y": 0.77 }, { "x": 2015, "y": 0.83 }, { "x": 2016, "y": 0.89 }, { "x": 2017, "y": 0.95 }]
}
];The x value is the year and they value is the temperature in Celsius degrees.
The last piece to the puzzle is the most important function that creates the chart. The function named nv.addGraph() is the main function used throughout NVD3 and, within it, you initialize the chart object. In this example, we are using the lineChart object which can have methods chained to it, depending on what the visual requirements may be.
Check out the JavaScript comments to see the which each line does.
nv.addGraph(function () {
var chart = nv.models.lineChart() // Initialise the lineChart object.
.useInteractiveGuideline(true); // Turn on interactive guideline (tooltips)
chart.xAxis
.axisLabel('TimeStamp (Year)'); // Set the label of the xAxis (Vertical)
chart.yAxis
.axisLabel('Degrees (c)') // Set the label of the xAxis (Horizontal)
.tickFormat(d3.format('.02f')); // Rounded Numbers Format.
d3.select('#averageDegreesLineChart svg') // Select the ID of the html element we defined earlier.
.datum(temperatureIndexJSON) // Pass in the JSON
.transition().duration(500) // Set transition speed
.call(chart); // Call & Render the chart
nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
return;
});See the Pen Line Chart NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Creating two bar charts for the price of one
You will love the minimal effort of these next two charts. The power of NVD3.js enables switching between chart types. You can either have the toggle active so users can switch between a standard bar chart or a stacked bar chart. Or you can force the chart type and make it unchangeable.
The following examples show exactly how to do it.
Stacked multi-bar chart
You know those bar charts that stack two values together in the same bar? That’s what we’re doing here.
<div id="worldPopulationMultiBar" class="with-3d-shadow with-transitions worldPopulationMultiBar">
<svg></svg>
</div>var populationBySexAndCountryJSON =[{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of America","value":157464952.272},{"label":"Indonesia","value":125682412.393},{"label":"Brazil","value":98578067.1},{"label":"Pakistan","value":93621293.316},{"label":"Nigeria","value":88370210.605},{"label":"Bangladesh","value":79237050.772},{"label":"Russian Federation","value":65846330.629},{"label":"Japan","value":61918921.999}]},{"key":"Female","color":"#1f77b4","values":[{"label":"China","value":667843070.834},{"label":"India","value":604783424.868},{"label":"United States of America","value":162585763.728},{"label":"Indonesia","value":124183218.607},{"label":"Brazil","value":101783857.9},{"label":"Pakistan","value":88521300.684},{"label":"Nigeria","value":85245134.395},{"label":"Bangladesh","value":77357911.228},{"label":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];
nv.addGraph(function ()
{
var chart = nv.models.multiBarChart()
.x(function (d) {
return d.label; // Configure x axis to use the "label" within the json.
})
.y(function (d) {
return d.value; // Configure y axis to use the "value" within the json.
}).margin({top: 30, right: 20, bottom: 50, left: 85}) // Add some CSS Margin to the chart.
.showControls(false) // Turn of switchable control
.stacked(true); // Force stacked mode.
chart.xAxis.axisLabel('Countries'); // add label to the horizontal axis
chart.yAxis.tickFormat(d3.format('0f')); // Round the yAxis values
d3.select('#worldPopulationMultiBar svg') // Select the html element by ID
.datum(populationBySexAndCountryJSON) // Pass in the data
.transition().duration(500) // Set transition speed
.call(chart); // Call & Render chart
nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
return;
});The two important settings in the JavaScript here are the .showControls and .stacked booleans. They both do what they say on the tin: force the graph to a stacked bar chart and don’t allow switching of the chart type. You will see what I mean by switching soon.
See the Pen Multi StackedBar NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Standard multi-bar chart
Now, let’s do something a little more traditional and compare values side-by-side instead of stacking them in the same bar.
This uses pretty much the same code as the stacked examples, but we can change the .stacked boolean value to false. This will, of course, make the stacked bar chart a normal bar chart.
<div id="worldPopulationMultiBar" class="with-3d-shadow with-transitions worldPopulationMultiBar">
<svg></svg>
</div>var populationBySexAndCountryJSON = [{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of America","value":157464952.272},{"label":"Indonesia","value":125682412.393},{"label":"Brazil","value":98578067.1},{"label":"Pakistan","value":93621293.316},{"label":"Nigeria","value":88370210.605},{"label":"Bangladesh","value":79237050.772},{"label":"Russian Federation","value":65846330.629},{"label":"Japan","value":61918921.999}]},{"key":"Female","color":"#1f77b4","values":[{"label":"China","value":667843070.834},{"label":"India","value":604783424.868},{"label":"United States of America","value":162585763.728},{"label":"Indonesia","value":124183218.607},{"label":"Brazil","value":101783857.9},{"label":"Pakistan","value":88521300.684},{"label":"Nigeria","value":85245134.395},{"label":"Bangladesh","value":77357911.228},{"label":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];
nv.addGraph(function () {
var chart = nv.models.multiBarChart()
.x(function (d) {
return d.label; // Configure x axis to use the "label" within the json.
})
.y(function (d) {
return d.value; // Configure y axis to use the "value" within the json.
}).margin({top: 30, right: 20, bottom: 50, left: 85}) // Add some CSS Margin to the chart.
.showControls(false) // Turn of switchable control
.stacked(false); // ***Force normal bar mode.***
chart.xAxis.axisLabel('Countries'); // add label to the horizontal axis
chart.yAxis.tickFormat(d3.format('0f')); // Round the yAxis values
d3.select('#worldPopulationMultiBar svg') // Select the html element by ID
.datum(populationBySexAndCountryJSON) // Pass in the data
.transition().duration(500) // Set transition speed
.call(chart); // Call & Render chart
nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
return;
});The one change to the settings presents us with a brand-new looking chart.
See the Pen Multi Bar NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Using one code set with minimal changes, you just created two epic charts for the price of one. Kudos for you!
There is one last setting, of course, if you want the functionality of switching charts. Change the .showControls to true and remove the .stacked option. You will notice some controls at the top of the chart. Clicking them will toggle the view between a stacked and standard chart.
See the Pen Multi Bar Switchable NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Making a dashboard
There’s nothing I love looking at more in the world of web development than dashboards. They never get old and are super good looking. By using the charting techniques we’ve already covered, we can make our own responsive dashboard on a single webpage.
If you remember within the JavaScript snippets earlier, there was a function set with a listener against each chart: nv.utils.windowResize(chart.update);
This magical function, resizes the chart for you as if it was set to width: 100% in CSS. But it doesn’t just shrink, but also moves and restructures the graph according to the size of the screen. It’s pretty awesome! All we need to worry about it are the heights. We can set this up by applying flexbox to the classes assigned to chart elements.
Let’s bundle everything we have so far into one dashboard by wrapping each chart element in a flexbox container. Apply a small amount of CSS for the flexing and height, and finally, compile all the scripts into one (or, you can keep them separate in your own project).
See the Pen Dashboard NVD3.JS by Danny Englishby (@DanEnglishby) on CodePen.
Summary
This tutorial will hopefully give you the knowledge to get started with building data visualizations and, ultimately, add them into a production dashboard. Even if you only want to play with these concepts, I’m sure your mind will start running with ideas for how to transform different types of data into stunning visuals.
The post How to make a modern dashboard with NVD3.js appeared first on CSS-Tricks.
Source: CSS-tricks.com