A node-RED inspired D3 Dashboard Gauge

node-red inspired d3 dashboard gauge

I recently works on an IoT project which involving of rendering a dashboard using node-RED. I was wondering whether I could build a node-RED inspired dashboard gauge using D3.js JavaScript library, so I built one as a side project.

About Node-RED

Node-RED is browser-based programming tool for wiring together hardware devices, APIs and online services with drag and drop of pre-configured “nodes” and wiring them together. There are programming tools with similar concepts available in the market, such as Scatch from MIT, focusing on general programming and education, or labVIEW from National Instruments for industrial applications and programming.

node-RED dashboard gauge example
A Typical node-RED Dashboard with a gauge and a line chart

What’s appealing to many Raspberry Pi users, especially those who are new to programming, are node-RED’s drag-and-drop without the need of programming in most of the time, and the well-crafted dashboard UI widgets, such as gauge, charts, etc..

customise node-RED gauge settings
Node-RED gauge configuration settings

About D3.js

D3.js or just D3, stands for Data-Driven Documents, is a JavaScript library for producing dynamic, interactive data visualisation in web browsers using SVG, HTML and CSS standards. D3.js is often rendering the data using SVG because SVG is valid HTML tags and can be easily add or remote from DOM of a web page. In fact if you look closely at node-RED gauge implementation, itself also implemented the gauge using SVG.

D3 dashboard gauge design considerations

For no better name, I called my project as D3 Dashboard Gauge. My goal for D3 Dashboard Gauge is to create a dashboard gauge that is resemble the node-RED UI gauge widget with the following design considerations:

  • a self-contain re-usable library;
  • high customisable just like the node-RED gauge for different IoT projects and sensors;
  • simple API for creating, rendering and updating the data;
  • Build with d3.js library.

Gauge Class and instantiation

I decided to wrap the entire code within a ESMAScript 2015 style JavaScript Class which can be instantiated to create a gauge or multiple of it. As a self-contain library, to use it, just referring it on your html page:

<head>
  <link rel="stylesheet" href="dist/style.min.css">
  <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
  <script src="dist/gauge.min.js"></script>
</head>

During the instantiation of the class, you could either use the default configuration settings or customise the configuration by passing in a configuration object as argument.

    
// using default configuration settings
const myGauge = new Gauge();

// customise configuration
const tempGauge = new Gauge({
    minValue: -20,
    maxValue: 50,
    lowThreshhold: 0,
    highThreshhold: 40,
    displayUnit: 'Degree Celcius'
});

The default configuration is set with an internal configobject with the following values during the instantiation of the Gauge class. The detail API documentation is available at the github page, the picture below help to visualise the meaning of each parameter.

config = {
  size : 200,
  margin : 10,
  minValue : 0,
  maxValue : 10,
  majorTicks : 5,
  lowThreshhold : 3,
  highThreshhold : 7,
  lowThreshholdColor : '#009900',
  defaultColor : "#ffe500',
  highThreshholdColor: '#cc0000',
  transitionMs : 1000,
  displayUnit : 'Value'
};
configurable d3 dashboard gauge parameter
Configurable d3 dashboard gauge parameters

Render method

D3 renders data by inserting the rendered object into a specific html tag, often specified by a html idtag.

<div class="gauge-container">
  <div id="gauge">
    <!-- D3 Dashboard Gauge to be inserted here -->
  </div>
</div>

We can render the instantiated gauge object by calling the Gauge.render()function. Multiple gauges can be added with different idtag. The #gauge-containeris styled as a flex-boxcontainer so that multiple gauges will be align side-by-side based on the viewport setting of the browser.

myGauge.render("#gauge");

Update method

To update the gauge display, you simply pass-in the new value to the Gauge.update()method.

myGauge.update(newValue);

How often you should update the display can be set using Javascript setIntervalfunction. For example, here is an demonstration code for updating the gauge with a randomly generated value at every 3 seconds.

setInterval(function() {
    myGauge.update(Math.random()*10);
}, 3*1000);

Summary

And that’s is. Is this simple enough to use it in your projects? D3 Dashboard Gauge provides an alternative to node-RED gauge if all you need a gauge for your IoT project and your prefer to write your own programming than using node-RED’s drag-and-drop programming style.

I’d love to see how you use the D3 Dashboard Gauge in your project, add a comment below and tell me how you use it.

Github Repository

D3 Dashboard Gauge is an open source project and is covered by MIT license. Github repository is available at e-tinkers github, there is also a live demo at github.iopage.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.