yonitru/grades-data.csv

## grades-data.csv

          
            firstName
            lastName
            id
            grade1
            grade2
            grade3
            finalGrade

            
              dan
              tzadok
              123456789
              70
              93.6
              86
              64

            
              danny
              bresler
              46464651
              80
              81.6
              86
              74

            
              meir
              tzion
              3186464
              50
              91.6
              89
              78

            
              ofir
              shalom
              486464
              90
              0
              0
              40

            
              ofira
              ben-haim
              6464684
              60
              85.6
              95
              30

            
              danielle
              ben-dor
              646464
              100
              89.6
              85
              80

            
              miriam
              haim
              6646464
              5
              93.6
              91
              40

            
              nir
              levy
              6432198
              89
              87.2
              79
              70

            
              dor
              levi
              3516498
              98
              80.4
              89
              99

            
              mor
              or
              31631864
              65
              85.6
              85
              55

            
              shalom
              shaked
              316168
              78
              84.6
              82
              37

            
              shlomit
              luria
              31351681
              59
              93.6
              94
              86

            
              bar
              benediva
              3135186
              84
              93.6
              89
              67

            
              dafna
              cohen
              35131684
              89
              81.6
              88
              10

            
              dafni
              oz
              631684684
              89
              77.6
              89
              75

            
              dan
              or
              35168486
              96
              0
              81
              20

            
              yonatan
              levy
              3516468
              87
              85.6
              86
              25

            
              dror
              levi
              34684864
              23
              92.6
              92
              60

            
              ronit
              cohen
              34168486
              91
              93.6
              91
              56

## index.html
<!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>

		<script>
		(function() {
		  var svg = d3.select("body")
			.append("svg")
			.attr("width", 1300)
			.attr("height", 400)
			.style("background","gray");

			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>
firstName	lastName	id	grade1	grade2	grade3	finalGrade
dan	tzadok	123456789	70	93.6	86	64
danny	bresler	46464651	80	81.6	86	74
meir	tzion	3186464	50	91.6	89	78
ofir	shalom	486464	90	0	0	40
ofira	ben-haim	6464684	60	85.6	95	30
danielle	ben-dor	646464	100	89.6	85	80
miriam	haim	6646464	5	93.6	91	40
nir	levy	6432198	89	87.2	79	70
dor	levi	3516498	98	80.4	89	99
mor	or	31631864	65	85.6	85	55
shalom	shaked	316168	78	84.6	82	37
shlomit	luria	31351681	59	93.6	94	86
bar	benediva	3135186	84	93.6	89	67
dafna	cohen	35131684	89	81.6	88	10
dafni	oz	631684684	89	77.6	89	75
dan	or	35168486	96	0	81	20
yonatan	levy	3516468	87	85.6	86	25
dror	levi	34684864	23	92.6	92	60
ronit	cohen	34168486	91	93.6	91	56
	<!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>

	<script>
	(function() {
	var svg = d3.select("body")
	.append("svg")
	.attr("width", 1300)
	.attr("height", 400)
	.style("background","gray");

	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>