Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset = 'UTF-8'/>

		<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js" charset="utf-8"></script>

<style>
.tick {
	font-size: 95%;
	font-family: Calibri;
	white-space: nowrap;
	text-align:center;
}
.domain {
	display: none;
}
line{
	display: none;
}


</style>


	</head>
	<body>
    <div id="chart"></div>
    <script>


	var dataset = [];
	d3.csv("data/lifeexpectancy.csv", function(d){
			//console.log(d);
			if (d.Year == "2015"){
				return {
					country : d.Country,
					lifeExpectancy : +d["Life expectancy at birth"]
				};
			}
			},
			function(data){
				dataset = data.map(function(d){
										return  [d.country, +d.lifeExpectancy];
									});

				var orderedDataSet = ["2015 data"];
				var orderedNameSet =[];
				var tempMax = 0;
				var tempI = 0;
				for (var z = 0 + 1; z < dataset.length + 1; z++){
					for (var i = 0; i < dataset.length; i++){
							if (tempMax < (+dataset[i][1])){
								tempMax = +dataset[i][1];
								tempI = i;
							}
						}
						orderedDataSet.push(dataset[tempI][1]);
						orderedNameSet.push(dataset[tempI][0]);
						dataset[tempI] = 0;
						tempMax = 0;
						tempI = 0;
					}


				//});

				var chart = c3.generate({
					title: {
					  text: 'LIFE EXPECTANCY AT BIRTH 2015'

					},
					size: {
							height: 1734,
							width: 580
						},
					data: {
						columns:
						//dataset
						[
						orderedDataSet
						]
						,type: 'bar'
						//,type: 'area-step'
					},
					legend: {
						show: false
					},
					color: {
					pattern:['#fbc9c3'],
					},
					bar: {
						width: {
							ratio: 0.6// this makes bar width 50% of length between ticks
						}
						// or
						//width: 100 // this makes bar width 100px
					},
					axis: {
					rotated: true,
					  x: {
						type: 'category',
						categories: orderedNameSet,
						tick: {multiline : false}
						//show: false
					  },
					  y:{
						tick: {
							  values: [0, 20, 40, 60, 80]
						}
						//show: false
					  }
					},
					//tooltip: {enabled: false}
					//zoom: { enabled: true },
					//subchart: { show: true }
				});
			}
	);


    </script>

	</body>
</html>