hwangmoretime · February 3, 2016 17:59
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  width: 960px;
  margin: auto;
  position: relative;
 }

 svg {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

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

 .axis--y path {
  display: none;
 }

 .androgs {
  fill: none;
  stroke: #aaa;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.5px;
 }

 .androg--hover {
  stroke: #000;
 }

 .focus text {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 }

 #form {
  position: absolute;
  top: 20px;
  right: 30px;
 }

 rect {
  fill: none;
  pointer-events: all;
 }

 </style>
 <label id="form">
  Display
  <select id="form_select">
  </select>
  Lines
 </label>
 <script src="http://d3js.org/d3.v3.js"></script>
 <script>

 var years,
    yearFormat = d3.time.format("%Y");

 var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 var x = d3.time.scale()
    .range([0, width]);

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

 var color = d3.scale.category20();

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

 var focus;

 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("rect")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemoved);

 var paths = [],
    shown_paths = [];
 d3.csv("steady_andro.csv", type, function(error, androgs) {
  x.domain(d3.extent(years));
  y.domain([0, d3.max(androgs, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]).nice();

  svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis()
        .scale(x)
        .orient("bottom"));

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10, "%"))
    .append("text")
      .attr("x", 4)
      .attr("dy", ".32em")
      .style("font-weight", "bold")
      .text("Percent Female");

  svg.append("g")
      .attr("class", "androgs")
    .selectAll("path")
      .data(androgs)
    .enter().append("path")
      .attr("d", function(d) { d.line = this; return line(d.values); });

  focus = svg.append("g")
      .attr("transform", "translate(-100,-100)")
      .attr("class", "focus");

  focus.append("circle")
      .attr("r", 3.5);

  focus.append("text")
      .attr("y", -10);

  var form_select = d3.select("#form_select");

  form_select.selectAll("option")
      .data(androgs)
    .enter().append("option")
      .attr("value", function(d, i) { return i+1; })
      .text(function(d, i) { return i+1; })

  // set the last option as selected
  var all_options = d3.selectAll("option")[0];
  d3.select(all_options[all_options.length - 1])
    .attr("selected", "selected");

  form_select.on("change", change);

  paths = androgs;
  shown_paths = paths;
 });

 function change() {
  var n_lines = d3.select("#form_select").property("value");
  shown_paths = paths.slice(0, n_lines);

  var parent_g = svg.select(".androgs");

  var rendered_paths = parent_g.selectAll("path")
    .data(shown_paths);

  rendered_paths.exit().remove();

  rendered_paths.enter().append("path")
      .attr("d", function(d) { d.line = this; return line(d.values); });
 }

 function mousemoved() {
  d3.select(".androg--hover").classed("androg--hover", false);

  var m = d3.mouse(this),
      min_path_index = 0;
  for (var i = 0; i < shown_paths.length; i++) {
    shown_paths[i].distance = closestPoint(shown_paths[i].line, m);
    if (shown_paths[i].distance.distance < shown_paths[min_path_index].distance.distance) {
      min_path_index = i;
    }
  };
  
  var min_path = shown_paths[min_path_index];
  d3.select(min_path.line).classed("androg--hover", true);
  //min_path.line.parentNode.appendChild(min_path.line);
  focus.attr("transform", "translate(" + min_path.distance[0] + "," + min_path.distance[1] + ")");
  focus.select("text").text(min_path.name);
 }

 function removedStartingZeroes(d) {
  var zero_counter = 0;
  var j = 0;
  while (j < d.values.length) {
    if (d.values[j].value != 0.0) {
      break;
    }
    j++;
    zero_counter++;
  }
  min_datestr = 'Jan 1 ' + (1880 + zero_counter).toString();
  max_datestr = 'Jan 1 ' + "2013";
  x.domain([new Date(min_datestr), new Date(max_datestr)]);
  return line(d.values.slice(zero_counter, d.values.length)); 
 }

 function closestPoint(pathNode, point) {
  var pathLength = pathNode.getTotalLength(),
      numberOfItems = pathNode.getPathSegAtLength(pathLength),
      precision = (pathLength / numberOfItems) * .5,
      best,
      bestLength,
      bestDistance = Infinity;

  // linear scan for coarse approximation
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
      best = scan, bestLength = scanLength, bestDistance = scanDistance;
    }
  }

  // binary search for precise estimate
  precision *= .5;
  while (precision > .5) {
    var before,
        after,
        beforeLength,
        afterLength,
        beforeDistance,
        afterDistance;
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
      best = before, bestLength = beforeLength, bestDistance = beforeDistance;
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
      best = after, bestLength = afterLength, bestDistance = afterDistance;
    } else {
      precision *= .5;
    }
  }

  best = [best.x, best.y];
  best.distance = Math.sqrt(bestDistance);
  return best;

  function distance2(p) {
    var dx = p.x - point[0],
        dy = p.y - point[1];
    return dx * dx + dy * dy;
  }
 }

 function type(d, i) {
  if (!i) years = Object.keys(d).map(yearFormat.parse).filter(Number);
  var androg = {
    name: d.name.replace(/ (msa|necta div|met necta|met div)$/i, ""),
    values: null
  };
  androg.values = years.map(function(m) {
    return {
      androg: androg,
      date: m,
      value: d[yearFormat(m)]
    };
  });
  return androg;
 }

 </script>
