Chapter 5 : Scatterplot

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

circle:hover {
				fill: #A39;
			}

.axis text {
			    font-family: sans-serif;
			    font-size: 11px;
			}
		</style>
	</head>
	<body>
		<h2>
		Langages speaked proportion in canadian circonscriptions : 
		</h2>
		<p>
		Proportion of primarily english speaking people in function of the proportion of primarily french speaking people in canadian circonscriptions (source : <a href="https://www.statcan.gc.ca/"> StatCan</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,10,50] //top, right, bottom, left

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

var yScale = d3.scale.linear()
                    .range([padding[0], h-padding[2]]);
		
		var xAxis = d3.svg.axis()
		                  .scale(xScale)
		                  .orient("top")
		                  .ticks(5);

var yAxis = d3.svg.axis()
		                  .scale(yScale)
		                  .orient("left")
						  .ticks(5);
		
		//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([0, d3.max(data, function(d){return d.TxFrancais})]);

svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")
					.attr("cx", function(d){
						return xScale(d.TxAnglais);
					})
					.attr("cy", function(d){
						return yScale(d.TxFrancais);
					})
					.attr("r", 5)
					.attr("fill","rgb(255,100,0)")
					.append("title")
					.attr("x", function(d){return xScale(d.TxAnglais)})
					.attr("y", function(d){
						return yScale(d.TxFrancais);
					})
					.text(function(d){
						return "Circonscription " + d.Geo_code + " : English : " + (100*parseFloat(d.TxAnglais)).toFixed(3)+" % and French : "+ (100*parseFloat(d.TxFrancais)).toFixed(3) + " %";
					})
				
				svg.append("g")
					.attr("class", "x axis")
				    .attr("transform", "translate("+0+","+ (padding[0])+ ")")
				 	.call(xAxis)
					.append("text")
				    .attr("class", "label")
				    .attr("x", (w - 22))
    				.attr("y", -6)
				    .style("text-anchor", "end")
				    .text("English speakers");	
				
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate("+ (padding[3]) +","+0+")")
				  	.call(yAxis)
				    .append("text")
				    .attr("class", "label")
				    .attr("transform", "rotate(-90)")
				    .attr("x", -55)
				    .attr("y", 5)
				    .attr("dy", ".91em")
				    .style("text-anchor", "end")
				    .text("French speakers");

});

</script>

</body>
</html>

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

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