d3 is great javascript library that helps you generate SVG based graphs and charts.
Over a few months I’m tasked with creating a number of different graphs and charts with an eye specifically on usability ad accessibility. The charts I am building are not particularly complex, so they make for perfect ‘how to’ articles.
Before i will get to d3, i will start with a generic outline of SVG. SVG stands for “Scalable Vector Graphics”. Basically it is a language, in many ways similar to HTML (and in fact it incorporates CSS support) to describe paths, shapes, text elements, etc…
A cool thing about SVG is that i can be a stand alone file, like a .png file would or it can be inline within a HTML file. For example i could have something like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 100">
<g transform="translate(5,5)">
<rect width="180" height="19" fill="blue"/>
<text x="160" y="10" dy=".35em" style="fill: white; font: 10px sans-serif;text-anchor: end;">2</text>
</g>
<g transform="translate(5,25)">
<rect width="270" height="19" fill="orange"/>
<text x="250" y="10" dy=".35em" style="fill: white; font: 10px sans-serif;text-anchor: end;">3</text>
</g>
</svg>
Which would look like this:
This is, of course, a super simple horizotal bar graph. But if you have some basic HTML understanding, looking at the code and seeing the results, you can guess a lot about how SVG works.
For starters everything is wrapped into a “svg” tag. There are 2 “g” elements (g stands for group) and within those elements a “rect” element and a “text” element.
Within the “text” element you can see an inline style. Just FYI, styles don’t have to be inline in SVG.
Anyway, this article is not meant to be a SVG tutorial, I just wanted to provide some basic understanding of how it works, there are plenty of SVG resources on the net. You can read more in the w3 specs page for SVG and Wikipedia has a page about it, if you want to find out more.