How to add grid lines to d3js chart

In my previous blog post I have explained how to add multiple lines to the d3.js line chart with an example. But, if you check them carefully then you can notice that, I have not added any grid lines in any of the examples. I recommend to read my previous post before continue reading this article for better understanding of the code but it's not mandatory. So, lets check how easy is to add the grid lines to x and Y axis in d3.js charts. I have already prepared one sample on jsfiddle, please have a look at it first and then I will explain the code block to generate the grid lines.

Sample Code - D3.js chart with grid lines on X & Y Axis

In above example, I have used the method "innerTickSize" to generate the grid lines on X-axis. Have a look at the below code sample to learn how innerTickSize method works. The parameter to this method during the generation of x-Axis is nothing but the height of the vertical grid lines and during the generation of y-axis its as equal as the width of horizontal grid lines.

In both the cases we can make use of svgConfig.height and svgConfig.height variables. For X-Axis I have used random number 56, but you can configure this number as svgConfig.padding as well.

//let's create the axes using the scales with grid lines
xAxis = d3.svg.axis()
 .scale(xScale)
 .tickFormat(d3.format("d"))
        .innerTickSize(-(svgConfig.height-56)); 
   
yAxis = d3.svg.axis()
 .orient("left")
 .scale(yScale)
        .innerTickSize(-svgConfig.width);

Next > Learn to add tooltip to the chart

Learn to create multi-line chart using d3.js with example

In this post I am going explain how can we use D3.js charting library to generate multiple lines chart with the simple example. Before you continue reading this post, I recommend to check my previous blog post to learn simple line chart using D3.js. Most of the common steps like SVG configuration, document data preparation is explained in detail in the previous post itself. As these initial steps are common while making any chart so I don't want to copy that part in this post.

See it before you learn it

1. Initial setup
Initial setup is exactly same as my previous blog post. So you can simply copy the complete code block from previous example and run it in your browser. This will show you the single line with X and Y axis. We will do the following changes in this existing code to make it multiple line charts.

2. Let's update the data for second line
In order to add the second line to our example, we will have to update "chartConfig" object. Object have only one array "data". This array is used to map the first line in our graph. As we need to add the second line, I will simply add one more array to this object "data2". So our new object will look as follows.

var chartConfig = {
data:[{
   "sale": "202",
   "year": "2000"
  }, {
   "sale": "215",
   "year": "2001"
  }, {
   "sale": "179",
   "year": "2002"
  }, {
   "sale": "199",
   "year": "2003"
  }, {
   "sale": "134",
   "year": "2003"
  }, {
   "sale": "176",
   "year": "2010"
  }],
data2:[{ 
 "sale": "200", 
 "year": "2000" 
  }, { 
 "sale": "180", 
 "year": "2001" 
  }, { 
 "sale": "195", 
 "year": "2002"
  }, { 
 "sale": "200", 
 "year": "2003"
  }, {
 "sale": "176", 
 "year": "2004"
  }, { 
 "sale": "196", 
 "year": "2010"
}]
 };

3. Let's add code to render second line
Above step is to keep the data ready to render the second line. Now as we have our data ready, we can simply use the similar code block to add the second line just by passing the new data object. Just add the below code block at the end of existing code.

// append second line to svg
 svgSelection.append("svg:path")
  .attr('d', lineSelection(chartConfig.data2))
  .attr('stroke', 'red')
  .attr('stroke-width', 2)
  .attr('fill', 'none');  

I have done only following two changes in earlier code to generate the line on SVG element.

• I have pass new data array "chartConfig.data2" to lineSelection method.
• Set the line stroke property to red so we can identify new line easily.

Output

To create multiple line chart you can simply create multiple data arrays and configure the above code block per line. This is simple and easiest code to generate multiple line chart using D3.js, please give your feedback and suggestions in the comment box below.

Next > How to add grid lines to chart

PHP script to import CSV data to MySQL table

While populating the database, many time we come across the situation where we need to use old backups in different file formats. It's not necessary that every time you will get the data in .sql format. While working on one of my latest PHP application, I had to use Excel & CSV files to dump one of my MySQL table. So I thought of sharing the script on my blog. So lets learn how to dump mysql database with the data from CSV file with an example.

