yazanealaily - 5 largest megacities

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Population in Megacities</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<script type="text/javascript" src="reuseable.d3.charts.js"></script>
		
		<style type="text/css">
			body {
				background-color: #69425E;
				color: white;
				-webkit-font-smoothing: antialiased;
			}
			h3 {
				margin-top: 0;
				line-height: 40px;
				font-size: 22px;
			}
			footer {
				margin-top: 270px;
			}
			a {
				text-decoration: none;
				color: white;
			}
			#years li {
				text-decoration: none;
				display: inline-block;
				margin-left: 25px;
				margin-right: 60px;
				margin-top: 10px;
				font-size: 18px;
				font-weight: bold;
				-webkit-font-smoothing: antialiased;
			}
			#totals li {
				text-decoration: none;
				display: inline-block;
				margin-left: 15px;
				margin-right: 41px;
				margin-top: 2px;
			}
			#header {
				height: 100px;
				width: 100%;
				margin-bottom:25px;
			}
			svg {
				background-color: #69425E;
			}
			a:hover {
				color: #FF6ED6;
			}
			rect:hover {
				fill: #FF6ED6;
			}
		#legend2 {
			margin-bottom:25px;
		}
		</style>

</head>
		
	<body>
	
		<div class="container">
			
			<div class = "row">
				<div class="col-md-12" id="header">
					<h2>Population of the Top 5 Megacities 1950-2015</h2>
				</div>
			</div>

<div class = "row">
				<div class="col-md-5" id = "barChart">
				</div>
				<div class="col-md-7" id = "chartDescr">
					<h3 class="text-justify">A megacity is an urban agglomeration of ten or more million people.</h3>
					<h3 class="text-justify">This chart shows the growth in population of the five largest megacities in the world: Tokyo, New York, Mexico City, Mumbai, and Sao Paolo.</h3>

<footer>Source: <a href="https://www.earth-policy.org/">Earth Policy Institute</a></footer>
					
				</div>
			</div>

<div class = "row" id = "additionalInfo">
				<ul id="years">
					<li>1950</li>
					<li>2007</li>
					<li>2015</li>
				</ul>
				<ul id="totals">
					<li>31 million</li>
					<li>111 million</li>
					<li>119 million</li>
				</ul>
			</div>

</div>

//Original data
			var dataset = [
				[
					{ x: 1950, y: 11.3 , z: "Tokyo"},
					{ x: 2007, y: 35.7, z: "Tokyo" },
					{ x: 2015, y: 36.4, z: "Tokyo" }
				],
				[
					{ x: 1950, y: 12.3, z: "New York" },
					{ x: 2007, y: 19.0, z: "New York" },
					{ x: 2015, y: 20.0, z: "New York" }
				],
				[
					{ x: 1950, y: 2.9, z: "Mexico City" },
					{ x: 2007, y: 19.0, z: "Mexico City"  },
					{ x: 2015, y: 20.2, z: "Mexico City"  }
				],
				[
					{ x: 1950, y: 2.9, z: "Mumbai" },
					{ x: 2007, y: 19.0, z: "Mumbai" },
					{ x: 2015, y: 21.9, z: "Mumbai" }
				],
				[
					{ x: 1950, y: 2.3, z:"Sao Paolo" },
					{ x: 2007, y: 18.8, z:"Sao Paolo" },
					{ x: 2015, y: 20.5, z:"Sao Paolo" }
				]
			];

//Set up stack method
			var stack = d3.layout.stack()
							.order("reverse");  //Flip the order
			//Data, stacked
			stack(dataset);
			//Set up scales
			var xScale = d3.scale.ordinal()
				.domain(d3.range(dataset[0].length))
				.rangeRoundBands([0, w], 0.2);
		
			var yScale = d3.scale.linear()
				.domain([0,				
					d3.max(dataset, function(d) {
						return d3.max(d, function(d) {
							return d.y0 + d.y;
						});
					})
				])
				.range([0, h]);
						
			//Create SVG element
			var svg = d3.select("#barChart")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			// Add a group for each row of data
			var groups = svg.selectAll("g")
				.data(dataset)
				.enter()
				.append("g")
				.style("fill", function(d, i) {
					//return colors[colors.length - 1 - i];
					return colors(i)
				})
				.style("stroke", "white");
			// Add a rect for each data value
			var rects = groups.selectAll("rect")
				.data(function(d) { return d; })
				.enter()
				.append("rect")
				.attr("x", function(d, i) {
					return xScale(i);
				})
				.attr("width", xScale.rangeBand())
				.attr("y", function(d) {
					return h - yScale(d.y0) - yScale(d.y);  //Flip the math!
				})
				.attr("height", function(d) {
					return yScale(d.y);
				})
				.append("title").text(function(d,i) {return d.z + ": " + d.y + "mn Residents";});

//PULLED OUT THE Z VALUES AND ADDED TO COLORS SCALE
				var cityNames = d3.set(dataset.map(function(d) { return d[0].z })).values()
				colors.domain(cityNames)
				//CREATED THE VERTICAL LEGEND
				var rlegend_vertical = d3.models.legend()
			    //.fontSize(".8em")
			   	.position("vertical").gxPos(25).gyPos(200).item_height(30).fontColor("white").inputScale(colors)
			    //.on("onClick", filterLegend);
				svg.call(rlegend_vertical);

//CREATED THE HORIZONTAL LEGEND WITH RECS
				var rlegend_horizontal_recs = d3.models.legend()
		   	.position("horizontal-recs").fontSize(20).inputScale(colors)

var svg_legend = d3.select('#header')
				svg_legend.call(rlegend_horizontal_recs);

//CREATED THE HORIZONTAL LEGEND WITH NO RECS
				var rlegend_horizontal_norecs = d3.models.legend()
			  .position("horizontal-norecs").fontSize(20).inputScale(colors)

var svg_legend = d3.select('#header')
				//svg_legend.call(rlegend_horizontal_norecs);
				
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js