Module 6

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			.axis path,
			.axis line {
			    fill: none;
			    stroke: black;
			    shape-rendering: crispEdges;
			}

path.data:hover {
				stroke: #A39;
				stroke-width:2;
			}

.axis text {
			    font-family: sans-serif;
			    font-size: 11px;
			}
		</style>
	</head>
	<body>
		<h2>
			Death caused by tuberculosis by countries 
		</h2>
		<p>
		Number of deaths caused by tuberculosis by countries from 2007 to 2013 (source : <a href="https://www.who.int/en/"> WHO</a>)
		</p>
		<script type="text/javascript">

var h = 600;
		var w = 600;

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

var padding = [50,10,30,50] //top,right,bottom,left

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
                    .range([padding[3],w-padding[1]]);

var yScale = d3.scale.linear()
                    .range([h-padding[2], padding[0]]);
		
		var xAxis = d3.svg.axis()
		                  .scale(xScale)
		                  .orient("bottom")
		                  .ticks(5)
		                  .tickFormat(function(d) {
								return dateFormat(d);
							});;

var yAxis = d3.svg.axis()
		                  .scale(yScale)
		                  .orient("left")
						  .ticks(5);
		
	
		//Load in contents of CSV file
		d3.csv("https://gist.githubusercontent.com/Alfsig/83925d69a691275bf09a/raw/664d9ddadeaa6a51e598d7a2e59a7c1540ce1a57/data_diseases.csv",function(data) {

dataCountry = data.map(function(d){
				return d['Country']; 
			});

xScale.domain([d3.min(data,function(d){return dateFormat.parse(d.Year);}),d3.max(data,function(d){return dateFormat.parse(d.Year);})]);

yScale.domain([0,d3.max(data, function(d){
				n = d['Number of deaths due to tuberculosis']; 
				return parseFloat(n.substring(0,n.indexOf('\[')-1))
			})]);

filtered = [];
			countryPushed = [];

data.forEach(function(d) { 
				if (countryPushed.indexOf(d.Country) == -1) {
					filtered.push(data.filter(function(c){return c.Country == d.Country}));
					countryPushed.push(d.Country);
				}
			})

var line = d3.svg.line()
                .x(function(d) { 
                	return xScale(dateFormat.parse(d.Year));
                })
                .y(function(d) { 
					n = d['Number of deaths due to tuberculosis']; 
					return yScale(parseFloat(n.substring(0,n.indexOf('\[')-1)));
				})

for (var i = 0; i < filtered.length; i++) {
				svg.data([filtered[i]])
					.append("path")
					.attr("class","data")
				    .attr("d",line)
					.attr("fill","none")
					.attr("stroke","steelblue")
					.attr("stroke-width",1)
					.append("title")
					.text(function(d) {return d[0].Country;})
			}
				
			svg.append("g")
				.attr("class","x axis")
			    .attr("transform","translate("+0+","+ (h-padding[2])+ ")")
			 	.call(xAxis)
			
			svg.append("g")
				.attr("class","y axis")
				.attr("transform","translate("+ (padding[3]) +","+0+")")
			  	.call(yAxis)
		});

</script>

</body>
</html>

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

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