diff --git a/steady_andro.csv b/steady_andro.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	width: 960px;
	margin: auto;
	position: relative;
	}

	svg {
	font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

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

	.axis--y path {
	display: none;
	}

	.androgs {
	fill: none;
	stroke: #aaa;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 1.5px;
	}

	.androg--hover {
	stroke: #000;
	}

	.focus text {
	text-anchor: middle;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
	}

	#form {
	position: absolute;
	top: 20px;
	right: 30px;
	}

	rect {
	fill: none;
	pointer-events: all;
	}

	</style>
	<label id="form">
	Display
	<select id="form_select">
	</select>
	Lines
	</label>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>

	var years,
	yearFormat = d3.time.format("%Y");

	var margin = {top: 20, right: 30, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, width]);

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

	var color = d3.scale.category20();

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

	var focus;

	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("rect")
	.attr("width", width)
	.attr("height", height)
	.on("mousemove", mousemoved);

	var paths = [],
	shown_paths = [];
	d3.csv("steady_andro.csv", type, function(error, androgs) {
	x.domain(d3.extent(years));
	y.domain([0, d3.max(androgs, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]).nice();

	svg.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.svg.axis()
	.scale(x)
	.orient("bottom"));

	svg.append("g")
	.attr("class", "axis axis--y")
	.call(d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10, "%"))
	.append("text")
	.attr("x", 4)
	.attr("dy", ".32em")
	.style("font-weight", "bold")
	.text("Percent Female");

	svg.append("g")
	.attr("class", "androgs")
	.selectAll("path")
	.data(androgs)
	.enter().append("path")
	.attr("d", function(d) { d.line = this; return line(d.values); });

	focus = svg.append("g")
	.attr("transform", "translate(-100,-100)")
	.attr("class", "focus");

	focus.append("circle")
	.attr("r", 3.5);

	focus.append("text")
	.attr("y", -10);

	var form_select = d3.select("#form_select");

	form_select.selectAll("option")
	.data(androgs)
	.enter().append("option")
	.attr("value", function(d, i) { return i+1; })
	.text(function(d, i) { return i+1; })

	// set the last option as selected
	var all_options = d3.selectAll("option")[0];
	d3.select(all_options[all_options.length - 1])
	.attr("selected", "selected");

	form_select.on("change", change);

	paths = androgs;
	shown_paths = paths;
	});

	function change() {
	var n_lines = d3.select("#form_select").property("value");
	shown_paths = paths.slice(0, n_lines);

	var parent_g = svg.select(".androgs");

	var rendered_paths = parent_g.selectAll("path")
	.data(shown_paths);

	rendered_paths.exit().remove();

	rendered_paths.enter().append("path")
	.attr("d", function(d) { d.line = this; return line(d.values); });
	}

	function mousemoved() {
	d3.select(".androg--hover").classed("androg--hover", false);

	var m = d3.mouse(this),
	min_path_index = 0;
	for (var i = 0; i < shown_paths.length; i++) {
	shown_paths[i].distance = closestPoint(shown_paths[i].line, m);
	if (shown_paths[i].distance.distance < shown_paths[min_path_index].distance.distance) {
	min_path_index = i;
	}
	};

	var min_path = shown_paths[min_path_index];
	d3.select(min_path.line).classed("androg--hover", true);
	//min_path.line.parentNode.appendChild(min_path.line);
	focus.attr("transform", "translate(" + min_path.distance[0] + "," + min_path.distance[1] + ")");
	focus.select("text").text(min_path.name);
	}

	function removedStartingZeroes(d) {
	var zero_counter = 0;
	var j = 0;
	while (j < d.values.length) {
	if (d.values[j].value != 0.0) {
	break;
	}
	j++;
	zero_counter++;
	}
	min_datestr = 'Jan 1 ' + (1880 + zero_counter).toString();
	max_datestr = 'Jan 1 ' + "2013";
	x.domain([new Date(min_datestr), new Date(max_datestr)]);
	return line(d.values.slice(zero_counter, d.values.length));
	}

	function closestPoint(pathNode, point) {
	var pathLength = pathNode.getTotalLength(),
	numberOfItems = pathNode.getPathSegAtLength(pathLength),
	precision = (pathLength / numberOfItems) * .5,
	best,
	bestLength,
	bestDistance = Infinity;

	// linear scan for coarse approximation
	for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
	if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
	best = scan, bestLength = scanLength, bestDistance = scanDistance;
	}
	}

	// binary search for precise estimate
	precision *= .5;
	while (precision > .5) {
	var before,
	after,
	beforeLength,
	afterLength,
	beforeDistance,
	afterDistance;
	if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
	best = before, bestLength = beforeLength, bestDistance = beforeDistance;
	} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
	best = after, bestLength = afterLength, bestDistance = afterDistance;
	} else {
	precision *= .5;
	}
	}

	best = [best.x, best.y];
	best.distance = Math.sqrt(bestDistance);
	return best;

	function distance2(p) {
	var dx = p.x - point[0],
	dy = p.y - point[1];
	return dx * dx + dy * dy;
	}
	}

	function type(d, i) {
	if (!i) years = Object.keys(d).map(yearFormat.parse).filter(Number);
	var androg = {
	name: d.name.replace(/ (msa\|necta div\|met necta\|met div)$/i, ""),
	values: null
	};
	androg.values = years.map(function(m) {
	return {
	androg: androg,
	date: m,
	value: d[yearFormat(m)]
	};
	});
	return androg;
	}

	</script>
