tkb · August 14, 2013 12:43
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">

 <style>
    
    svg {
    font: 12px sans-serif;
    float:left;
    }

    .msgtext {
    font: 28px sans-serif;
    fill: gray;
    }

    h1 {
    font: 24px sans-serif;
    color: gray;
    margin-left: 60px;
    margin-bottom: 10px;
    }

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

    .x.axis path {
    fill:none;
    stroke:#000;
    shape-rendering: crispEdges;
    }

    .overlay {
    fill: none;
    pointer-events: all;  
    }

    .country {
    fill: none;
    stroke-width: 4px;
    stroke-opacity: 0.5;
    }

    .country:hover {
    stroke-opacity: 0.9;
    }

    #country-box {
    margin-left: 60px;
    float: none;
    color: gray;
     }

  

 </style>
 <body>

 <!-- include D3 -->  
 <script src="http://d3js.org/d3.v3.js"></script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
 <script src="http://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

 <html>
 <h1>Female Life Table Survivors by Age</h1>
 <div id="country-box">
 <select data-placeholder="Choose countries..." 
        id = "menu" multiple = "multiple" class = "chosen-select" style="width:350px;" >
 <option></option>
 </select> 

 </div>
 </html>

 <script>

 var data;

 var countrySelect = ["Japan", "Sierra Leone"];

 var margin = {top: 20, right: 130, bottom: 40, left: 60},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

 var x = d3.scale.linear()
    .domain([0,85])
    .range([0, width]);
    
 var y = d3.scale.linear()
    .range([height,0]);

 var color = d3.scale.category10();

 var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(19)
    .orient("bottom");

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


 var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.age); })
    .y(function(d) { return y(d.survivors); });

 var bisectAge = d3.bisector(function(d) {return d.age;}).left;


 function round5(x)
 {
    return (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
 }

 //var menu = d3.select("#menu select");

 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width / 1.8)
    .attr("y", height + margin.bottom - 6)
    .text("survival age");

 svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", - margin.left -2)
    .attr("x", - height/ 2.6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)");
    //.text("number of survivors");


  var message = svg.append("text")
    .attr("class", "message")
    .attr("x", width / 16 )
    .attr("y", height / 1.5 );
    
    // Fugly hack because IE can't handle foreignObjects or SVG wrapping correctly
    message.append("tspan").attr("id", "msg-country").attr("class", "msgtext")
      .attr("x", width / 25 ).attr("dy", "1em").text("In Japan");
    message.append("tspan").attr("id", "msg-percent").attr("class", "msgtext")
      .attr("x", width / 25 ).attr("dy", "1em").text("64.7% of females ");
    message.append("tspan").attr("id", "msg-age").attr("class", "msgtext")
      .attr("x", width / 25 ).attr("dy", "1em").text("survive until they are 85");

 d3.csv("survivors.csv", function(error, csv) {
  data = csv;
  redraw();
 });
  
   
 function redraw() {

  data = data.map( function (d) { 
    return { 
      country: d.country,
      age: +d.age,
      survivors: +d.survivors
      }; 
  });   

  data = d3.nest()
      .key(function(d) { return d.country; })
      .sortKeys(d3.ascending)
      .entries(data)
      .map(function(d) {
        var country = d.key
        var values = d.values.map(function(dd) {      
          return {age: dd.age, survivors: dd.survivors}
        })
        return {'country':country, 'values':values}
      });

 
  var menubar = d3.select("body").select("#menu")
      //.on("mouseover",enumerate)
      .attr("class","chosen-select")
      .selectAll("option").data(data)
      .enter()
      .append("option")
      .text(function(d) {return d.country;});

  $(".chosen-select").chosen({width: "470px"})
        .change(function(evt,params){
          var multipleValues = $("#menu").val() || [];
          //console.log(multipleValues)
          countrySelect = multipleValues;
          d3.selectAll(".msgtext").text("");
          drawLines();
        })

  y.domain([0, d3.max(data, function(d) { 
    return d3.max(d.values, function (dd) { return dd.survivors;}); })]);
                                                                                   
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  

  drawLines();
  
 function drawLines() {

  var countries = svg.selectAll(".country")
      .remove()
      .data(data)
      .enter().append("g")
      .filter(function(d){ 
        return countrySelect.indexOf(d.country) !== -1
        })          
      .attr("class", "country")
      .attr("country", function (d) {return d.country;});

  countries.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values);})
      .on("mouseover", mouseover)
      .style("stroke", function(d) { return color(d.country); });
  
  //d3.select("#message-box").selectAll("p").remove();
  
  countries.append("text")
     .attr("class", "names")
     .attr("transform", function(d) {
      var xmax = d3.max(d.values, function (dd) { return dd.age;})
      var ymax = d3.min(d.values, function (dd) { return dd.survivors;})
      return "translate(" + x(xmax) + "," + y(ymax) + ")"; })
     .attr("x", 4)
     .attr("dy", ".35em")
     .style("fill", function(d) { return color(d.country); })
     .text(function(d) { return d.country; })

  }

  function mouseover() {
                       
        var x0 = x.invert(d3.mouse(this)[0]);
        
        var country = this.__data__.country;
        var values = this.__data__.values;
        var pos = values.map(function(d) { return d.age; }).indexOf(round5(x0));

        d3.select("#msg-country").text("In " + country); 
        d3.select("#msg-percent").text(Math.round(values[pos].survivors/100000 * 1000) / 10 +"% of females"); 
        d3.select("#msg-age").text("survive until they are " + round5(x0)); 

      }

 }            

 </script>

 
 </body>
