SVG Lines and Rectangles

Tutorial

Straight lines and rectangles form the basis of two of the most common charts, line and bar charts. Straight lines also form the basis of chart axes and tick marks. In this section I introduce you how to create straight lines and rectangles with SVG.

How to create a line in SVG

One way to create lines in SVG is with the <line> element. The important attributes of a line element are:

• x1 - the first x coordinate
• y1 - the first y coordinate
• x2 - the second x coordinate
• y2 - the second y coordinate

An SVG line, as expected, draws a straight line between the points (x1, y1) and (x2, y2).

For example, a line from (10, 10) to (20, 15) is created like this: <line x1="10" y1="10" x2="20" y2="15"/>.

Lines come in handy for creating simple line graphs like the example below.

Here is what the SVG for those lines looks like:

<line x1="0" y1="10" x2="20" y2="20" />
<line x1="20" y1="20" x2="40" y2="10" />
<line x1="40" y1="10" x2="60" y2="80" />
<line x1="60" y1="80" x2="80" y2="90" />
<line x1="80" y1="90" x2="100" y2="20" />

Remember that SVG coordinates start from the upper-left, which is (0, 0). Meaning that y=0 is the top of the drawing.

How to create a rectangle in SVG

Rectangles are created in SVG with the <rect> element. The important attributes of the rect element are:

• width - the rectangle's width
• height - the rectangle's height
• x - the x coordinate of the left side of the rectangle
• y - the y coordinate of the top of the rectangle

For example, a rectangle with a width of 10, height of 20 starting from (20, 15) is created like this: <rect width="10" height="20" x="20" y="15"/>.

Rectangles come in handy for the popular bar chart. Let's look at one created with SVG rectangles below:

Here's the SVG for those rectangles:

<rect width="15" height="90" x="0" y="10"/>
<rect width="15" height="80" x="20" y="20"/>
<rect width="15" height="90" x="40" y="10"/>
<rect width="15" height="20" x="60" y="80"/>
<rect width="15" height="10" x="80" y="90"/>
<rect width="15" height="80" x="100" y="20"/>

This bar chart encodes the same values as the line chart, namely values with the ratios: [90, 80, 90, 20, 10, 80]. If we look at the SVG for the rectangles, namely the y attribute we notice that some math was involved in the vertical placement of the rectangles to ensure they align at the bottom like a normal bar chart. If we always set y=0, which would correspond to the top of the SVG image, then the chart would be upside down. We want the chart rectangle bottoms to be aligned at y=100. To ensure that, the rectangles start at y values that when combined with the height add up to 100.

In coming chapters, we'll see how D3.js helps with laying out this and other types of visual data. We'll also discuss how to decide between using different types of charts.

Things to do

1. Fix the bar chart below so that bottom of the bars are aligned at y=120
2. Add a horizontal axis line that starts at (10,120) and goes to (145,120)

Extra Credit

• Create a CSS class called gridLines and add horizontal gray gridlines at intervals of 20 pixels to the bar chart. Make sure the gridlines are rendered behind the bars. (Tip: use copy and paste to speed this up)

Change the code on the left. Once you've made a change, the page will render on the right.