Life expectancy at birth - Module 3 exercise

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Module 3 Exercise -- Life Expectancy for all the countries.</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js">
	</script>
	</head>

<body>
		<h2>Life expectancy at birth in years for various countries for the year 2012.</h2>
		<h5>Life expectancy at birth indicates the number of years a newborn infant would live if prevailing patterns of mortality at the time of its birth were to stay the same throughout its life.</h5>
		<script type="text/javascript">
				console.clear();
			//<![CDATA[
				var w = 950;
				var h = 585;
				var normalFillColor = "#BCF5A9";
				var clickFillColor = "#FF6600";
				var hoverFillColor = "#006680";
				function randomIntForPickingData(min, max) {
					return Math.floor(Math.random() * (max - min + 1) + min);
				}
				var changeColorOnClick = (function(){
					var currentColor = normalFillColor;

return function(){
						currentColor = currentColor == normalFillColor ? clickFillColor : normalFillColor;
						d3.select(this).style("fill", currentColor);
					}
				})();

var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

//Load in contents of CSV file
				d3.csv("LifeExpectancyAtBirth.csv", function(csvData) {
					console.time("barchart");
					var barPadding = 1;
					// csvData.forEach(function(row) {
					// 	console.log(Object.keys(row));
					// });
					csvData.sort(function(a, b) {
						return d3.descending(+a["2012"], +b["2012"]);
					});
					// console.log(csvData.length);
					var newData = [];
					var j = 0;
					//As our csvData is huge, get the top 15 and bottom 15 rows; but this does not give a proper distribution. So, no point.
					//var csvData = csvData.slice(0,15).concat(csvData.slice(csvData.length-15,csvData.length));
					
					//As our csvData is huge, we will only use a subset of the data and for even distribution, we will select one row every n-random-rows to get 30 to 40 rows for the chart; beyond these number of rows, display gets rather too absurd.
					var randomInt = randomIntForPickingData(5, 8);
					for(i = 0; i < csvData.length; i += randomInt) {
						newData[j] = csvData[i];
						j++;
					}
					csvData = newData;

svg.selectAll("barchart")
					   .data(csvData)
					   .enter()
					   .append("rect")
					   .attr("x", function(d, i) {
							return 150;
						})
					   .attr("y", function(d, i) {
							return Math.ceil(i * (h / csvData.length));
						})
					   .attr("width", function(d, i) { 
							return Math.ceil(d["2012"] * 4);
						})
					   .attr("height", function(d, i) {
							return Math.floor(h / csvData.length - barPadding - 2.5);
						})
					   .attr("fill", function(d) {
							//Cant seem to get random colors; Also it might be incorrect to display random colors since we are dealing with the data for a single type of definition.
							//return "rgb(0, 0, " + (d["2012"] * 10) + ")";
							return normalFillColor;
						})
					   .on("mouseover", function(d, i) {
						  d3.select(this).attr("r", 10).style("fill", hoverFillColor);
						})                  
						.on("mouseout", function(d, i) {
						  d3.select(this).attr("r", 5.5).style("fill", normalFillColor);
						})
					   .on("click", changeColorOnClick);;
					console.timeEnd("barchart");

console.time("data-values");
					svg.selectAll("data-values")
					   .data(csvData)
					   .enter()
					   .append("text")
					   .text(function(d, i) {
							return d["2012"];
					   })
					   .attr("text-anchor", "middle")
					   .attr("x", function(d, i) {
							return Math.floor((d["2012"] * 4) - 5 + 140);
					   })
					   .attr("y", function(d, i) {
							return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.45);
					   })
					   .attr("fill", "black")
					   .attr("font-size", "10px")
					   .attr("font-family", "roboto");
					console.timeEnd("data-values");

console.time("axis-labels");
					svg.selectAll("axis-labels")
						.data(csvData)
						.enter()
						.append("text")
						.attr("x", 145)
						.attr("y", function(d, i) {
							return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.35);
						})
						.attr("fill", "black")
						.attr("font-size", "10px")
						.attr("font-family", "roboto")
						.attr("font-weight", "bold")
						.attr("text-anchor", "end")
						.text(function(d) {
							return d.CountryName
						});
					console.timeEnd("axis-labels");
				});
			//]]>
		</script>
	</body>
</html>

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

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