Module 3 :: Excercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
		
		<script type="text/javascript">

// some predefined graphic properties

var chart_width = 1024 ;
			var chart_height = 6000 ;

//Load in contents of CSV file
			d3.csv("eva.csv", function(data) {

data.sort(function(a,b){
					 return d3.ascending(Number(a.duration),Number(b.duration));
				})

//Now CSV contents have been transformed into
				//an array of JSON objects.

//Log 'data' to the console, for verification.
				svg = d3.select('body').append('svg')
				.attr('width',chart_width)
				.attr('height',chart_height);

svg.selectAll('rect').data(data).enter().append('rect')
				.attr('x',0)
				.attr('y',function(d,i){
					return i * 6 ; 
				})
				.attr('height',4)
				.attr('width', function(d){
					 // return d *  20 ;
					 //console.log(d);
					 return d.duration ;  
				})
				.append('title')
				.text(function(d){return d.astronautName + "EVA duration : " + Math.floor(d.duration/60)+ " Hours" + Math.floor(d.duration%60) + " Minutes " ; });
			});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js