D3.js is a very interesting JavaScript library for manipulating documents based on data. It is a low-level framework that is helpful in creating highly-customized data visualization modules such as chart with smooth transitions and interaction.

In a recent project, I need to build a highly-customized chart with following features:

  • Display sensor signals data (large number of values!)
  • Has time selector to pan or zoom the range of displayed values
  • Highlight sections when the value is out of acceptable range (min/max thresholds)

Instead of using one of available built-in chart libraries that usually lack of capabilities in customizing/expanding a feature as you want, I decided to go with D3 - a rising star in the field of data visualization.

According to their introductionD3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation.

With a small effort, I have easily set up an area chart (link to sample):

d3 area chart

And successfully added the time selector (link to sample):

d3 chart with zoom

 

Finally, I add logic codes to process the highlighted values and interactive threshold line. The chart is completed!

d3 chart with highlighted sections

This is just my first experience with D3 framework, but the result is cool (do you agree?). I really like the framework and will definitely use D3 for upcoming graphic visualization modules.


Thanks for reading my post!

I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at

Happy working!


Other posts you may concern


Container Load Plan: showing 3D steps with animations (Three.js)

Building simple image editor with Fabric.js (Javascript HTML5 canvas library)

3D visualization programming with VTK (The Visualization Toolkit)

Stylink: An inside look of a startup social-commerce project

Stylink: Virtual dressing room for commercial purposes

Stylink: A tool for designing fashion collections

Stylink: Web-based tool for styling your hair

Some practices for setting up a clean, responsive and real-time support web project (ASP.NET)

Adding HTML editor (WYSIWYG) into ASP.NET web projects

3/N-tier for building web applications with ASP.NET MVC and .NET framework