D3 Lab with Angular 7|D3 Angular |D3 Lab with Angular Part1

D3 Lab with Angular Part1 

Lab with SVG Shapes

What is D3

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

Refer D3, Refer SVG.

D3 stands for Data Driven Documents

What Is SVG

SVG stands for Scalable Vector Graphics.SVG defines vector-based graphics in XML format.In HTML5, you can embed SVG elements directly into your HTML pages.SVG shapes help D3 to present data.

SVG Shapes

SVG has some predefined shape

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

Rectangle <rect>

A rectangle is a quadrilateral with four right angles. 

Example :

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

for More refer W3SCHOOLS.

Circle <circle>

A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre;
Example :

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

for More refer W3Schools

Ellipse <ellipse>

An ellipse is a curve in a plane surrounding two focal points such that the sum of the distances to the two focal points is constant for every point on the curve.
Example :

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

for More refer W3Schools

Line <line>

A line is a straight one-dimensional figure having no thickness and extending infinitely in both directions.

Example :

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

for More refer W3Schools 

Polyline <polyline>

A continuous line composed of one or more line segments

Example :

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

for More refer W3Schools https://www.w3schools.com/graphics/svg_polyline.asp

Polygon <polygon>

A polygon can be defined  as a geometric object "consisting of a number of points (called vertices) and an equal number of line segments (called sides), namely a cyclically ordered set of points in a plane

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

for More refer W3Schools 

Path <path>

SVG Path - <path>

The <path> element is used to define a path.

The following commands are available for path data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

Example : 

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

for More refer W3Schools 

OutPut: 

Code Action @Stackblitz