This shows the female-percentage of people named androgynous names over time.
This normalizes each of the paths by start date by resetting the domain of the x-axis to fit each data row. Start date is defined as being the first time when the name had a female percentage greater than zero.
It would be much better to show the date on hover rather than simply the name. This would require a bit more precomputation because of the non-linear interpolation (can't simply use scales).
| <!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) | |
| .tickValues([]) | |
| .orient("bottom")) | |
| .append("text") | |
| .attr("dx", "11px") | |
| .attr("dy", "11px") | |
| .style("font-weight", "bold") | |
| .text("Year First Appeared"); | |
| svg.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(10, "%")) | |
| .append("text") | |
| .attr("x", -75) | |
| .attr("transform", "rotate(-90)") | |
| .attr("dy", "10px") | |
| .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 removedStartingZeroes(d); }) | |
| 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 removedStartingZeroes(d); }); | |
| } | |
| 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)]); | |
| var normalized_path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| normalized_path.setAttribute('d', line(d.values.slice(zero_counter, d.values.length))); | |
| return line(d.values.slice(zero_counter, d.values.length)); | |
| } | |
| function closestPoint(pathNode, point) { | |
| var pathLength = pathNode.getTotalLength(), | |
| precision = pathLength / pathNode.pathSegList.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 |
