majomo/coreHousingNeed-prov-tert.csv

## coreHousingNeed-prov-tert.csv

          
            Geography
            Year
            Household_Count
            Average_Household_Income
            Average_Shelter_Cost
            Average_STIR

            
                NEWFOUNDLAND and LABRADOR
              2011
              201875
              70936
              754
              18.3

            
                PRINCE EDWARD ISLAND
              2011
              53620
              68301
              817
              20.1

            
                NOVA SCOTIA
              2011
              369760
              69362
              838
              20.7

            
                NEW BRUNSWICK
              2011
              298955
              67122
              757
              19

            
                QUEBEC
              2011
              3224260
              68926
              834
              21.3

            
                ONTARIO
              2011
              4600055
              89873
              1175
              22.8

            
                MANITOBA
              2011
              423200
              74940
              846
              19.2

            
                SASKATCHEWAN
              2011
              359375
              81353
              910
              19.6

            
                ALBERTA
              2011
              1285165
              106241
              1249
              21.1

            
                BRITISH COLUMBIA
              2011
              1610540
              82674
              1136
              23.4

            
                YUKON
              2011
              12950
              92906
              1084
              19.2

            
                NORTHWEST TERRITORIES
              2011
              14150
              116039
              1350
              17.5

            
                NUNAVUT
              2011
              8545
              100417
              852
              11.1

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8">
        <title>Average Household Income by Province and Territory - 2011</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <style type="text/css">

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

			#container{
				width: 700px;
				margin-left:auto;
				margin-right:auto;
				margin-top:50px;
				padding:30px;
				background-color:white;
				box-shadow: 1px 1px 3px 4px #ccc;
			}

      p {
				font-size: 16px;
				color: #4e5a64;
				margin: 15px 0 50px 0;
			}
      h1 {
				font-weight: 700;
				color: #4e5a64;
				font-size: 32px;

			}

		a:link{
			text-decortion:none;
			color:gray;
		}
		a:hover{
			text-decoration: underline;
		}
		a:visited {
			color:gray;
		}
		a:active{
			color: skyblue;
		}

	svg {
				background-color: white;
			}
			g.bar text, text {
   cursor: pointer;
}
	g.bar text {
				font-size: 14px;
				font-weight: normal;
				text-anchor: end;
				opacity: 0;
				fill: white;
				stroke: none;
			}

			g.bar:hover rect {
				fill: skyblue;
			}

			g.bar:hover text {
				opacity: 1;
			}

      .axis path,
      .axis line {
        fill: none;
        stroke: #4e5a64;
        shape-rendering; crispEdges;
      }

      .axis text {
        font-family: sans-serif;
        font-size: 12px;
        fill: #4e5a64;
        stroke: none;

      }

      .y.axis path,
      .y.axis line {
        opacity: 0;
      }

    </style>
  </head>
<body>
<div id="container">
		<h1>Core Housing Need in Canada - Part 1</h1>

		<p>Average Household Income ($) by Province and Territory - 2011 <br>Source: <a href="http://cmhc.beyond2020.com/">Canada Mortgage and Housing Corporation</a>, 2015</p>


 </div>

  <script type="text/javascript">


			var w = 650;
			var h = 450;
			var padding = [ 20, 10, 30, 240 ];  //Top, right, bottom, left


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

			var heightScale = d3.scale.ordinal()
								.rangeBands([ padding[1], h/1.2 - padding[1] ], 0.1);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom")
							.ticks(7)
							.tickFormat(function(d){return "$" + d; });


			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");


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


			d3.csv("coreHousingNeed-prov-tert.csv", function(data) {

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

				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.Average_Household_Income;
				}) ]);

				heightScale.domain(data.map(function(d) { return d.Geography; } ));


				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");
								//"bar" class help us differentiate these groups
								//from the groups created later for axes

				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.Geography);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "steelblue");

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.Average_Household_Income) - 3;
					})
					.attr("y", function(d) {
						return heightScale(d.Geography) + 17;
					})
					.text(function(d) {
						return "Average household income" + " " + "$" + d.Average_Household_Income;
					})


				rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.Average_Household_Income);
					});

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h/1.11 - padding[2]) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);

			});


		</script>

	</body>
</html>
Geography	Year	Household_Count	Average_Household_Income	Average_Shelter_Cost	Average_STIR
NEWFOUNDLAND and LABRADOR	2011	201875	70936	754	18.3
PRINCE EDWARD ISLAND	2011	53620	68301	817	20.1
NOVA SCOTIA	2011	369760	69362	838	20.7
NEW BRUNSWICK	2011	298955	67122	757	19
QUEBEC	2011	3224260	68926	834	21.3
ONTARIO	2011	4600055	89873	1175	22.8
MANITOBA	2011	423200	74940	846	19.2
SASKATCHEWAN	2011	359375	81353	910	19.6
ALBERTA	2011	1285165	106241	1249	21.1
BRITISH COLUMBIA	2011	1610540	82674	1136	23.4
YUKON	2011	12950	92906	1084	19.2
NORTHWEST TERRITORIES	2011	14150	116039	1350	17.5
NUNAVUT	2011	8545	100417	852	11.1
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Average Household Income by Province and Territory - 2011</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
	<style type="text/css">

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

	#container{
	width: 700px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	padding:30px;
	background-color:white;
	box-shadow: 1px 1px 3px 4px #ccc;
	}

	p {
	font-size: 16px;
	color: #4e5a64;
	margin: 15px 0 50px 0;
	}
	h1 {
	font-weight: 700;
	color: #4e5a64;
	font-size: 32px;

	}

	a:link{
	text-decortion:none;
	color:gray;
	}
	a:hover{
	text-decoration: underline;
	}
	a:visited {
	color:gray;
	}
	a:active{
	color: skyblue;
	}

	svg {
	background-color: white;
	}
	g.bar text, text {
	cursor: pointer;
	}
	g.bar text {
	font-size: 14px;
	font-weight: normal;
	text-anchor: end;
	opacity: 0;
	fill: white;
	stroke: none;
	}

	g.bar:hover rect {
	fill: skyblue;
	}

	g.bar:hover text {
	opacity: 1;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #4e5a64;
	shape-rendering; crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	fill: #4e5a64;
	stroke: none;

	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<h1>Core Housing Need in Canada - Part 1</h1>

	<p>Average Household Income ($) by Province and Territory - 2011 <br>Source: <a href="http://cmhc.beyond2020.com/">Canada Mortgage and Housing Corporation</a>, 2015</p>


	</div>

	<script type="text/javascript">


	var w = 650;
	var h = 450;
	var padding = [ 20, 10, 30, 240 ]; //Top, right, bottom, left



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

	var heightScale = d3.scale.ordinal()
	.rangeBands([ padding[1], h/1.2 - padding[1] ], 0.1);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom")
	.ticks(7)
	.tickFormat(function(d){return "$" + d; });



	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");



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



	d3.csv("coreHousingNeed-prov-tert.csv", function(data) {

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

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.Average_Household_Income;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.Geography; } ));


	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");
	//"bar" class help us differentiate these groups
	//from the groups created later for axes

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Geography);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "steelblue");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.Average_Household_Income) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.Geography) + 17;
	})
	.text(function(d) {
	return "Average household income" + " " + "$" + d.Average_Household_Income;
	})


	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.Average_Household_Income);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h/1.11 - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);

	});


	</script>

	</body>
	</html>