Shapes and Colours

In this section we will go over basic SVG shapes and how to create them using D3.js

Shapes - Circle

In order to make the process of drawing a circle in two steps you must simply do as follows:

1) Make an SVG container

2) Draw the Circle

var svgContainer = d3.select("body").append("svg")

.attr("width", 200)

.attr("height", 200);

//Draw the Circle

var circle = svgContainer.append("circle")

.attr("cx", 30)

.attr("cy", 30)

.attr("r", 20);

Shapes - Rectangle

The principle of creating a rectangle would be the same as the circle, but you will need an "x" and "y" and also need to define the width and height of the rectangle. To adjust the width or height of the rectangle you would simply have to change the values.

//Make an SVG Container

var svgContainer = d3.select("body").append("svg")

.attr("width", 200)

.attr("height", 200);

//Draw the Rectangle

var rectangle = svgContainer.append("rect")

.attr("x", 10)

.attr("y", 10)

.attr("width", 50)

.attr("height", 100)

Shapes - Ellipse

In order to create an ellipse you will need "cx", "cy", "rx", "ry".

//Make an SVG Container

var svgContainer = d3.select("body").append("svg")

.attr("width", 200)

.attr("height", 200);

//Draw the Ellipse

var circle = svgContainer.append("ellipse")

.attr("cx", 50)

.attr("cy", 50)

.attr("rx", 25)

.attr("ry", 10);

Shapes - Lines

In order to create a line you will first of all need the SVG attributes "x1", "x2", "y1", "y2", "stroke", "stroke-width". There are new elements being introduced here which is the "stroke" and "stroke-width". The reason for that is that when a line is create it is initially not displayed on the browser because unlike the previous shapes, there is no "fill" automatically put into shapes. Therefore, we need to define the width of the line and also what colour it should be. Also, the x1, y1 attributes stand for the initial point of one side of the line and therefore x2,y2 would be the second set of coordinates of where the line ends joining it from initial point to end point.

//Make an SVG Container

var svgContainer = d3.select("body").append("svg")

.attr("width", 200)

.attr("height", 200);

//Draw the line

var circle = svgContainer.append("line")

.attr("x1", 5)

.attr("y1", 5)

.attr("x2", 20)

.attr("y2", 5)

.attr("stroke-width", 2)

.attr("stroke", "blue");

Shapes - Polyline/Polygon

In order to create Polylines or Polygons you can implement all the different shapes which you hav previously learnt and also need SVG attributes such as "stroke", "stroke-width", "points", "fill".

Here is a simple example ofa Polyline

<polyline fill="none" stroke="blue" stroke-width="2"

points="05,30

15,30

15,20

25,20

25,10

35,10" />

</svg>

However in order to understand Polygon and Polylines we need to look at using SVG Paths

SVG Paths

SVG Paths are defined as follows: SVG Paths represent the outline of a shape that can be stroked, filled, used as a clipping path, or any combination of all three.

The way in which you can think of it is like having a pen on paper and that the pen will only touch the paper at one ont point and is then moved to another point. Then, the path between both points can be a straight line or a curve. It can also be an arc. We can therefore use it to create complex shapes.

In order to familiarise yourself with it here is a simple example which will walk you through it.

<path d=" M 10 25

L 10 75

L 60 75

L 10 25"

stroke="red" stroke-width="2" fill="none" />

</svg>

It's using the SVG coordinate system where the first number indicates the x coordinate and the second number the y coordinate

M 10 25 - Put the pen down at 10 25

L 10 75 - Draw a line to the point 10 75, from the previous point 10 25

L 60 75 - Draw a line to the point 60 75, from the previous point 10 75

L 10 25 - Draw a line to the point 10 25, from the previous point 60 75

The table below shows the different commands that you can use, for now it is important to only be familiar with the Pen and Line

Command	Parameters	Repeatable	Explanation
Pen Command
M ( m )	x, y	Yes	moveto Move the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command.
Line Commands
L ( l )	x, y	Yes	lineto Draw a line from the current point to the point (x,y).
H ( h )	x	Yes	horizontal lineto Draw a horizontal line from the current point to x.
V ( v )	y	Yes	vertical lineto Draw a horizontal line from the current point to y

Colours

# d3.rgb(r, g, b)

Creates a new RGB color with the specified r, g and b values. Each value must be specified as an integer in the range 0 to 255.

# d3.rgb(color)

Creates new RGB color by passing the specified color string. If color is not a string. This constructor can also be used to create a copy of an existing color

# rgb.brighter([k])

Returns a brighter copy of this color.

# rgb.darker([k])

Returns a darker copy of this colo

# d3.hsl(h, s, l)

Constructs a new HSL color with the specified hue h, saturation s and lightness l.

# d3.hsl(color)

Constructs a new HSL color by parsing the specified color string

# hsl.brighter([k])

Returns a brighter copy of this color

# hsl.darker([k])

Returns a darker copy of this color.

Author : Danish Sethi