d3.js simple bar chart example

<!DOCTYPE html>
<html>
	<head>
		<title>6</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">	
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<script src="loadData.js"></script>
		<style>
			rect:hover {fill:orange;}
		</style>
	</head>
	<body>
		<h1>load external csv data</h1>

d3.csv("grades-data.csv", function(dataset) {
				console.log(dataset);
				dataset.sort(function(a, b) {
					return d3.descending(a.finalGrade, b.finalGrade);
				});

var rects = svg.selectAll("rect")
								.data(dataset)
								.enter()
								.append("rect");

rects.attr("x", 0)
				.attr("y", function(d, i) {
					return i*11;
				})
				.attr("width",function(d) {
					return d.finalGrade;
				})
				.attr("height",10)
				.attr("data-name", function(d) {
					return d.firstName;
				})
				.append("title")
				.text(function(d) {
					return d.finalGrade;
				})
			});;
		})();
		</script>
		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>	</body>
</html>

https://code.jquery.com/jquery-2.1.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js