How to make a modern dashboard with NVD3.js

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:

  1. The NVD3 JavaScript library
  2. The NVD3 CSS library
  3. 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.



from CSS-Tricks https://ift.tt/2mwKJbI

Comments

Post a Comment

Popular posts from this blog

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways. Magic Number it with viewport units If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn't break as you resize. I'd call this a magic number . In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier ( @chriscoyier ) on CodePen . This is kind of a less exotic version of fluid typography , which involves more of a sprinkling of viewport units and min/max sizes. FitText Dave Rupert's FitText is up for the job. You still need a bit of a magic number to get the sizing just right for any particular job: See the Pen Fitted Text with FitText by Ch
Read more

GLKit Tutorial for iOS: Getting started with OpenGL ES

Image
Update note : This tutorial has been updated to Swift 4.1 and Xcode 9.3 by Felipe Laso-Marsetti . The original tutorial was written by Ray Wenderlich . If you’re interested in graphics programming, chances are that you’ve read about OpenGL, which remains the most-adopted API from a hardware and software perspective. Apple has developed a framework called GLKit to help developers create apps that leverage OpenGL and to abstract boilerplate code. It also allows developers to focus on drawing, not on getting the project set up. You’ll learn how all of this works in this GLKit tutorial for iOS. GLKit provides functionality in four areas: Views and View Controllers : These abstract much of the boilerplate code that GLKit uses to set up a basic OpenGL ES (Embedded Systems) project. Effects : These implement common shading behaviors and are a handy way of setting up basic lighting, shading, reflection mapping and skybox effects. Math : Provides helpers and functions for common math
Read more

Data Structures & Algorithms in Swift Full Release Now Available!

Image
Hey, Swifties! The full release of our Data Structures & Algorithms in Swift book is now available! The early access release of this book — complete with the theory of data structures and algorithms in Swift — debuted at our conference RWDevCon 2018. Since then, the team has been hard at work creating a robust catalogue of challenges — 18 chapters in all — to test what you’ve learned and grow your expertise. The book is structured with the theory chapters alternating with the challenge chapters to keep you on track to nail down the fundamental and more advanced concepts. Why Do You Need This Book? Understanding how data structures and algorithms work in code is crucial for creating efficient and scalable apps. Swift’s Standard Library has a small set of general purpose collection types, yet they don’t give you what you need for every case. Moreover, you’ll find these concepts helpful for your professional and personal development as a developer. When you interview for a softw
Read more