diff --git a/survivors.csv b/survivors.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">

	<style>

	svg {
	font: 12px sans-serif;
	float:left;
	}

	.msgtext {
	font: 28px sans-serif;
	fill: gray;
	}

	h1 {
	font: 24px sans-serif;
	color: gray;
	margin-left: 60px;
	margin-bottom: 10px;
	}

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

	.x.axis path {
	fill:none;
	stroke:#000;
	shape-rendering: crispEdges;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.country {
	fill: none;
	stroke-width: 4px;
	stroke-opacity: 0.5;
	}

	.country:hover {
	stroke-opacity: 0.9;
	}

	#country-box {
	margin-left: 60px;
	float: none;
	color: gray;
	}



	</style>
	<body>

	<!-- include D3 -->
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
	<script src="http://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

	<html>
	<h1>Female Life Table Survivors by Age</h1>
	<div id="country-box">
	<select data-placeholder="Choose countries..."
	id = "menu" multiple = "multiple" class = "chosen-select" style="width:350px;" >
	<option></option>
	</select>

	</div>
	</html>

	<script>

	var data;

	var countrySelect = ["Japan", "Sierra Leone"];

	var margin = {top: 20, right: 130, bottom: 40, left: 60},
	width = 960 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.domain([0,85])
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height,0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(19)
	.orient("bottom");

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


	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.age); })
	.y(function(d) { return y(d.survivors); });

	var bisectAge = d3.bisector(function(d) {return d.age;}).left;


	function round5(x)
	{
	return (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
	}

	//var menu = d3.select("#menu select");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", width / 1.8)
	.attr("y", height + margin.bottom - 6)
	.text("survival age");

	svg.append("text")
	.attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("y", - margin.left -2)
	.attr("x", - height/ 2.6)
	.attr("dy", ".75em")
	.attr("transform", "rotate(-90)");
	//.text("number of survivors");


	var message = svg.append("text")
	.attr("class", "message")
	.attr("x", width / 16 )
	.attr("y", height / 1.5 );

	// Fugly hack because IE can't handle foreignObjects or SVG wrapping correctly
	message.append("tspan").attr("id", "msg-country").attr("class", "msgtext")
	.attr("x", width / 25 ).attr("dy", "1em").text("In Japan");
	message.append("tspan").attr("id", "msg-percent").attr("class", "msgtext")
	.attr("x", width / 25 ).attr("dy", "1em").text("64.7% of females ");
	message.append("tspan").attr("id", "msg-age").attr("class", "msgtext")
	.attr("x", width / 25 ).attr("dy", "1em").text("survive until they are 85");

	d3.csv("survivors.csv", function(error, csv) {
	data = csv;
	redraw();
	});


	function redraw() {

	data = data.map( function (d) {
	return {
	country: d.country,
	age: +d.age,
	survivors: +d.survivors
	};
	});

	data = d3.nest()
	.key(function(d) { return d.country; })
	.sortKeys(d3.ascending)
	.entries(data)
	.map(function(d) {
	var country = d.key
	var values = d.values.map(function(dd) {
	return {age: dd.age, survivors: dd.survivors}
	})
	return {'country':country, 'values':values}
	});


	var menubar = d3.select("body").select("#menu")
	//.on("mouseover",enumerate)
	.attr("class","chosen-select")
	.selectAll("option").data(data)
	.enter()
	.append("option")
	.text(function(d) {return d.country;});

	$(".chosen-select").chosen({width: "470px"})
	.change(function(evt,params){
	var multipleValues = $("#menu").val() \|\| [];
	//console.log(multipleValues)
	countrySelect = multipleValues;
	d3.selectAll(".msgtext").text("");
	drawLines();
	})

	y.domain([0, d3.max(data, function(d) {
	return d3.max(d.values, function (dd) { return dd.survivors;}); })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);



	drawLines();

	function drawLines() {

	var countries = svg.selectAll(".country")
	.remove()
	.data(data)
	.enter().append("g")
	.filter(function(d){
	return countrySelect.indexOf(d.country) !== -1
	})
	.attr("class", "country")
	.attr("country", function (d) {return d.country;});

	countries.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values);})
	.on("mouseover", mouseover)
	.style("stroke", function(d) { return color(d.country); });

	//d3.select("#message-box").selectAll("p").remove();

	countries.append("text")
	.attr("class", "names")
	.attr("transform", function(d) {
	var xmax = d3.max(d.values, function (dd) { return dd.age;})
	var ymax = d3.min(d.values, function (dd) { return dd.survivors;})
	return "translate(" + x(xmax) + "," + y(ymax) + ")"; })
	.attr("x", 4)
	.attr("dy", ".35em")
	.style("fill", function(d) { return color(d.country); })
	.text(function(d) { return d.country; })

	}

	function mouseover() {

	var x0 = x.invert(d3.mouse(this)[0]);

	var country = this.__data__.country;
	var values = this.__data__.values;
	var pos = values.map(function(d) { return d.age; }).indexOf(round5(x0));

	d3.select("#msg-country").text("In " + country);
	d3.select("#msg-percent").text(Math.round(values[pos].survivors/100000 * 1000) / 10 +"% of females");
	d3.select("#msg-age").text("survive until they are " + round5(x0));

	}

	}

	</script>


	</body>