D3js fundamentals Part 2 SVG
Tags: javascript, webdev, d3js, tutorial
Published: 2019-11-19 07:20:38

In the last article, {% post https://dev.to/saikiran/d3-fundamentals-23bo %} We have gone through set-up, selections and append(updated) in d3js. This article we will learn svg elements. Scalable Vector Graphics(SVG) is the building blocks of 2D data visualization on the web. It is an XML-based markup language for describing two dimensional based vector graphics. SVG has now become mainstream and widely supported.

Lets create a svg with tag `<svg></svg>`
By default svg takes up 300px width and 150px height if not declared. You can declare width and height either as attributes or style element. 
ex: `<svg width="500px" height="500px"></svg>`

_click on HTML, CSS or JS tabs to look at the code_
{% codepen https://codepen.io/krngd2/pen/QWWzrpG default-tab=html,result %}

Now think of svg as 500x500 pixel grid where we will place elements using these grid co-ordinates. 
Lets try to make basic shapes onto SVG

###Line

A line requires 2 points start and end, start as x1,y1 and end as x2,y2. 
Any element in svg needs to have a stroke color in order to show up on the screen
ex: `<line x1="100" y1="100" x2="400" y2="400" stroke="black"/>`

_click on HTML, CSS or JS tabs to look at the code_
{% codepen https://codepen.io/krngd2/pen/dyyweKE default-tab=html,result %}

### Creating a line with d3
    **`d3.line()`**

_click on HTML, CSS or JS tabs to look at the code_
{% codepen https://codepen.io/krngd2/pen/ZEEwGPN default-tab=js,result %}

We initialize a line generator using `d3.line()` and then call it by passing our data to it. Line generator will loop through the data array to get x and y values and then generate path data. Which we can pass to `d` attribute of `path`. We will learn more about line generators in coming articles.

Now you may be wondering why we have appended a `path` instead of `line`. So basically `path` can take up any shape, so people at d3 used `path` for most of the elements to make it less complex. I showed the example of `<line>` tag to make it easy to understand how things are placed in SVG. 

Click on edit on codepen on top right corner of the codepen example and un-comment the second data variable and comment out first data variable and check how the line is shaped, which we cannot achieve with the single `line` tag. 

While building data visuals, there will be times where you want to statically place shapes for which you dont need a generator function. So its better to know the basic shapes. 

There are 6 shape tags in svg 
* Line -> `<line x1="0" y1="0" x2="200" y2="200" />`
* Rectangle -> `<rect x="50" y="20" width="150" height="150" > ` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dtalqrvf1q4y4b4sk3hu.PNG)
* Circle -> `<circle cx="50" cy="50" r="50"/>` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/121u9c0g45nj38tcijjl.PNG) 
* Ellipse -> `<ellipse cx="200" cy="80" rx="100" ry="50" />` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dvqy12734sr4bl7ua1si.PNG) 
* Polygon -> `<polygon points="220,10 300,210 170,250 123,234" />` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sqow0kay2c65k5aylmlg.PNG) 
* Polyline -> `<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5t5e4ce0513t67kz8s9i.PNG) 

and 
* Path -> which can take up any shape, Which we will discuss further

and 
* Group -> `<g>` Its like a div for svg, which is used to grouping multiple elements and manipulating. 
* Text -> `<text x="0" y="15" >I love SVG!</text>` is used to place text 

There are many elements for SVG. If you want to know more about SVG shapes, head on to [MDN SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)

d3js also provide basic shape generator 
Which you [check out here](https://bl.ocks.org/d3indepth/raw/bae221df69af953fb06351e1391e89a0/) 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/03d5t9613hxgy7rzcid7.PNG)

In next article we will go details about how `path` works.