Saturday, December 31, 2011

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:

11 comments:

  1. Thanks! Very useful for a newbie like me :)

    ReplyDelete
  2. Very few d3js tutorials out there that are noob friendly! Thanks for posting!

    ReplyDelete
  3. Thanks for the comments. When I hear that someone has found them helpful, it motivates me to write more of them.

    ReplyDelete
  4. 2. Line 5 width not widht

    Thank you very usefull

    ReplyDelete
  5. A lot of tutorials are like "lol it's easy, just do all of this *pastes a shittonne of code* Now if you want to add gravity to your graph and inter-dimensional space travel, then just add this function which is the only thing I'll explain in detail." And you're left there wondering why your line won't draw :/ ...so thank you :3

    ReplyDelete
  6. Hi, Just wanted to add my vote of appreciation for this little tutorial. I'm another new chum looking for a way to get started. Thanks, and I hope you'll do more.

    Dave.

    ReplyDelete
  7. Thanks to all of you for leaving these comments. Feels good to know that folks are finding these helpful.

    ReplyDelete
  8. Greetings! What's your opinion on who is your blog's average reader?

    ReplyDelete
  9. Thank you for the post. Very helpful to those of us new to d3.

    ReplyDelete
  10. awesome!!. It really helped me out of the jam. Please keep it up.

    ReplyDelete