Drawing an SVG path using D3.js

In this post I show two ways of creating a simple SVG path using D3.js:

Method 1: the path data is specified in the same way as when using raw SVG (see here for more information).

Method 2: the path data is specified using path data generator method d3.svg.line() provided by D3.js

Method 1

I am assuming that you have the skeleton HTML file with link to d3.js. Add the following script to that HTML file. Open the file in the browser and you should see:

Method 2

The same path as you see above is drawn here. But instead of specifying the path as a string, as done above, I have used the d3.svg.line() method to generate it from the given set of points. As we expected, this code also gives:

Creating SVG groups using D3.js - an example

The following piece of code gives an example of how to create SVG groups using D3.js, add graphical elements to these groups and simultaneously set attributes of elements belonging to a particular group. Scroll below to see the resulting figure.

The above code gives:

Using D3.js to draw a grid

In a previous post, entitled "Drawing a straight line with D3.js, you saw how to draw a single line. In this post, we will draw a grid, which requires us to draw multiple lines. We will see two ways of doing this:

1. The first way uses the standard for loop of JavaScript to achieve this (in addition to the technique we discussed in the previous post). It does not use any feature specific to D3.js that we did not talk about in the previous post.
2. The second way illustrates use of D3.js methods that make it possible to bind given data to graphical elements. In other words, it illustrates use of D3.js methods that add graphical elements automatically based on available data. When you are creating graphics to represent data that you already have, this approach will be more useful.

Drawing a grid using for loops and D3.js

The following code illustrates how to draw a grid using for loops. Create a DIV container in your HTML file, <div id="D3lines"></div> and add the following javascript code:

 // Select the DIV container "D3line" then
 // add an SVG element to it

 var width = 400;
 var height = 400;
 
 var lineGraph = d3.select("#D3lines")
     .append("svg:svg")
     .attr("width", width)    
     .attr("height", height); 
 
 // To draw a line use the "svg:line" element.
 // "svg:line" element requires 4 attributes (x1, y1, x2, and y2)
 // (x1,y1) are coordinates of the starting point. 
 // (x2,y2) are coordinates of the end point.
 // You also need to specify the stroke color.

 // Using for loop to draw multiple horizontal lines
 for (var j=25; j <= width-25; j=j+25) {
     lineGraph.append("svg:line")
         .attr("x1", 25)
         .attr("y1", j)
         .attr("x2", width-25)
         .attr("y2", j)
         .style("stroke", "rgb(6,120,155)")
         .style("stroke-width", 2);            
 };
 
 // Using for loop to draw multiple vertical lines
 for (var j=25; j <= height-25; j=j+25) {
     lineGraph.append("svg:line")
         .attr("x1", j)
         .attr("y1", 25)
         .attr("x2", j)
         .attr("y2", height-25)
         .style("stroke", "rgb(6,120,155)")
         .style("stroke-width", 2);            
 };

This script gives:

Note that in the for loops, the values of the line attributes (x1, y1, x2, y2) are specified when the lines are being generated.





Drawing a grid using given coordinate data to generate the line elements.

The following code illustrates how to use data that has already been created, to generate line elements. Create a DIV container <div id="D3grid_D3way"></div> and add the following script to your HTML file.

 // Select the DIV container "D3grid_D3way", then
 // add an SVG element to it
    
 var width = 400;
 var height = 400;
 
 var gridGraph = d3.select("#D3grid_D3way")
     .append("svg:svg")
     .attr("width", width)     // Set width of the SVG canvas
     .attr("height", height);   // Set height of the SVG canvas
 
 
 // the yaxiscoorddata gives the y coordinates
 // for horizontal lines ("x1" = 25 and, "x2"=width-25)
 var yaxiscoorddata = d3.range(25, height, 25);
 
 // the xaxiscoorddata gives the x coordinates
 // for vertical lines ("y1" = 25 and, "y2"=height-25)
 var xaxiscoorddata = d3.range(25, width, 25);
 
 
 // Using the xaxiscoorddata to generate vertical lines.
 gridGraph.selectAll("line.vertical")
 .data(xaxiscoorddata)
 .enter().append("svg:line")
 .attr("x1", function(d){return d;})
 .attr("y1", 25)
 .attr("x2", function(d){return d;})
 .attr("y2", height-25)
 .style("stroke", "rgb(6,120,155)")
 .style("stroke-width", 2);       
 
 
 // Using the yaxiscoorddata to generate horizontal lines.       
 gridGraph.selectAll("line.horizontal")
 .data(yaxiscoorddata)
 .enter().append("svg:line")
 .attr("x1", 25)
 .attr("y1", function(d){return d;})
 .attr("x2", width-25)
 .attr("y2", function(d){return d;})
 .style("stroke", "rgb(6,120,155)")
 .style("stroke-width", 2);

