<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Life Expectancy</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;
}

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

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

#drop2
{
position:absolute;
left:200px;
top:30px;
}


#svgHolder
{
position:absolute;
left:0px;
top:160px;
}


</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">Life Expectancy at birth, Scotland 2010-2012</h3>
<div id="sourceData">
Source: <a href="http://www.gro-scotland.gov.uk/statistics/theme/life-expectancy/scottish-areas/index.html">Life Expectancy for Administrative Areas within Scotland 2010-2012</a>
</div>
<div id="dropHolder">
<div id="dtext1">Region 1</div>
<div id="dtext2">Region 2</div>
<div id="drop1"></div>
<div id="drop2"></div>
</div>

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



<script type="text/javascript">

//Parse data (next line specifies file location) and launch viz
d3.json("lifeexp.json", function(json){
	//File read
	initData=json;
	labels=initData.labels;
	indices=d3.range(labels.length);
	males=initData.males;
	females=initData.females;
	//Got the data, let's start the interactive components!	
	runViz();

}); //Done with file parse

function runViz(){

// Build the dropdown menus
d3.select("#drop1") 
    .append("select")
    .attr("id","region1")
    .selectAll("option")
    .data(indices)
    .enter()
    .append("option")
    // Provide available text for the dropdown options
    .text(function(d) {return labels[d];})

d3.select('#region1')
    .on("change", function() {

    key = this.selectedIndex;

    svg1.select('#males1')
        .transition()
        .duration(500)
        .ease("quad")
        .attr("width",males[key]*(w-200)/100)
	 

   svg1.selectAll("#labelm1y") .transition()
        .duration(500).text(males[key]+" years").attr("x",105+(w-200)*males[key]/100)
   svg1.selectAll("#labelm1l") .transition()
        .duration(500).text("("+labels[key]+")").attr("x",105+(w-200)*males[key]/100)

   svg1.selectAll("#labelf1y").text(females[key]+" years").transition()
        .duration(500).attr("x",105+(w-200)*females[key]/100)	
   svg1.selectAll("#labelf1l") .transition()
        .duration(500).text("("+labels[key]+")").attr("x",105+(w-200)*females[key]/100)	

    svg1.select('#females1')
        .transition()
        .duration(500)
        .ease("quad")
        .attr("width",females[key]*(w-200)/100)	

});


d3.select("#drop2") 
    .append("select")
    .attr("id","region2")
    .selectAll("option")
    .data(indices)
    .enter()
    .append("option")
    // Provide available text for the dropdown options
    .text(function(d) {return labels[d];})

d3.select('#region2')
    .on("change", function() {

    key = this.selectedIndex;

    svg1.select('#males2')
        .transition()
        .duration(500)
        .ease("quad")
        .attr("width",males[key]*(w-200)/100)
	   
    svg1.selectAll("#labelm2y") .transition()
        .duration(500).text(males[key]+" years").attr("x",105+(w-200)*males[key]/100)
   svg1.selectAll("#labelm2l") .transition()
        .duration(500).text("("+labels[key]+")").attr("x",105+(w-200)*males[key]/100)
 

	svg1.selectAll("#labelf2y").text(females[key]+" years").transition()
        .duration(500).attr("x",105+(w-200)*females[key]/100)	
   svg1.selectAll("#labelf2l") .transition()
        .duration(500).text("("+labels[key]+")").attr("x",105+(w-200)*females[key]/100)	

    svg1.select('#females2')
        .transition()
        .duration(500)
        .ease("quad")
        .attr("width",females[key]*(w-200)/100)
	

});


	var w=900;
	var h=500;
	//Create SVG element
	var svg1 = d3.select("#svgHolder")
					.append("svg")
					.attr("width", w)
					.attr("height", h);	

			
			svg1.append("image").attr("width",80).attr("height",(h-30)/2-10).attr("x",0).attr("y",0).attr("xlink:href","Aiga_men.png");
			svg1.append("image").attr("width",80).attr("height",(h-30)/2-10).attr("x",0).attr("y",(h-30)/2).attr("xlink:href","Aiga_women.png");

	
			svg1.append("rect").attr("width",(w-200)*76.61/100).attr("height",(h-30)/4-20).attr("x",100).attr("y",0).attr("fill","#6a6aff").attr("id","males1");
			svg1.append("text").attr("x",105+(w-200)*76.61/100).attr("y",(h-30)/8-15).attr("font-family","sans-serif").attr("font-size",20).text("76.61 years").attr("id","labelm1y");
			svg1.append("text").attr("x",105+(w-200)*76.61/100).attr("y",(h-30)/8+15).attr("font-family","sans-serif").attr("font-size",20).text("(Scotland)").attr("id","labelm1l");

			svg1.append("rect").attr("width",(w-200)*76.61/100).attr("height",(h-30)/4-20).attr("x",100).attr("y",(h-30)/4).attr("fill","#6a6aff").attr("id","males2");
			svg1.append("text").attr("x",105+(w-200)*76.61/100).attr("y",3*(h-30)/8-15).attr("font-family","sans-serif").attr("font-size",20).text("76.61 years").attr("id","labelm2y");
			svg1.append("text").attr("x",105+(w-200)*76.61/100).attr("y",3*(h-30)/8+15).attr("font-family","sans-serif").attr("font-size",20).text("(Scotland)").attr("id","labelm2l");

			svg1.append("rect").attr("width",(w-200)*80.83/100).attr("height",(h-30)/4-20).attr("x",100).attr("y",(h-30)/2).attr("fill","#ffd2ff").attr("id","females1")
			svg1.append("text").attr("x",105+(w-200)*80.83/100).attr("y",5*(h-30)/8-15).attr("font-family","sans-serif").attr("font-size",20).text("80.83 years").attr("id","labelf1y");
                        svg1.append("text").attr("x",105+(w-200)*80.83/100).attr("y",5*(h-30)/8+15).attr("font-family","sans-serif").attr("font-size",20).text("(Scotland)").attr("id","labelf1l");
			
			svg1.append("rect").attr("width",(w-200)*80.83/100).attr("height",(h-30)/4-20).attr("x",100).attr("y",3*(h-30)/4).attr("fill","#ffd2ff").attr("id","females2")
			svg1.append("text").attr("x",105+(w-200)*80.83/100).attr("y",7*(h-30)/8-15).attr("font-family","sans-serif").attr("font-size",20).text("80.83 years").attr("id","labelf2y");
			svg1.append("text").attr("x",105+(w-200)*80.83/100).attr("y",7*(h-30)/8+15).attr("font-family","sans-serif").attr("font-size",20).text("(Scotland)").attr("id","labelf2l");


			svg1.append("line").attr("x1",100+(w-200)*76.61/100).attr("x2",100+(w-200)*76.61/100).attr("y1",0).attr("y2",4*(h-30)/8-15).attr("stroke","grey").attr("stroke-dasharray","5,5").attr("id","maleAverage");

			svg1.append("line").attr("x1",100+(w-200)*80.83/100).attr("x2",100+(w-200)*80.83/100).attr("y1",(h-30)/2).attr("y2",(h-30)-15).attr("stroke","grey").attr("stroke-dasharray","5,5").attr("id","femaleAverage");

			svg1.append("text").attr("x",100+(w-200)*76.61/100).attr("y",(h-30)/4-5).attr("font-family","sans-serif").attr("font-size",15).text("Scottish average").attr("stroke","grey");

			svg1.append("text").attr("x",100+(w-200)*80.83/100).attr("y",3*(h-30)/4-5).attr("font-family","sans-serif").attr("font-size",15).text("Scottish average").attr("stroke","grey");
     

}//end of runViz
		</script>
	</body>
</html>