External library

Introduction

External libraries are pre-written code that can be used in our web page.
We can use external libraries to add functionality to our web page without writing the code from scratch.
There are many external libraries available for different purposes like animations, charts, etc.
Some popular libraries are jQuery, Bootstrap, D3.js, etc.

Import library

To use an external library in our web page, we need to include the library file in the <head> section of the HTML file.
For example, to include jQuery library, we can add the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Sample - animation

jQuery library can be used to add animations to our web page.
For example, to animate a div element, we can use the following code:
<head>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>	// Rectangle to animate

<script>
$(document).ready(function(){
	$("button").click(function(){							// Start animation on button click
		$("div").animate({left: '250px'});					// move the rectangle to the right by 250px
	});
});
</script>

Sample - create charts

D3.js library can be used to create charts in our web page.
For example, to create a bar chart, we can use the following code:
<head>
	<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<svg width="500" height="500"></svg>

<script>
var data = [10, 50, 30, 40, 20];				// Data for the chart
var svg = d3.select("svg");
svg.selectAll("rect")						// Set attributes for each rectangle
	.data(data)
	.enter()
	.append("rect")
	.attr("x", function(d, i) { return i * 50; })
	.attr("y", function(d) { return 100 - d; })
	.attr("width", 40)
	.attr("height", function(d) { return d; })
	.attr("fill", "blue");
</script>

Reference