<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gender ratio by age, Scotland 2013</title>
		<script src="../d3.v3.min.js"></script>
<style>

.male {
    fill: #00ffff;
    stroke-width: 0;
 }
.female {
    fill: #6600ff;
    stroke-width: 0;
}


body{
font: 100% "Arial", sans-serif;
margin: 20px;
color:#3c0050;
}

#imgLinks
{
position:absolute;
left:10px;
top:25px;
}

#mapTitle
{
position:absolute;
left:260px;
top:-5px;
height:25px;
width:700px;
}

#sourceData
{
position:absolute;
left:260px;
top:45px;
height:20px;
width:700px;
}

#dropHolder
{
position:absolute;
left:260px;
top:90px;
}

#dtext1
{
position:absolute;
left:0px;
top:0px;
width:300px;
}

#drop1
{
position:absolute;
left:100px;
top:0px;
width:100px;
}


#svgHolder
{
position:absolute;
left:80px;
top:130px;
}


</style>
</head>

<body>

<div id="imgLinks"><a href="http://www.nrscotland.gov.uk/" target="_blank"><img src="../NRS_smalllogo.png" border = "0" alt="NRS Home Page"/></a></div>
<h3 id="mapTitle">Gender ratio by age, Scotland 2013</h3>
<div id="sourceData">
Source: <a href="http://www.gro-scotland.gov.uk/statistics/theme/population/estimates/mid-year/mid-2013/list-of-tables.html">Mid-2013 Population Estimates Scotland</a>,
<br><em>Table 1 Estimated population by age and sex, Scotland, mid-2013</em> (<a href="http://www.gro-scotland.gov.uk/files2/stats/population-estimates/mid-2013/13mype-cahb-tab1.xls" target="_blank">Excel</a>&nbsp;&nbsp;&nbsp; <a href="http://www.gro-scotland.gov.uk/files2/stats/population-estimates/mid-2013/13mype-cahb-tab1.csv" target="_blank">CSV</a>&nbsp;&nbsp;&nbsp; <a href="http://www.gro-scotland.gov.uk/files2/stats/population-estimates/mid-2013/13mype-cahb-tab1.pdf" target="_blank">PDF</a>)

</div>
<div id="dropHolder">
<div id="dtext1">Age Range</div>
<div id="drop1"></div>
</div>

<div id="svgHolder">
</div>



<script type="text/javascript">
//Things you might want to change are all here!
var numCells=100;
var w=400;
var h=500;
var dataFile="frequency.csv";
var type1color="#9ebcda";
var type1icon="Aiga_men.png";
var type2color="#8856a7";
var type2icon="Aiga_women.png";

var categories = [];
d3.csv(dataFile, function(csv) {
  	categories = csv;
	// Build the dropdown menu
	d3.select("#drop1") //replace with a named entity to position!
   		.append("select")
    		.selectAll("option")
   	 	.data(categories)
   	 	.enter()
   	 	.append("option")
   	 	.text(function(d) {return d.label;})

	d3.select('select')
    		.on("change", function() {
			key = this.selectedIndex;
			
			svg.selectAll('rect')
        			.transition()
        			.duration(300)
        			.ease("quad")
        			.attr("fill",function(d) { 
         				if(d<=categories[key].value)
           					{return type1color;}
         				else 
           					{return  type2color;}
        						})


    			svg.selectAll('image')
        			.transition()
        			.duration(300)
        			.ease("quad")
        			.attr("xlink:href",function(d) { 
         				if(d<=categories[key].value)
           					{return type1icon;}
         				else 
           					{return type2icon;}
        							})

					});

                        var cw=w/10;
                        var ch=h/10;
                        var cutoff=categories[0].value; // the number of type 1 records to show initially
			var svg = d3.select("#svgHolder")
				.append("svg")
				.attr("width", w)
				.attr("id","svgMain")
				.attr("height", h);


			var dataset=d3.range(1,101);
                        var cells = svg.selectAll("rect")
                 		.data(dataset)
                 		.enter()
                 		.append("rect");
        

			cells.attr("width",cw)
       				.attr("height", ch)
       				.attr("x", function(d) {
            				return cw*((d-1)%10);
       							})
       				.attr("y",function(d) {
            				return ch*Math.floor((d-1)/10);
       						      })
       				.attr("fill",function(d) { 
         				if(d<=cutoff)
           					{return type1color;}
         				else 
           					{return type2color;}
        						});

              		var imgs= svg.selectAll("image")
               			.data(dataset)
               			.enter()
               			.append("image");

            		imgs.attr("width",cw-4)
       				.attr("height", ch-4)
       				.attr("x", function(d) {
            				return 2+cw*((d-1)%10);
       							})
       				.attr("y",function(d) {
            				return 2+ch*Math.floor((d-1)/10);
       							})
      				 .attr("xlink:href",function(d) { 
         				if(d<=cutoff)
           					{return type1icon;}
         				else 
           					{return type2icon;}
        							});

});
		</script>
	</body>
</html>