Module 4

<!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;
			}

rect:hover {
				fill: #A39;
			}

.axis text {
			    font-family: sans-serif;
			    font-size: 11px;
			}
			.y.axis path,
			.y.axis line {
			    opacity:0;
			}
		</style>
	</head>
	<body>
		<h2>
		English speaking persons proportion in canadian circonscriptions : 
		</h2>
		<p>

</p>
		<script type="text/javascript">

var h = 15*400;
		var w = 600;

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

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

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

var yScale = d3.scale.ordinal()
                    .rangeRoundBands([padding[0], h-padding[2]], 0.2 );
		
		var xAxis = d3.svg.axis()
		                  .scale(xScale)
		                  .orient("top")
		                  .ticks(5);
		
		var yAxis = d3.svg.axis()
		                  .scale(yScale)
		                  .orient("left");
		
		//Load in contents of CSV file
		d3.csv("https://gist.githubusercontent.com/Alfsig/575130501fb6c7582857/raw/b3f68528cf6580dfc50a29b486d1d2a3e9f86434/data_langage.csv", function(data) {
				console.log(data);

data.sort(function(a,b){
					return d3.descending(+a.TxAnglais, +b.TxAnglais)
				});

xScale.domain([0, d3.max(data, function(d){return d.TxAnglais})]);
				yScale.domain(data.map(function(d){return d.Geo_code}));

//console.log(data.map(function (d) { return "Circonscription " + d.Geo_code + " :"; }))

//yAxis.ticks(data.length)

svg.selectAll("rect")
					.data(data)
					.enter()
					.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d){
						return yScale(d.Geo_code);
					})
					.attr("width", function(d){
						return xScale(d.TxAnglais);
					})
					.attr("height", yScale.rangeBand())
					.attr("fill","rgb(255,100,0)")
					.append("title")
					.attr("x", function(d){return xScale(d.TxAnglais)})
					.attr("y", function(d){
						return yScale(d.Geo_code);
					})
					.text(function(d){
						return "Circonscription " + d.Geo_code + " : " + (100*parseFloat(d.TxAnglais)).toFixed(3)+" %";
					})
				
				svg.append("g")
					.attr("class", "x axis")
				    .attr("transform", "translate("+padding[3]+","+ (h-padding[2])+ ")")
				 	.call(xAxis)
				
				console.log(padding[3])
				
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate("+ (padding[3]-5) +",0)")
				  	.call(yAxis);

});

</script>

</body>
</html>

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

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