Step 1 - Create MySQL database connection
Let's first create a connection to database using following code.

    // Open a connection to your MySQL database
    $host        ='localhost';  // Host Name.
    $db_user     = 'root';      //User Name
    $db_password = 'root';      //Password
    $db          = 'test';      // Database Name.

    $conn        = mysql_connect($host,$db_user,$db_password) 
                   or die (mysql_error());

    mysql_select_db($db) or die (mysql_error());

Step 2 - Read from file(CSV) & inserting in to database
Once the database connection is created and the database is selected we can simply use the following code to read the csv file. I have used the php method fgetcsv() to accomplish our job. PHP have many file reading methods but the benefit of using this method is it's capability to parse the CSV fields and returns an array. So our job becomes easy as we get one array per CSV file row.

$filename = '/path/to/file.csv';
 
// check file size here
if($filename!='' && filesize($filename)>0)
 {
 // to deal with Mac line endings
 ini_set('auto_detect_line_endings',TRUE);
  
 $file = fopen($filename, "r");
  
 while (($csvData = fgetcsv($file, 2000, ",")) !== FALSE)
 {
  $sql = "INSERT INTO 
              tableName 
          (`field1`,
           `field2`,
           `field3`,
           `field4`) 
              VALUES 
          ('".$csvData[0]."', 
           '".$csvData[1]."',
           '".$csvData[2]."',
           '".$csvData[3]."');
         ";
   mysql_query($sql);
 }
        
 fclose($file);

 ini_set('auto_detect_line_endings',FALSE);
  
 echo 'CSV File has been successfully Imported'; 
 }
 else{
   echo 'Invalid File:Please Upload CSV File';
 }

If you read the code carefully, you can notice the use of auto_detect_line_endings directive is set to TRUE before reading the CSV file. This is recommended practice by php.net while using fgetcsv() method.

Sample code for creating simple line chart using D3.js

In my previous blog post I have explained about SVG and its coordinate system. To start coding line chart visualizations in D3.js it's very important to have some basic knowledge of SVG, so if you are not aware of the SVG elements then please spend some time to read my previous blog post.


See it before you learn it.

Lets Start writing your first line chart visualization. Before we actually start writing the visualization lets spend some time to understand how to include the D3.js library in your HTML page and then about creating the skeleton of the visualization.

1. Include D3.js library
Including the library and setting up the skeleton is kind of common task while creating multiple visualizations. You can download the D3.js library from github or you can also use it directly from CDN. Let's first include the library in our HTML page.

<!DOCTYPE html> 
<html> 
<head> 
  <script type="text/javascript" src="d3.min.js"></script>
</head> 
<body> 
  <p> line chart using D3.js</p> 
</body> 

2. Create data for chart
I am going to use following data for this chart. You can update this data as well as its format if its required.

var chartConfig = {
data:[{
   "sale": "202",
   "year": "2000"
  }, {
   "sale": "215",
   "year": "2001"
  }, {
   "sale": "179",
   "year": "2002"
  }, {
   "sale": "199",
   "year": "2003"
  }, {
   "sale": "134",
   "year": "2003"
  }, {
   "sale": "176",
   "year": "2010"
  }]
};

3. Configure SVG element
As I mention SVG is the basic of visualizations so first of all, we have to configure and append the SVG element to the page body. Please have a close look att the below sample code & note the attributes which are set in "svgConfig" object.

"width", "height" & "margin" are basic and important attributes which we have to set. In below example, I am creating the SVG element of size 300 X 600. You can configure these properties as per your requirement.

var svgConfig = {
 id:"mySvg",
 width:600,
 height:300,
 margin : {
  top: 20,
  right: 20,
  bottom: 20,
  left: 50
   }
 };

Now lets add the SVG element to the document.

var bodySelection = d3.select("body");

var svgSelection  = bodySelection.append("svg")
        .attr("id", svgConfig.id)
        .attr("width",svgConfig.width)
        .attr("height",svgConfig.height);

You can run your HTML page in browse and check the source. you should be able to see the SVG element created with the mentioned height and width. If you are not able to see the same then please check the code again and follow the steps until you get your SVG ready.

4. Create X & Y Scale
Once your SVG element is ready and appended to document body we can start creating X and Y scales for our chart. D3.js supports quantitative scale as well as oridinal scale. As this is our first example we can start with simple quantitative scale. Each D3.js scale is nothing but a function which transfers domain in to range. We will learn these terms in detail as we move in detail with D3.js. So for now just proceed with the following code block.