This script gives the same grid as above.

Function d3.range(start, stop, step) generates an array of numbers from start to stop (excluding stop) with the difference between the two successive numbers given by step. For example: d3.range(0,25,5) returns [0, 5, 10, 15, 20].

To understand the magic from line gridGraph.selectAll("line.vertical") onwards, I suggest you see my other post on Understanding selectAll, data, enter, append sequence in D3.js. You can also see Jerome Cukier's post on understanding selections. Jerome gives a good explanation of how data is used to create graphical elements with an example in which he creates bar charts. Go to the post and scroll down to the section entitled, "Bonus: understanding selections".

Drawing a straight line with D3.js

In this post you will see how to draw lines using D3.js. For those who have not heard about D3.js, it is a powerful JavaScript library that can be used for creating beautiful, scalable, static or interactive drawings, figures, plots, graphs, diagrams etc. in the browser. I have just started learning this library. I also have little experience in JavaScript. So, I thought creating such tutorials would make for good notes and opportunity to learn these two. The code below may not be the best code to achieve the results, nevertheless, if you are new to these things, it will certainly be helpful to get you started. I will start with the very basics.

We will first draw a simple line using D3 and then modify some its properties such as width and opacity. Note that we are actually using the D3.js to generate SVG code for drawing the line. If you don't know what SVG is, don't worry. We will pick it up as we go along.

1. Create the basic HTML file that will contain the code. Note the DIV container with id = "D3line" . We will add the line to this DIV container. Also, see the header of the file. We have linked to the D3 repository to load the D3.js script. You will need to be connected to the internet for the following to work.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Lines using D3.js</title>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    </head> 
    <body>   
        <div id="D3line"></div>
    </body>
    </html>
   

2. Now add the following D3 script after the <div id="D3line"></div> line. Here we select the DIV container D3line, add an SVG element to it, and set its height and width attributes. We assign the SVG element to a variable that we name lineGraph.

    <script type="text/javascript">
    /*Select the DIV container "D3line" and add an SVG element to it*/
    var lineGraph = d3.select("#D3line")
        .append("svg:svg")
        .attr("width", 500)   
        .attr("height", 200); 
    </script>
   

3. Now add the SVG line element to the SVG element that we added above, by adding the following script after the .attr("height", 400); line. As you can see, you need to specify four attributes to add a line: x and y coordinates of the starting point, (x1,y1), and end point x and y coordinates (x2, y2). Further, you need to specify the color for the line, which is value of the stroke element.

    // To draw a line use the "svg:line" element.
    // "svg:line" element requires 4 attributes (x1, y1, x2, and y2)
    // (x1,y1) are coordinates of the starting point. 
    // (x2,y2) are coordinates of the end point.
    // You also need to specify the stroke color.
    var myLine = lineGraph.append("svg:line")
        .attr("x1", 40)
        .attr("y1", 50)
        .attr("x2", 450)
        .attr("y2", 150)
        .style("stroke", "rgb(6,120,155)");
    

   Open the HTML file that you have so far in the browser and you should see a line such as in the following figure. Note that the origin in SVG is at the top left hand corner.

There, you are done! Before I wrap up this post, I will show how to change a couple of properties of this line. We will first increase the thickness of the line (using the stroke-width property) and then make it a little transparent (reduce its opacity) using the stroke-opacity property.

To increase the line width add:

  // Increase the line thickness/width
  myLine.style("stroke-width", 24);

This gives:

Finally, to make the line transparent add the following lines to the script.

 // Make the line a little transparent (decrease opacity)
 myLine.style("stroke-opacity", 0.6);

This gives: