jashcny · October 14, 2016 15:56
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- Modification of an example by Scott Murray from Knight D3 course -->
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Line Chart with Multiple Lines</title>
 		<style type="text/css">

 		@import url(https://fonts.googleapis.com/css?family=Raleway:400);
    @import url(https://fonts.googleapis.com/css?family=Raleway:400italic|Poiret+One|Ubuntu|Oxygen);
    @import url(https://fonts.googleapis.com/css?family=Raleway:400italic|Poiret+One|Ubuntu);


 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-family: 'Oxygen', sans-serif;
 				font-size: 32px;
 				margin-left: 450px;
 				color: rgb(233, 42, 58);
 			}

 			p {
 				font-family: 'Oxygen', sans-serif;
 				font-size: 16px;
 				margin: 10px 0 0 0;
 			}

 			svg {
 				background-color: white;
 				margin-left: 200px;
 				margin-top: 50px;
 			}

 		 #para {
 			  margin-top: 50px;
 			  margin-left: 280px;
 				margin-right: 280px;
 				margin-bottom: 50px;

 			}


 		  a {
 			  color:  rgb(233, 42, 58);
 				text-decoration: none;
 			      }

 			path.line {
 				fill: none;
 				stroke: rgb(233, 42, 58);
 				stroke-width: 1.5px;
 				 stroke-opacity: 80%;
 			}


 			.xAxis path, .xAxis line {
 				fill: none;
 			  stroke: rgb(189,189,189);
 				stroke-width: 1.5px;
 			}

 			.yAxis text,.xAxis text {
 				font-size: 11px;
 				font-family: 'Ubuntu', sans-serif;
 			}




 				.linelabel {
 					font-size: 10px;
 				   stroke-width:0.1px;
 				}


 			circle {
 				fill: rgb(233, 42, 58);
 			}


      #focused {
        stroke-width: 3.5px;
        stroke-opacity: 100%;
 				font-size:17px;
 			  font-weight: bold;
      }

 			.grid .tick {
 			    opacity: 0.7;
 					stroke: rgba(189,189,189,1);
 					stroke-dasharray: 1.2,4;
 			}
 			.grid path {
 			    stroke-width: 0;
 			}

 			.tooltip {
 				position: absolute;
 				z-index: 10;
 			}

 			.tooltip p {
 				font-size: 15px;
 				font-family: 'Raleway', sans-serif;
 				background-color: rgba(255,255,255,0.8);
 				line-height: 1.8em;
 				border: rgb(210,210,210) 2px solid;
 				padding-left: 20px;
 			  width: 190px;
 				height: 80px;
 			}



 		</style>
 	</head>
 	<body>

 		<h1>Mobile cellular Subscriptions</h1>

 		<div id="para">
    <p >This line chart below illustrates the subscriptions of mobile cellular telephone in the worldwide. The data are the subscriptions to a public mobile telephone service that provide access to the PSTN using cellular technology.</p>
 		<p >Source: International Telecommunication Union, World Telecommunication/ICT Development Report and database, <a href="http://data.worldbank.org/indicator/IT.CEL.SETS/countries/1W?display=default">World Bank.</a><p>
    </div>

 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<script type="text/javascript">


 			//Dimensions and padding
 			var fullwidth = 950;
 			var fullheight = 800;
 			var margin = {top: 20, right: 100, bottom: 80, left:160};

 			var width = fullwidth - margin.left - margin.right;
 			var height = fullheight - margin.top - margin.bottom;

 			//Set up date formatting and years
 			var dateFormat = d3.time.format("%Y");

 			//Set up scales
 			var xScale = d3.time.scale()
 								.range([ 0, width ]);

 			var yScale = d3.scale.linear()
 								.range([ 0, height ]);

 			//Configure axis generators
 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(20)
 							.tickFormat(function(d) {
 								return dateFormat(d);
 							})
 							.outerTickSize([1]);

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.ticks(12)
 							.outerTickSize([0])
 							.innerTickSize([0]);



 			//Configure line generator
 			// each line dataset must have a d.year and a d.amount for this to work.
 			var line = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(+d.amount);
 				});



 			//Create the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", fullwidth)
 						.attr("height", fullheight)
 						.append("g")
 						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


 			var tooltip = d3.select("body")
      	.append("div")
      	.attr("class", "tooltip");


 				function make_y_axis() {
 				    return d3.svg.axis()
 				        .scale(yScale)
 				        .orient("left")
 				        .ticks(12)
 				}
 			//Load data
 			d3.csv("mobile.csv", function(data) {


 				//New array with all the years, for referencing later
 			var test = d3.keys(data[0])
 			var years = d3.keys(data[0]).slice(0,38-4);
 			console.log(test);
 			console.log(years);
 				// or you could get this by doing:
 				// var years = d3.keys(data[0]).slice(0, 54-4); //

 				//Create a new, empty array to hold our restructured dataset
 				var dataset = [];

 				//Loop once for each row in data
 				data.forEach(function (d, i) {

 					var myCellulars = [];

 					//Loop through all the years - and get the emissions for this data element
 					years.forEach(function (y) {

 						// If value is not empty
 						if (d[y]) {
 							//Add a new object to the new emissions data array - for year, amount
 							myCellulars.push({
 								country: d.CountryName, // we can put the country in here too. It won't hurt.
 								year: y,
 								amount: d[y]  // this is the value for, for example, d["2004"]
 							});
 						}

 					});

 					//Create new object with this country's name and empty array
 					// d is the current data row... from data.forEach above.
 					dataset.push( {
 						country: d.CountryName,
 						cellular: myCellulars  // we just built this!
 						} );

 				});

 				//Uncomment to log the original data to the console
 				// console.log(data);

 				//Uncomment to log the newly restructured dataset to the console
 				console.log(dataset);


 				//Set scale domains - max and mine of the years
 				xScale.domain(
 					d3.extent(years, function(d) {
 						return dateFormat.parse(d);
 					}));

 				// max of emissions to 0 (reversed, remember)
 				yScale.domain([
 					d3.max(dataset, function(d) {
 						return d3.max(d.cellular, function(d) {
 							return +d.amount;
 						});
 					}),
 					0
 				]);


 				//Make a group for each country
 				var groups = svg.selectAll("g")
 					.data(dataset)
 					.enter()
 					.append("g");

 				//Within each group, create a new line/path,
 				//binding just the emissions data to each one
 				groups.selectAll("path")
 					.data(function(d) { // because there's a group with data already...
 						return [ d.cellular]; // it has to be an array for the line function
 					})
 					.enter()
 					.append("path")
 					.attr("class", "line")
 					.attr("d", line);

 					groups.on("mouseover",HoverIn)
 								.on("mouseout",HoverOut);

 			// Tooltip dots

 			var circles = groups.selectAll("circle")
 								.data(function(d) { // because there's a group with data already...
 											return d.cellular; // NOT an array here.
 								})
 								.enter()
 								.append("circle");

 				circles.attr("cx", function(d) {
 						return xScale(dateFormat.parse(d.year));
 					})
 					.attr("cy", function(d) {
 						return yScale(d.amount);
 					})
 					.attr("r", 1.5)
 					.style("opacity", 0.3); // this is optional - if you want visible dots or not!

 				// Adding a subtle animation to increase the dot size when over it!

 				circles
 					.on("mouseover", mouseoverFunc)
 					.on("mousemove", mousemoveFunc)
 					.on("mouseout",	mouseoutFunc);

 			// We're putting the text label at the group level, where the country name was originally.
 			//We can access data here, because it's already attached!
 			// We use the scales to position labels at end of line.
 			groups.append("text")
 	      .attr("x", function(d) {
 	      	if (d.cellular.length != 0) {
 		      	var lastYear = d.cellular[d.cellular.length-1].year;
 		      	return xScale(dateFormat.parse(lastYear));
 		      }
 	      })
 	      .attr("y", function(d) {
 	      	if (d.cellular.length != 0) {
 		      	var lastAmount = d.cellular[d.cellular.length-1].amount;
 		      	return yScale(+lastAmount);
 	      	}
 	      })
 	      .attr("dx", "3px")
 	      .attr("dy", ".35em")
 	      .text(function(d) {
 	      	if (d.cellular.length != 0) {
 	      		var lastAmount = d.cellular[d.cellular.length-1].amount;
 	      		if (+lastAmount > 400000000) {
 	      			return d.country;
 	      		}
 	      	}
 	      })
 				.attr("font-family","Ubuntu")
 	      .attr("class", "linelabel");

 	 						svg.append("text")
 							.attr("class", "xlabel")
 							.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
 											 (height + margin.bottom) + ")")
 							.style("text-anchor", "middle")
 						  .attr("dy", "-15")
 							.attr("dx","-148")
 							.attr("font-family","Ubuntu")
 							.attr("font-size","17px")
 						  .text("Year");


 			       	svg.append("text")
 							.attr("transform", "rotate(-90)")
 							.attr("y", 10 - margin.left)
 							.attr("x", 20 - (height / 2))
 							.attr("dy", "1em")
 							.attr("font-size","19px")
 							.attr("font-family","Ubuntu")
 							.style("text-anchor", "middle")
 							.text("Mobile cellular Subscriptions");

 				//Axes
 				svg.append("g")
 					.attr("class", "xAxis")
 					.attr("transform", "translate(0," + height + ")")
 					.call(xAxis);

 				var yt=svg.append("g")
 				.attr("class", "yAxis")
 				.call(yAxis)

 				yt.selectAll("text")
 	    		.attr("x", -15)
 	    		.attr("dy", 3.5);

 				svg.append("g")
 		        .attr("class", "grid")
            .call(make_y_axis()
 		            .tickSize(-width, 0, 0)
 		            .tickFormat("")
 		        )



 				function mouseoverFunc(d) {

 					d3.select(this)
 						.transition()
 						.duration(700)
 						.style("opacity", 1)
 						.attr("r", 7.5);


 					tooltip
 						.style("display", null) // this removes the display none setting from it
 						.html("<p>Country: " + d.country +
 									"<br>Year: " + d.year +
 								  "<br>Subscription: " + d.amount + "</p>");
 					}

 				function mousemoveFunc(d) {
 					tooltip
 						.style("top", (d3.event.pageY - 10) + "px" )
 						.style("left", (d3.event.pageX + 10) + "px");
 					}

 				function mouseoutFunc(d) {
 					d3.select(this)
 						.transition()
 						.style("opacity", 0.3)
 						.attr("r", 1.5);
 			    tooltip.style("display", "none");
 				}  // this sets it to invisible!

 					function HoverIn(d){
 							 d3.select(this).select("path")
 									 .attr("id", "focused");
 							 d3.select(this).select("text")
 									 .attr("id", "focused");
 							 }

 							 function HoverOut(d) {
 							d3.select(this).select("path")
 									 .attr("id", null);
 							 d3.select(this).select("text")
 									 .attr("id", null);
 			  }

 			}); // end of data csv



 		</script>

 	</body>
 </html>
diff --git a/mobile.csv b/mobile.csv
	<!DOCTYPE html>
	<!-- Modification of an example by Scott Murray from Knight D3 course -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Line Chart with Multiple Lines</title>
	<style type="text/css">

	@import url(https://fonts.googleapis.com/css?family=Raleway:400);
	@import url(https://fonts.googleapis.com/css?family=Raleway:400italic\|Poiret+One\|Ubuntu\|Oxygen);
	@import url(https://fonts.googleapis.com/css?family=Raleway:400italic\|Poiret+One\|Ubuntu);


	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-family: 'Oxygen', sans-serif;
	font-size: 32px;
	margin-left: 450px;
	color: rgb(233, 42, 58);
	}

	p {
	font-family: 'Oxygen', sans-serif;
	font-size: 16px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	margin-left: 200px;
	margin-top: 50px;
	}

	#para {
	margin-top: 50px;
	margin-left: 280px;
	margin-right: 280px;
	margin-bottom: 50px;

	}


	a {
	color: rgb(233, 42, 58);
	text-decoration: none;
	}

	path.line {
	fill: none;
	stroke: rgb(233, 42, 58);
	stroke-width: 1.5px;
	stroke-opacity: 80%;
	}


	.xAxis path, .xAxis line {
	fill: none;
	stroke: rgb(189,189,189);
	stroke-width: 1.5px;
	}

	.yAxis text,.xAxis text {
	font-size: 11px;
	font-family: 'Ubuntu', sans-serif;
	}




	.linelabel {
	font-size: 10px;
	stroke-width:0.1px;
	}


	circle {
	fill: rgb(233, 42, 58);
	}


	#focused {
	stroke-width: 3.5px;
	stroke-opacity: 100%;
	font-size:17px;
	font-weight: bold;
	}

	.grid .tick {
	opacity: 0.7;
	stroke: rgba(189,189,189,1);
	stroke-dasharray: 1.2,4;
	}
	.grid path {
	stroke-width: 0;
	}

	.tooltip {
	position: absolute;
	z-index: 10;
	}

	.tooltip p {
	font-size: 15px;
	font-family: 'Raleway', sans-serif;
	background-color: rgba(255,255,255,0.8);
	line-height: 1.8em;
	border: rgb(210,210,210) 2px solid;
	padding-left: 20px;
	width: 190px;
	height: 80px;
	}



	</style>
	</head>
	<body>

	<h1>Mobile cellular Subscriptions</h1>

	<div id="para">
	<p >This line chart below illustrates the subscriptions of mobile cellular telephone in the worldwide. The data are the subscriptions to a public mobile telephone service that provide access to the PSTN using cellular technology.</p>
	<p >Source: International Telecommunication Union, World Telecommunication/ICT Development Report and database, <a href="http://data.worldbank.org/indicator/IT.CEL.SETS/countries/1W?display=default">World Bank.</a><p>
	</div>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type="text/javascript">


	//Dimensions and padding
	var fullwidth = 950;
	var fullheight = 800;
	var margin = {top: 20, right: 100, bottom: 80, left:160};

	var width = fullwidth - margin.left - margin.right;
	var height = fullheight - margin.top - margin.bottom;

	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");

	//Set up scales
	var xScale = d3.time.scale()
	.range([ 0, width ]);

	var yScale = d3.scale.linear()
	.range([ 0, height ]);

	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(20)
	.tickFormat(function(d) {
	return dateFormat(d);
	})
	.outerTickSize([1]);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(12)
	.outerTickSize([0])
	.innerTickSize([0]);



	//Configure line generator
	// each line dataset must have a d.year and a d.amount for this to work.
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip");


	function make_y_axis() {
	return d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(12)
	}
	//Load data
	d3.csv("mobile.csv", function(data) {


	//New array with all the years, for referencing later
	var test = d3.keys(data[0])
	var years = d3.keys(data[0]).slice(0,38-4);
	console.log(test);
	console.log(years);
	// or you could get this by doing:
	// var years = d3.keys(data[0]).slice(0, 54-4); //

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	data.forEach(function (d, i) {

	var myCellulars = [];

	//Loop through all the years - and get the emissions for this data element
	years.forEach(function (y) {

	// If value is not empty
	if (d[y]) {
	//Add a new object to the new emissions data array - for year, amount
	myCellulars.push({
	country: d.CountryName, // we can put the country in here too. It won't hurt.
	year: y,
	amount: d[y] // this is the value for, for example, d["2004"]
	});
	}

	});

	//Create new object with this country's name and empty array
	// d is the current data row... from data.forEach above.
	dataset.push( {
	country: d.CountryName,
	cellular: myCellulars // we just built this!
	} );

	});

	//Uncomment to log the original data to the console
	// console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	console.log(dataset);


	//Set scale domains - max and mine of the years
	xScale.domain(
	d3.extent(years, function(d) {
	return dateFormat.parse(d);
	}));

	// max of emissions to 0 (reversed, remember)
	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.cellular, function(d) {
	return +d.amount;
	});
	}),
	0
	]);


	//Make a group for each country
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");

	//Within each group, create a new line/path,
	//binding just the emissions data to each one
	groups.selectAll("path")
	.data(function(d) { // because there's a group with data already...
	return [ d.cellular]; // it has to be an array for the line function
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line);

	groups.on("mouseover",HoverIn)
	.on("mouseout",HoverOut);

	// Tooltip dots

	var circles = groups.selectAll("circle")
	.data(function(d) { // because there's a group with data already...
	return d.cellular; // NOT an array here.
	})
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.attr("cy", function(d) {
	return yScale(d.amount);
	})
	.attr("r", 1.5)
	.style("opacity", 0.3); // this is optional - if you want visible dots or not!

	// Adding a subtle animation to increase the dot size when over it!

	circles
	.on("mouseover", mouseoverFunc)
	.on("mousemove", mousemoveFunc)
	.on("mouseout", mouseoutFunc);

	// We're putting the text label at the group level, where the country name was originally.
	//We can access data here, because it's already attached!
	// We use the scales to position labels at end of line.
	groups.append("text")
	.attr("x", function(d) {
	if (d.cellular.length != 0) {
	var lastYear = d.cellular[d.cellular.length-1].year;
	return xScale(dateFormat.parse(lastYear));
	}
	})
	.attr("y", function(d) {
	if (d.cellular.length != 0) {
	var lastAmount = d.cellular[d.cellular.length-1].amount;
	return yScale(+lastAmount);
	}
	})
	.attr("dx", "3px")
	.attr("dy", ".35em")
	.text(function(d) {
	if (d.cellular.length != 0) {
	var lastAmount = d.cellular[d.cellular.length-1].amount;
	if (+lastAmount > 400000000) {
	return d.country;
	}
	}
	})
	.attr("font-family","Ubuntu")
	.attr("class", "linelabel");

	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
	(height + margin.bottom) + ")")
	.style("text-anchor", "middle")
	.attr("dy", "-15")
	.attr("dx","-148")
	.attr("font-family","Ubuntu")
	.attr("font-size","17px")
	.text("Year");


	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 10 - margin.left)
	.attr("x", 20 - (height / 2))
	.attr("dy", "1em")
	.attr("font-size","19px")
	.attr("font-family","Ubuntu")
	.style("text-anchor", "middle")
	.text("Mobile cellular Subscriptions");

	//Axes
	svg.append("g")
	.attr("class", "xAxis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	var yt=svg.append("g")
	.attr("class", "yAxis")
	.call(yAxis)

	yt.selectAll("text")
	.attr("x", -15)
	.attr("dy", 3.5);

	svg.append("g")
	.attr("class", "grid")
	.call(make_y_axis()
	.tickSize(-width, 0, 0)
	.tickFormat("")
	)



	function mouseoverFunc(d) {

	d3.select(this)
	.transition()
	.duration(700)
	.style("opacity", 1)
	.attr("r", 7.5);


	tooltip
	.style("display", null) // this removes the display none setting from it
	.html("<p>Country: " + d.country +
	"<br>Year: " + d.year +
	"<br>Subscription: " + d.amount + "</p>");
	}

	function mousemoveFunc(d) {
	tooltip
	.style("top", (d3.event.pageY - 10) + "px" )
	.style("left", (d3.event.pageX + 10) + "px");
	}

	function mouseoutFunc(d) {
	d3.select(this)
	.transition()
	.style("opacity", 0.3)
	.attr("r", 1.5);
	tooltip.style("display", "none");
	} // this sets it to invisible!

	function HoverIn(d){
	d3.select(this).select("path")
	.attr("id", "focused");
	d3.select(this).select("text")
	.attr("id", "focused");
	}

	function HoverOut(d) {
	d3.select(this).select("path")
	.attr("id", null);
	d3.select(this).select("text")
	.attr("id", null);
	}

	}); // end of data csv



	</script>

	</body>
	</html>