JavaScript Data Visualization Tools and D3.js

Introduction

Visualizations convey information in a universal manner and make it simple to share ideas with others. Charts, Diagrams, Graphs, and Maps are the common Data visualization tools to understand the data easily and quickly. These interactive and dynamic tools are used to convey our business ideas to share with our audience and target users. There are many JavaScript Graph and Chart Libraries available, but choosing the right one for your web application has its own challenges.

This article will highlight the challenges we faced in one of our business use cases and our analysis before arriving at D3.js.

Problem Faced

• Images used to represent Graph.
• Java applets used to draw graphs which are not supported in the latest browsers.
• There was no user interaction in static Graphs.
• When data changes, we need to reload the graph for updates.
• Could not draw multiple graph types using the same data set.
• Server side code required.

Solution

There are many paid and free JavaScript libraries available to visualize data without any server side coding. After analyzing many JavaScript data visualization tools (Chart JS, Google Charts, Fusion Charts, Zing Chart, and D3.js) I realized most of them provide predefined chart options to use and customize. D3 allows you to build complex custom charts using HTML, SVG, and CSS without any additional plugins. 

JavaScript Data Visualization Tools

Chart JS

Chart.js uses HTML 5 and Canvas to render charts and polyfills to support old web browsers. It includes many chart types (Line, Bar, radar, polar, pie and doughnut, etc.,) each in its own module so we can use them per our requirements. It provides clean and flat charts, also its file size is very small. It is open-source and free to use.

Google Charts

Charts are rendered using HTML5 and SVG to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads, and Android. It provides simple line charts to complex Tree maps and also provides Zoom and PAN functions for a few chart types. It is free, but not open-source.

Fusion Chart

Fusion charts provide over 80 charts and 1000 maps, and it is a more complete solution than Google Charts. HTML 5 and SVG are used to render the graphs, and Fusion Chart also supports mobile devices. It supports a wide range of charts like spline, column, bar, maps, and angular gauges, among others. It offers 90+ chart types and 965 maps. It is best for a huge range of customizable charts. It is free for un-commercial and paid for commercial users.

Zing Chart

Zing chart offers over 100 chart types to fit your data and provides a rich API that allows you to load new data and modify existing charts. Zing Chart loads data in real time and gives you the ability to customize and use your own chart themes. It offers a great way to present your data using the refresh/feed system. It can be useful when using an external data source. It is free, but not open-source.

D3.js

D3.js is a JavaScript library to create dynamic, interactive visualizations for modern web browsers. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3.js transforms your arbitrary data tables into stunning visual graphics with the full power and flexibility of standard web languages like HTML5, CSS3, and JavaScript.

It is open-source and free to use.       

Why D3.js?  

D3.js provides you with the option to make custom charts and graphs, whereas other libraries only provide predefined charts for you to use and customize. There are many ways to visualize our data but the flexibility, versatility, and good development community surrounding D3.js makes it a great option to explore. D3 supports large data to create dynamic animations and it is extremely fast and responsive.

Below are some the key features of D3:

• Supports all modern browsers (Internet Explorer, Firefox, Safari, Chrome, and Opera) and it's free to use.
• Supports multiple layouts to build complex charts.
• Allows you to filter data on the fly.

• It can handle map integration.

• Give you the ability to update the graph when your original data set has changed.

• Give you the ability to customize the theme and colors of the graphs.

• Multiple user interface options like Zoom, Tooltip, Export, Drag-and-Drop Filter, etc.,

• Integration with AngularJs.

D3.js Sample Code to Draw Circles

var spaceCircles = [30, 70, 110];
var svgContainer = d3.select("body").append("svg")
 .attr("width", 200)
 .attr("height", 200);
var circles = svgContainer.selectAll("circle")
  .data(spaceCircles)
  .enter()
  .append("circle");

var circleAttributes = circles
   .attr("cx", function (d) {return d;})
   .attr("cy", function (d) {return d;})
   .attr("r", 20)
   .style("fill", function(d) {
     var  returnColor;
 if (d===30) { returnColor = "green"
 } else if (d ===70) {returnColor = "purple"
 }else if (d ===110) {returnColor = "red"}
 return returnColor;
   });

Result:

D3.js External Data Sources

D3 has a built-in functionality that allows you to load the below External Data Resources.

CSV (Comma separated values)

JSON

Text File

An HTML document

D3.js Built-in Layout options:

A layout encapsulates a strategy for laying out data elements visually, relative to each other. It could be as simple as stacking bars in a chart or as complex as labeling a map. Layouts take a set of input data, apply an algorithm or heuristic, and output the resulting positions/shapes for a cohesive display of the data.

Partition - recursively partition a node tree into a sunburst or icicle.

Pie - compute the start and end angles for arcs in a pie or donut chart.

Stack - compute the baseline for each series in a stacked bar or area chart.

Tree - position a tree of nodes tidily.

Treemap - use recursive spatial subdivision to display a tree of nodes.

Related Frameworks Based on D3

Dc.js is JavaScript library built on top of D3.js and it's used to help filter data on the fly.

NVD3 applies the re-usable charts and chart components from D3.js without taking away the power that D3 gives you.

D3 Limitations

The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many new users.