xScale = d3.scale.linear()
           .range([
               svgConfig.margin.left, svgConfig.width - svgConfig.margin.right
            ])
            .domain([
               d3.min(chartConfig.data, function(d) {return +d.year;}),
               d3.max(chartConfig.data, function(d) {return +d.year;})
            ]);

Range & Domain - The values which we have passed to range method are nothing minimum and maximum plottable area for X-axis. Similarly, if you check the values passed to the domain method are nothing but minimum and maximum points to be plotted on X-axis. So the scale is the method which will transform the domain into range within given boundaries.
Similarly, we have to create Y Scale. Have a look at the following code & try to understand the parameters for range and domain methods.

yScale = d3.scale.linear()
           .range([
                 svgConfig.height - svgConfig.margin.top, 
                 svgConfig.margin.bottom
            ])
           .domain([
               d3.min(chartConfig.data, function(d) {return +d.sale;}),
               d3.max(chartConfig.data, function(d) {return +d.sale;})
            ]);

5. Create X & Y axis
Once X & Y scales are created we can use those objects to create X & Y Axis. D3.js provides a method (d3.svg.axis) to add vertical and horizontal axis on svg element.

xAxis = d3.svg.axis()
  .scale(xScale);

yAxis = d3.svg.axis()
  .orient("left")
  .scale(yScale);

Let's add X axis to the chart.
After running following code it will add the X-axis at the top of the SVG element. After this step you can run the script on browser and have a look at the location of the X axis on your chart. In next step we will transform it to it's correct position which is nothing but at the bottom of the chart area.

svgSelection.append("svg:g")
.attr("id","xAxis")
.call(xAxis);

Output

Let's transform X axis to its correct position.
As I mention in my earlier posts that SVG 0,0 points starts from top left instead of top-bottom, the above X-axis will get plotted at the top of the chart. In next step we will bring it to its correct position. There are many alternative ways of plotting the X-axis but I am trying to explain it in detail so you will understand the core D3.js. Now try below code and again run your code in the browser.

d3.select("#xAxis")
.attr("transform", "translate(0," + (svgConfig.height - svgConfig.margin.bottom) + ")");

Above line is nothing but an example of use of the transform property which is set using attr method of the D3.js. Kindly note the parameters passed to this method. Its translating the axis from 0 to SVG height - margin.

Output

Now lets add Y axis to the chart

// add yaxis to chart, but this will not add it to correct oorientation
svgSelection.append("svg:g")
.attr("id","yAxis")
.call(yAxis);
 
// apply transform logic to bring it to correct place
d3.select("#yAxis")
.attr("transform", "translate(" + (svgConfig.margin.left) + ",0)")   

After adding X and Y axis to the chart, please check your browser and it should look like below image.

6. As our axis and scales are ready, let's plot the points.
In first step, we have created a data object for our chart. This data object is nothing but the points which we need to plot on our chart. After that we have created scales and axis for our chart. This is called as initial setup for your chart. Once this is done you can start writing code for plotting the data points.

As this example is to help you to learn how to draw the simple line chart using D3.js, we have to use line function of d3.svg. Checkout the following code to learn how can we generate line using D3.js.

var lineSelection = d3.svg.line()
   .x(function(d){
    return xScale(d.year);
   })
   .y(function(d){
    return yScale(d.sale)
   });

Finally apppend the line object to our SVG element by using append method.
Following sample code will append the line created in above step. attr is the D3.js method which allows us to set multiple line parameters like stroke, stroke-width, fill etc. There are many other properties which are related to line object, you can check the documentation section of D3.js to find details of all of them.

svgSelection.append("svg:path")
 .attr('d', lineSelection(chartConfig.data))
 .attr('stroke', 'green')
 .attr('stroke-width', 2)
 .attr('fill', 'none');

Output

Next > Learn to create multi-line chart using D3.js

Semantic way of giving caption to an image in HTML5

Whenever there is an image on our website, it's always a great idea to have a relevant and appropriate image caption. If we check websites where images play an important role as a part of the main content, then image caption is a compulsory element for such websites.

News websites, magazine sites, modeling, art and photography related websites have lots of image contents. An Image caption is equally important element for such websites to help users understand the details of image very quickly.

