HTML5 Data Visualizations "“ Part 2 "“ An Introduction to SVG

Note: I will be presenting a talk on data visualization in HTML5 on February the 14th at the Calgary .net user group. Keep an eye onhttp://www.dotnetcalgary.com/ for details. This blog is one in a series which will make up the talk I will be giving.

In part 1 we took a look at canvas vs SVG for building graphs and data visualizations. We decided that SVG would probably be better for our purposes. We can build up SVGs by hand or by using a library like jQuery after all they are simply part of the DOM. If you remember SVGs are made up of a series of simple shapes. So let’s build a few little visualizations with SVG. How about a bar chart to start with? A bar chart is made up of a series of rectangles of various different heights.

First thing we need to do is include the SVG in the page. This can be done a number of ways. You can link to an .svg file, you can put it in an iframe or you can embed it directly on the page. I like embedding on the page as it saves a server trip. Now unfortunately the blogging platform I’m using doesn’t support SVG, so I’ll put in raster images instead of the SVG. There are some potential security issues with SVG so that is likely the reason the platform doesn’t support them. These issues will be ironed out just as security issues with HTML were ironed out years ago.

To start with we need to include an svg tag in the document and give it a few instructions

This renders a single bar of our bar chart. The code is pretty easy to understand. The recttag creates s rectangle with a width of 50 and a height of of 150 offset 20 pixels from the top left corner of the SVG. It looks like this:

Weeee! Okay so what next? Let’s build up the SVG necessary for a full graph. We’re going to need a few bars as well as a legend and an axis. Let’s start with a few bars

Here we’ve just added a few more rectangles and reduced the height of each. Because the origin (0,0) is in the top left we also have the change the y value for each bar. This generates

Now let’s add the axes. To do this we add a couple of lines to our SVG

We’re almost done here. Let’s add some labels and a title.

Here you can see we’re adding a series of X and Y axis labels as well as the title. Placing text in SVG so it looks nice in relation to the other elements is difficult. If we were programatically adding elements to the SVG we could calculate the length of the text and position it properly.

Now we have a full graph with a title, labels and the introduction of a kick-ass new month. I’m also comforted to know that there is always at least two monsters under the bed. It is when there is only one they get board and devour your young. True story.

All together the code looks like

In the next post we’ll look at using some libraries to make our job easier.