name	1880	1881	1882	1883	1884	1885	1886	1887	1888	1889	1890	1891	1892	1893	1894	1895	1896	1897	1898	1899	1900	1901	1902	1903	1904	1905	1906	1907	1908	1909	1910	1911	1912	1913	1914	1915	1916	1917	1918	1919	1920	1921	1922	1923	1924	1925	1926	1927	1928	1929	1930	1931	1932	1933	1934	1935	1936	1937	1938	1939	1940	1941	1942	1943	1944	1945	1946	1947	1948	1949	1950	1951	1952	1953	1954	1955	1956	1957	1958	1959	1960	1961	1962	1963	1964	1965	1966	1967	1968	1969	1970	1971	1972	1973	1974	1975	1976	1977	1978	1979	1980	1981	1982	1983	1984	1985	1986	1987	1988	1989	1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013
Casey	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.11363636363636363	0.10638297872340426	0.12195121951219512	0.1	0.16129032258064516	0.125	0.14705882352941177	0.1724137931034483	0.15625	0.20833333333333334	0.16666666666666666	0.1388888888888889	0.125	0.18518518518518517	0.16666666666666666	0.125	0.13513513513513514	0.19230769230769232	0.13513513513513514	0.1724137931034483	0.14285714285714285	0.08333333333333333	0.1276595744680851	0.12962962962962962	0.14583333333333334	0.1111111111111111	0.08860759493670886	0.09278350515463918	0.15328467153284672	0.12030075187969924	0.10465116279069768	0.1346153846153846	0.14761904761904762	0.1259259259259259	0.10542168674698796	0.1497584541062802	0.13615023474178403	0.1444954128440367	0.17842323651452283	0.1792452830188679	0.1431980906921241	0.1325503355704698	0.15046296296296297	0.1447084233261339	0.1301775147928994	0.1471927162367223	0.1847649918962723	0.20803443328550933	0.21878579610538373	0.21384750219106047	0.2195290858725762	0.3139065204847086	0.3264876250658241	0.3222265778126225	0.30408525754884547	0.27594419870704323	0.2678319706794474	0.3378110548337371	0.3879857256145916	0.40274429816428703	0.40781934614088305	0.4194477384380823	0.4416033172080166	0.4237204724409449	0.4148793565683646	0.47640261729082556	0.4769579115610016	0.43825699568425447	0.44423604097532826	0.441212285211744	0.42769573697408747	0.45699088145896655	0.44774305555555555	0.46906048457381905	0.5008543763052972	0.5086774386594853	0.5113027266371475	0.5158204562178073	0.4686605981794538	0.45432764300688827	0.4519196900317013	0.42445450802799506	0.4408217954443948	0.3916586768935762	0.4112299465240642	0.41847826086956524	0.414039262343843	0.40933899332929047	0.4073013600572656	0.40706476030277544	0.42014519056261346	0.38919514884233736	0.40280777537796975
Marion	0.3782894736842105	0.40441176470588236	0.47315436241610737	0.5302593659942363	0.4958904109589041	0.584070796460177	0.6	0.6597402597402597	0.6652892561983471	0.6838842975206612	0.7380497131931166	0.7734082397003745	0.7496229260935143	0.7928464977645305	0.7921727395411606	0.852589641434263	0.8515962036238136	0.8666085440278989	0.8674121405750799	0.8648888888888889	0.8636363636363636	0.8582887700534759	0.8544251447477254	0.8471544715447155	0.8485080336648814	0.8703279938977879	0.8673020527859238	0.8469871360866622	0.8527180783817951	0.8540189125295509	0.8562091503267973	0.8344497607655502	0.7875663855045298	0.7873103448275862	0.7833186231244483	0.7748217701269344	0.7876036938488026	0.7913351016799293	0.7843495363866254	0.7762227238525207	0.7818750850455845	0.7719787516600266	0.7767429119298727	0.7738482384823848	0.7889860368002088	0.7755215577190543	0.7669054441260745	0.7658386006173747	0.7814302191464821	0.7619674288534298	0.7560161601967328	0.7413385826771653	0.7269887546855477	0.7284315957204643	0.7184538653366583	0.7041301627033792	0.7112947658402203	0.674357476635514	0.6534954407294833	0.6668816510802967	0.6683544303797468	0.6596945551128818	0.6713483146067416	0.6660395108184384	0.6531204644412192	0.6562884063908234	0.6492398961809418	0.6582323592302209	0.6298932384341637	0.6448598130841121	0.6276018099547511	0.6119471044231646	0.616398243045388	0.6242069302098585	0.6167360147942672	0.6161290322580645	0.5971846237141311	0.6334134615384616	0.6440781440781441	0.6285909712722298	0.6001478196600147	0.5713196033562167	0.612212529738303	0.6160267111853088	0.6147332768839966	0.5685685685685685	0.6047565118912798	0.573729863692689	0.5429638854296388	0.5477453580901857	0.5574963609898108	0.5106685633001422	0.49409780775716694	0.4734042553191489	0.46693386773547096	0.4874476987447699	0.44212962962962965	0.5	0.4717948717948718	0.44471153846153844	0.4796954314720812	0.5301507537688442	0.5355329949238579	0.5612903225806452	0.4940119760479042	0.5202492211838006	0.49846153846153846	0.5226480836236934	0.5102040816326531	0.5049833887043189	0.5496688741721855	0.5231788079470199	0.5723684210526315	0.5370370370370371	0.5885167464114832	0.5454545454545454	0.4956896551724138	0.49224806201550386	0.484375	0.4880382775119617	0.5802469135802469	0.5309734513274337	0.52	0.4296028880866426	0.4497991967871486	0.3828996282527881	0.38492063492063494	0.4362934362934363	0.4067796610169492	0.48034934497816595	0.44144144144144143	0.5211267605633803	0.5023041474654378	0.5897435897435898
Jessie	0.8048162230671736	0.822139303482587	0.8076152304609219	0.8465447154471545	0.8338028169014085	0.8249566724436742	0.8471283783783784	0.847571189279732	0.8253094910591472	0.8524590163934426	0.8383635144198525	0.8313521545319466	0.8323313293253173	0.8503496503496504	0.8145454545454546	0.8414239482200647	0.8280780780780781	0.8357894736842105	0.8232958305757776	0.8056589724497394	0.7817482133040132	0.8285077951002228	0.7933461292386437	0.8110661268556005	0.7927152317880795	0.7955232909860859	0.7942675159235669	0.7729411764705882	0.7956246401842256	0.753565316600114	0.7491492464754497	0.7560975609756098	0.7478134110787172	0.7655428394679864	0.7509186351706036	0.7302001740644039	0.7290198590647021	0.7181347150259068	0.7177693383969618	0.7054589082183563	0.676829268292683	0.6801602361374658	0.6665968147527243	0.66875	0.6830909485565444	0.6677981443765558	0.6637872243691748	0.6614957166010651	0.6308253059099193	0.6294642857142857	0.623439273552781	0.6039448966812774	0.5967285309845863	0.6257796257796258	0.621875	0.5948529411764706	0.6104695919938414	0.598145285935085	0.6035962402942379	0.5686354378818738	0.5671768707482994	0.5665970772442589	0.5809682804674458	0.5446243254462433	0.5407572383073497	0.5402635431918009	0.535371976266545	0.5245009074410163	0.4942316566682049	0.5017031630170317	0.4800204918032787	0.4870600414078675	0.4592050209205021	0.45741968383477816	0.4343376918703809	0.4361078546307151	0.3936599423631124	0.37242192103712435	0.36822429906542054	0.37848347375243035	0.35294117647058826	0.3307475317348378	0.3224873463485177	0.3075153374233129	0.31136363636363634	0.3508902077151335	0.34517766497461927	0.3188034188034188	0.30821256038647343	0.29545454545454547	0.31514581373471307	0.3205357142857143	0.2957089552238806	0.318552036199095	0.32339656729900634	0.33676975945017185	0.352755905511811	0.34225352112676055	0.4183474300585556	0.41274397244546496	0.4256544502617801	0.49167005282405524	0.4624090541632983	0.4333821376281113	0.47509578544061304	0.49531459170013387	0.5334168755221387	0.51237935375577	0.5173951828724354	0.503288031565103	0.47068747363981445	0.48712352684417287	0.5114325711619225	0.5059360730593607	0.5605180884323359	0.5575698187163155	0.5283324338909876	0.5291170945522855	0.5367965367965368	0.5598484848484848	0.5742811501597445	0.5070656691604323	0.5086661642803316	0.4959807073954984	0.5157179269328802	0.4621695533272562	0.49207828518173347	0.4819863680623174	0.503061224489796	0.47776510832383123	0.508495145631068	0.550744248985115	0.5688775510204082	0.5984943538268507