Difference between <img> & <figure> elements

So how do we do it in HTML?
An old & unstructured way of giving a caption to an image does not have any disadvantages as such but it was not a semantic way. Following is one of the old ways of creating image element with a caption. Developers usually give some class to an image and DIV tag so it will get proper alignment and finally appears as an image caption.

  <img src="imagename.jpg" class="classname" />
  <div>This is image caption</div>

Improved & Semantic way to give image caption in HTML5.
So is there any standard way to write these elements to your browser? Yes, HTML5 is the answer to your question. All of us know that HTML5 have really come up with lots of new tags and features, but it's still not completely adapted and many of its newly added elements and attributes are not used. <figure> - Yes I am talking about this newly added element which is used for adding captions to images in an semantic way. So lets take a look at new way of writing this element.

 <figure>
    <img src="imagename.jpg" class="someClass" />
    <figcaption>
        <p>This is an image caption in Semantic way :)</p>
    </figcaption>
 </figure>

The sameple above shows the use of newly created HTML5 elements <figure> & <figcaption>. Use of these two elements is collectively called as semantic way of integrating image captions. You can use above code sample in your next projects.
Happy HTML5:)

Understanding SVG coordinate systems with an example

Before we start learning the generation of data visualizations with d3.js, lets spend some time to understand what is SVG and how does the coordination system works.

What is SVG?

• SVG stands for Scalable Vector Graphics.
• SVG is used to create different shapes that can be used in HTML or independently as graphics.
• Using SVG we can draw shapes like circle, rectangles, curved lines, animations etc.
• The most important part about using SVG is that it is scalable.
• If we scale images, they can become pixelated or too sharp.
• In case of SVG, the graphics scale well therefore making it a good choice for graphs for screens with varying dimensions.
• Let’s see some simple examples using SVG.

SVG coordinate system

Please check above image and try to understand the difference between regular coordinate system and SVG coordinate system. One very important thing to notice is the locatoin of 0,0 coordinate. In gerular system its always at bottom left corner but in SVG system its at top left corner.

Let's learn this in detail with an example.

• Create an empty HTML document and keep adding SVG elements as mentioned below
• Add SVG element and give it height and width
• Add a rectangle giving it `x`, `y`, ` width ` ,`height` and `fill`
• Add a circle giving it `r`, `cx`, `cy` and `fill`

Your code should look like below image.

Save it as .html file and run in your favourite browser. You should be able to see something similar as below image.

Important points to remember

• x starts from left corner and goes to the right.
• So x=10 means 10 pixels to the right of the left edge
• And x=-10 will mean 10 pixels to the left of the left edge.
• y starts from the top and goes downwards.
• So y=10 means 10 pixels below the top edge
• And y=-10 will mean 10 pixels above the top edge

If you have any doubts or any query related to above example please put your comments and I would love to resolve your queries. Next post will be a example of data visualization using D3.js.

Next > Learn simple line chart using d3.js

Why d3js is best data visualization framework

As we all have learned about "Data Visualizations" in my previous blog, lets start learning the best way to generate and integrate them in web applications.

Data visualizations can be developed and integrated in regular web & even mobile applications using different JavaScript frameworks. In this blog post I would like to highlight the use of D3.js and it's comparison in terms of creating data visualizations.

What is D3.js
D3.js is a simple JavaScript based framework which is used to generate any type of data visualizations with the help of SVG ( Scalable Vector Graphics ) or canvas HTML element.

Why D3.js is better than other charting libraries

• Free for even commercial use under BSD licence.
• Highcharts is one of the alternative but it's a paid for commercial use.
• Prefuse and flare – need extra browser plugin.
• D3.js has open source community with lots of code samples.
• As its widely used for charting so its Hireable skill :) - Check job availability here

Advantages of D3.js over other charting libraries

• Open Source
• Powerful Visualization
• Interaction techniques
• DOM manipulation
• Freedom to design the right visual interface
• Works without any plugin like other libraries
• D3.js helps you bring data to life using SVG, Canvas and HTML
• You can also integrate transitions of different SVG elements very easily

Summery
D3.js is one of the best data visualization framework and it can be used to generate simple as well as complex visualizations along with user interaction and transition effects. In my next blog I will try to explain how we can use D3.js to generate a visualization with an example.

Next > Understanding SVG coordinate systems