tkb · August 14, 2013 16:55
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: 3.5px;
    stroke-opacity: 0.5;
    }

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

    #country-box {
    margin-left: 60px;
    float: none;
    color: gray;
     }
 </style>
 <body>
 <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">
    <form>
    <select data-placeholder="Choose or type countries..." 
            id = "menu" multiple = "multiple" class = "chosen-select" style="width:350px;" >
     <option></option>
    </select> 
    </form>
  </div>

 </html>

 <script>

 var data;

 //initially displayed countries
 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); });


 function round5(x){

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

 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 );
    
    //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) {

  // Get the data into the right format

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

  csv = d3.nest()
      .key(function(d) { return d.country; })
      .sortKeys(d3.ascending)
      .entries(csv)
      .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}
      });

  data = csv;

  color.domain(d3.keys(data).filter(function(key) { return key == "d.country"; }));

  //Set up the axes

  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);

  //Set up the country select and drive changes from there

  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() || [];
          countrySelect = multipleValues
          console.log(countrySelect)
          d3.selectAll(".msgtext").text("");
          //drawLines();
          redraw();
        })

  draw();

 });
  
 function redraw() {

  var countries = svg.selectAll(".country")
      .data(data)
      .attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"})
      .attr("country", function (d) {return d.country;});
 }

 function draw() {

 var countries = svg.selectAll(".country")
      .data(data)
      .attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"});

    countries.enter().append("g")
      .attr("class", "country")
      .attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"})
      .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); });
    
    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: 3.5px;
	stroke-opacity: 0.5;
	}

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

	#country-box {
	margin-left: 60px;
	float: none;
	color: gray;
	}
	</style>
	<body>
	<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">
	<form>
	<select data-placeholder="Choose or type countries..."
	id = "menu" multiple = "multiple" class = "chosen-select" style="width:350px;" >
	<option></option>
	</select>
	</form>
	</div>

	</html>

	<script>

	var data;

	//initially displayed countries
	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); });


	function round5(x){

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

	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 );

	//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) {

	// Get the data into the right format

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

	csv = d3.nest()
	.key(function(d) { return d.country; })
	.sortKeys(d3.ascending)
	.entries(csv)
	.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}
	});

	data = csv;

	color.domain(d3.keys(data).filter(function(key) { return key == "d.country"; }));

	//Set up the axes

	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);

	//Set up the country select and drive changes from there

	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() \|\| [];
	countrySelect = multipleValues
	console.log(countrySelect)
	d3.selectAll(".msgtext").text("");
	//drawLines();
	redraw();
	})

	draw();

	});

	function redraw() {

	var countries = svg.selectAll(".country")
	.data(data)
	.attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"})
	.attr("country", function (d) {return d.country;});
	}

	function draw() {

	var countries = svg.selectAll(".country")
	.data(data)
	.attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"});

	countries.enter().append("g")
	.attr("class", "country")
	.attr("visibility", function(d){return countrySelect.indexOf(d.country) !== -1 ? "visible" : "hidden"})
	.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); });

	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>