Assignment module 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise Module 4</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: "nyt-cheltenham",georgia,Lucida sans,
					"times new roman",times,serif;
				background-color: #CCCC8F;
				padding: 50px;
				max-width: 1000px;
			}
			h1 {
				font-size: 28px;
				border-top: solid 8px #807166;
				border-bottom: solid 8px #807166;
			}
			p {
				font-size: 14px;
				line-height: 18px;		
				padding: 30px;	
				border-top: solid 2px #222222;				
			}
			svg {
				background-color: white;
			}			
			rect.bars {
				stroke: #222222;
				stroke-width: 2;
				stroke-opacity: 1;
				fill-opacity: 0.8;		
			}
			rect:hover {
				fill: #E1C600;
			}			
			
			text.gtitle {
				text-anchor: middle ;
			}
			text.label {
				text-anchor: middle ;
			}			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: georgia,Lucida sans,
					"times new roman",times,serif;
				font-size: 14px;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}			
			.y.axis text {
				text-anchor: middle ;
			}
		</style>
	</head>
	<body>
	
		<h1> GDP per capita vs. top 1%'s share of income </h1>
		
		<p> This simple bar chart shows side by side the GDP per capita <em>(left)</em> and the share of income
			detained by the top1% <em>(right)</em> in a selection of countries.
			Hover over the bar to get information about the country and measures. </p>

var wid=700, hei=400, pad=40, middle=150 ;
			var just=50, extrapad=40 ;
		
			// scales and axes
			var scaleGDP = d3.scale.linear().range([0,wid/2]) ;
			var scaleGDPneg = d3.scale.linear().range([-1*wid/2,0]) ;
			var scaletop1 = d3.scale.linear().range([0,wid/2]) ;
			
			var yscale = d3.scale.ordinal()
							.rangeBands([0,hei]) ;
			
			var xleft = d3.svg.axis()
							.scale(scaleGDPneg)
						//	.scale(scaleGDP)
							.orient("bottom");
			var xright = d3.svg.axis()
							.scale(scaletop1)
							.orient("bottom");

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + (pad+middle+wid/2) + "," + (hei + pad) + ")")
					.call(xright);	
					
			//	svg.append("g")
			//		.attr("class", "y axis")
			//		.attr("transform", "translate(" + (pad+wid/2+middle/2-just) + "," + (pad) + ")")
			//		.call(yAxis);	
				ylabel = svg.selectAll(".label")
									.data(data)
									.enter()
									.append("text")
										.attr("class","label");
									
				ylabel.attr("x",(pad+wid/2+middle/2))
					.attr("y",function(d){
						return pad+0.4*yscale.rangeBand()+yscale(d.Country); })
					.text(function(d){ return d.Country; });
					
				svg.append("text").attr("class","gtitle")
					.attr("x",(pad+wid/4))
					.attr("y",pad/2)
					.text("GDP per capita (in $)") ;
					
				svg.append("text").attr("class","gtitle")
					.attr("x",(pad+3*wid/4+middle))
					.attr("y",pad/2)
					.text("Top 1%'s share of income (in %)") ;					
								
			})
						
		</script>

</body>
</html>

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

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