Diving into D3 JS

Introduction

This article is all about the basics of D3.JS, not with full details but through this you will at least get a feel and knowhow of it. In this article, I am including a base overview of this whole article, introductory part of D3.JS, some important features, procedure of creating a chart and some other details too.

Outlines

• Overview
• Introduction
• Features
• Procedure
• Chart Creation
• Demo
• Key Points
• Conclusion

Overview

As promised in my previous article that I’ll take you on a journey of D3.JS, I am here as your guide and am going to take you through this interesting ride of Data Visualization (using D3.JS). In this article, I’ll be covering its introductory part likely to be its basics and how it gets started, features, procedure, and steps of creating charts, some key points and at last conclusion of the whole journey.

SO guys, buckle up and get ready for this journey of D3.JS. This journey is fun.

Introduction

Definition | D3.JS

In very short and crispy words, we can define as:

“D3.Js is a JavaScript library that is being used for data visualization and charting.”

So what does Data Visualization mean?

Data we get from various resources like social networking, government sources, shopping portals, etc. is generally unstructured data. It can be structured, flat too. So all these types of data are neither reusable nor visualizable.

So for converting this type of rough data into some usable form or some sort of productive or understandable form can be called as Data Visualization.

Data visualization can be of these forms:

• Charts (bar, column, pie, histogram, line, donut charts, etc.)
• Diagrams (Some sort of data representation)
• Some other forms of data diagrams

Features

Some very good and handsome features of D3.JS are as follows:

Reusable

D3.JS is reusable. This is the main feature of it. You can use the same basic functionality of D3.JS in creating different type of charts. What you only need to do is make some rare changes in configuration only.

For code reusability, it uses:

• Plugins
• Components

Configurable

It is an open source project on GitHub. You are always welcome to configure it and make some changes according to the need of your project functionality.

It’s too easy to do that. It also works very fine with all the modern available browsers (Internet Explorer 8+, Chrome, Mozilla, Safari, etc.)

Composable

Composable means it can be easily composed by simple and base functions of JavaScript. So if you have knowledge of HTML, CSS and JavaScript, then you can do better.

What you need is some hands on lab and a little bit of practice.

Flexible

It’s flexible too as I mentioned in composable point. So you can always use D3.JS as per your project requirement and extend it to any level and with commonly any type of data (XML, JSON, CSV, etc.)

Some other features of D3.JS are as follows:

• Extensible
• Repeatable
• Easy to Use
• Interactive

Procedure

3 main steps of creating chart using D3.JS are shown in the below figure:

Chart Creation

First of all, we simply need to include D3.Js functionality in our snippet, for that either you can download its library from the official website or you can directly use its functionality by simply including its script source as:

<script src=http://d3js.org/d3.v2.min.js type="text/javascript"></script>

Now, I am going to mention base structure of D3.JS.

 <script>

           // Initialization
              d3.Chart("Chart_Type",
              {
              initialize function()
              {
              ----
              ----
              Do_Something;
              ----
              ----
              }
              });

          // chart rendering properties
              var mychart = d3.select(#container)
              .append("div#is")
              .chart("Chart_Type");

         // Providing data values
              myChart.draw([1,2,3,4,5]);

</script>

Demo

Here, I am presenting a partial demo of simple bar chart creation using D3.JS and am using CSV data for values.

HTML Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
     <title>Bar Chart</title>
     <meta http-equiv="X-UA-Compatible" content="IE=9">
     <link href="Style1.css" type="text/css" />

  </head>
  <body>
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <script>
        function renderChart() {

          //  var width = 1020,
          //      height = 720,
          // Attributes
            var data = d3.csv.parse(d3.select('#csv').text());
            var valueLabelWidth = 40; // space reserved for value labels (right)
            var barHeight = 20; // height of one bar
            var barLabelWidth = 100; // space reserved for bar labels
            var barLabelPadding = 5; // padding between bar and bar labels (left)
            var gridLabelHeight = 18; // space reserved for gridline labels
            var gridChartOffset = 3; // space between start of grid and first bar
            var maxBarWidth = 420; // width of the bar with the max value

            // Accessor functions
            var barLabel = function (d) { return d['Name']; };
            var barValue = function (d) { return parseFloat(d['Salary(PM)']); };

            // Scales
            var yScale = d3.scale.ordinal().domain
            (d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
            var y = function (d, i) { return yScale(i); };
            var yText = function (d, i) { return y(d, i) + yScale.rangeBand() / 2; };
            var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);

            // Svg container element
            var chart = d3.select('#chart').append("svg")
           .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
           .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);

------

[It's just a sample code snippet of that chart. For full details, check out my previous article http://www.codeproject.com/Tips/811446/Creating-Bar-Chart-using-D-JS.]

Output

Key Points

Some key points of D3.JS that you need to remember are:

• Open Source Framework
• It is a JavaScript library
• It is not a monolithic approach
• Allows code reusability
• It is a visualization library
• Used for data manipulation
• Works effectively with all the browsers
• Uses plugins and components
• We need to include:
  HTML

  <script src=http://d3js.org/d3.v2.min.js" type="text/javascript"></script>

Conclusion

I hope now you will have base information of creating a chart for data visualization using D3.JS. It's simple, reusable. For more details or tutorials, you can visit its official website that contains step wise details and description of creating different sort of charts.

Meanwhile, if you face any problems in creating charts or learning D3.Js, then feel free to ping me or message me.