Post
Ask Question

Diving Into D3 JS

Introduction 

 
This article is all about the basics of D3.JS, not the full details but thorough enough to provide at least a feeling and fundamental understanding of it. In this article, I am including a basic overview of this entire subject, an introductory part of D3.JS, some important features, the procedure for creating a chart, and some other details too. 
 
Outlines
  • Overview
  • Introduction
  • Features
  • Procedure
  • Chart Creation
  • Demo
  • Key Points
  • Conclusion 
Overview
 
As I promised in my previous article, I'll take you on a journey of D3.JS. I am here as your guide and will 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 is started, its features, the procedure for creating charts, some key points and finally the conclusion of the entire journey.
 
SO guys buckle up and get ready for this journey of D3.JS. This journey is fun.
 

Definition | D3.JS

 
In very short and crispy words we can define D3.JS as:
 
“D3.Js is a JavaScript library that is being used for data visualization and charting.”
 

So what does Data Visualization mean?

 
Data Visualization is data we get from various resources like social networking, government sources, shopping portals and so on and is generally unstructured data. It can be structured or flat. So all these types of data is neither reusable nor visualizable.
 
So converting this type of rough data into some usable form or some sort of productive or understandable form is called as Data Visualization.
 
Data visualization can be any of the following forms.
 

Charts

 
Bar, column, pie, histogram, line, donut charts and so on.
 

Diagrams

 
Some sort of data representation.
 

Other forms of data diagrams

 
Something else.
 

Features

 
Some very good and handsome features of D3.JS are as follows:
 
handsome features of D3 JS
  • Reusable
     
    D3.JS is reusable. This is the main feature of it. You can use the same basic functionality of D3.JS in creating various types of charts. What you only need to do is make some rare changes in a 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 you and depending on the needs of your project functionality.
     
    It's too easy to do that. It also works very fine with all the modern available browsers (IE 8+, Chrome, Mozilla, Safari, and so on).
     
  • Composable
     
    Composable means it can be easily composed of simple and base functions of JavaScript. So if you have knowledge of HTML, CSS, and JavaScript then you can do better.
     
    What you need are some hands-on labs and a little practice.
     
  • Flexible
     
    It's flexible too as I said in the composable point. So you can always use D3.JS as you need to for your project requirements and extend it to any level and with any type of common data (XML, JSON, CSV, and so on).
     
    Some other features of D3.JS are as follows:
     
    • Extensible
    • Repeatable
    • Easy to Use
    • Interactive 
Procedure
 
The 3 main steps of creating a chart are using D3.JS as shown in the following figure:
 
steps of creating chart using D3 JS
 

Chart Creation

 
First of all, we simply need to include D3.Js functionality in our snippet, for that either you can download its a library from the official website or you can directly use its functionality by simply including its script source as:
  1. <script src=http://d3js.org/d3.v2.min.js type=”text/javascript”></script>   
Now for the structure of D3.JS.
  1. <script>    
  2.     
  3.             // Initialization    
  4.                d3.Chart("Chart_Type",     
  5.                {    
  6.                initialize function()    
  7.                {     
  8.                ----    
  9.                ----    
  10.                Do_Something;    
  11.                ----    
  12.                ----    
  13.                }    
  14.                });    
  15.     
  16.            // chart rendering properties    
  17.                var mychart = d3.select(#container)    
  18.                .append("div#is")    
  19.                .chart("Chart_Type");    
  20.     
  21.           // Providing data values    
  22.                myChart.draw([1,2,3,4,5]);    
  23.     
  24.  </script>   
Demo
 
bar chart creation using D3 JS
 
Here I am providing a partial demo of a simple bar chart creation using D3.JS and I am using CSV data for the values.
 
HTML Snippet
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
  2. <html>    
  3.   <head>    
  4.      <title>Bar Chart</title>    
  5.      <meta http-equiv="X-UA-Compatible" content="IE=9">    
  6.      <link href="Style1.css" type="text/css" />    
  7.          
  8.   </head>    
  9.   <body>    
  10.     <div id="chart"></div>    
  11.     <script src="http://d3js.org/d3.v2.min.js"></script>    
  12.     <script>    
  13.         function renderChart() {    
  14.     
  15.           //  var width = 1020,    
  16.           //      height = 720,    
  17.           // Attributes     
  18.             var data = d3.csv.parse(d3.select('#csv').text());    
  19.             var valueLabelWidth = 40; // space reserved for value labels (right)    
  20.             var barHeight = 20; // height of one bar    
  21.             var barLabelWidth = 100; // space reserved for bar labels    
  22.             var barLabelPadding = 5; // padding between bar and bar labels (left)    
  23.             var gridLabelHeight = 18; // space reserved for gridline labels    
  24.             var gridChartOffset = 3; // space between start of grid and first bar    
  25.             var maxBarWidth = 420; // width of the bar with the max value    
  26.     
  27.             // Accessor functions     
  28.             var barLabel = function (d) { return d['Name']; };    
  29.             var barValue = function (d) { return parseFloat(d['Salary(PM)']); };    
  30.     
  31.             // Scales    
  32.             var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);    
  33.             var y = function (d, i) { return yScale(i); };    
  34.             var yText = function (d, i) { return y(d, i) + yScale.rangeBand() / 2; };    
  35.             var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);    
  36.     
  37.             // Svg container element    
  38.             var chart = d3.select('#chart').append("svg")    
  39.            .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)    
  40.            .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);   
(It's just a sample code snippet of that chart. For the full details check out my previous article.)
 
http://www.codeproject.com/Tips/811446/Creating-Bar-Chart-using-D-JS
 
Output
 
CSV data for values
 
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
       
      <script src=http://d3js.org/d3.v2.min.js” type=”text/javascript”></script>

Conclusion

 
I hope you now have a basic understanding of creating a chart for data visualization using D3.JS. it's simple and reusable. For more details or tutorials you can visit its official website that contains the detailed steps and a description of creating various sorts of charts.
 
Meanwhile, if you experience any problem creating charts or learning D3.Js then feel free to ping me or message me.


Similar Articles