Well, this is embarrassing. There should be an image here. Great picture, too!
Pie Chart Over Time

Gender Ratio on The Board

Total:

Year: 0

Instructions for Use

Here is the code to copy and paste into your HTML file.

<!-- Include this HTML Code in the location on the page where you want your chart to go. -->

<div id="wholeChart">
  <h1 id="chartTitle">Gender Ratio on The Board</h1>
  <div id="chart"></div>
  <h3>Total: <span id="pieTotal"></span></h3>
  <div id="yearSelection">
    <strong>Year</strong>: <span id="sliderVal">0</span><br>
    <span id="startYear"></span>
    <input id="dataYear" type="range" min="1995" max="2000" step="1" value="1995" onchange="sliderValChange(this.value)" />
    <span id="endYear"></span><br>
    <button onclick="reset()" class="btn btn-success">Reset</button>
    <button onclick="autoPlay()" class="btn btn-primary">Autoplay</button>
  </div>
</div>

<script>
// ======||||| Please modify to your liking ||||||=========

// NOTE: You must keep the same sections for each year.
// NOTE: Any gaps in the data will break the chart.
// If you don't have data for that year, include 0s, or change the "step" in the html input slider.
var labels = ["Male", "Female"];
var dataVals = {
1994: [13,5],
1995: [11,5],
1996: [13,5],
1997: [15,6],
1998: [12,7],
1999: [11,7],
2000: [12,7],
2001: [13,8],
2002: [13,7],
2003: [12,7],
2004: [14,7],
2005: [14,7],
2006: [15,6],
2007: [13,6],
2008: [13,7],
2009: [12,8],
2010: [12,7],
2011: [12,6],
2012: [11,6],
2013: [10,5],
2014: [13,4],
2015: [14,4],
2016: [14,4]
};

var currency = ""; // Appended to beginning of label values
var startYear = 1995;
var endYear = 2016;

var transitionTime = 1000; // ms per transition
</script>

<!-- // ======||||| You shouldn't need to change anything below this line ||||||========= -->

<style>
#wholeChart {
  text-align:center;
  position: relative;
}

#chart {
  display:inline-block;
  width:100%;
  height:500px;
  margin:10px;
}

#dataYear {
  max-width:200px;
  display:inline;
  margin-left:auto;
  margin-right:auto;
}
svg{
  width: 100%;
  height: 100%;
}
path.slice{
  stroke-width:2px;
}

polyline{
  opacity: .3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
</style>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>function initializeChart(){sliderValChange(document.getElementById("dataYear").value),document.getElementById("dataYear").setAttribute("min",startYear),document.getElementById("dataYear").setAttribute("max",endYear),document.getElementById("startYear").innerHTML=startYear,document.getElementById("endYear").innerHTML=endYear}function sliderValChange(e){document.getElementById("sliderVal").innerHTML=e;var t=dataVals[e].reduce(function(e,t){return e+t},0);document.getElementById("pieTotal").innerHTML=currency+t.toString(),change(getData(e))}function getCurrentYear(){return document.getElementById("dataYear").value}function getData(e){return yearData(e)}function yearData(e){for(var t=color.domain(),a=[],r=dataVals[e],n=Math.min(t.length,r.length),l=0;n>l;l++){var i={label:t[l],value:r[l]};a.push(i)}return a}function reset(){document.getElementById("dataYear").value=startYear,sliderValChange(document.getElementById("dataYear").value)}function autoPlay(){getCurrentYear()!=endYear&&(document.getElementById("dataYear").value++,sliderValChange(document.getElementById("dataYear").value),setTimeout(function(){autoPlay()},1e3))}function randomData(){var e=color.domain();return e.map(function(e){return{label:e,value:Math.random()}}).filter(function(){return Math.random()>.5}).sort(function(e,t){return d3.ascending(e.label,t.label)})}function mergeWithFirstEqualZero(e,t){var a=d3.set();t.forEach(function(e){a.add(e.label)});var r=e.filter(function(e){return!a.has(e.label)}).map(function(e){return{label:e.label,value:0}});return d3.merge([t,r]).sort(function(e,t){return d3.ascending(e.label,t.label)})}function change(e){function t(e){return e.startAngle+(e.endAngle-e.startAngle)/2}var a=transitionTime,r=svg.select(".slices").selectAll("path.slice").data().map(function(e){return e.data});0===r.length&&(r=e);var n=mergeWithFirstEqualZero(e,r),l=mergeWithFirstEqualZero(r,e),i=svg.select(".slices").selectAll("path.slice").data(pie(n),key);i.enter().insert("path").attr("class","slice").style("fill",function(e){return color(e.data.label)}).each(function(e){this._current=e}),i=svg.select(".slices").selectAll("path.slice").data(pie(l),key),i.transition().duration(a).attrTween("d",function(e){var t=d3.interpolate(this._current,e),a=this;return function(e){return a._current=t(e),arc(a._current)}}),i=svg.select(".slices").selectAll("path.slice").data(pie(e),key),i.exit().transition().delay(a).duration(0).remove();var s=svg.select(".labels").selectAll("text").data(pie(n),key);s.enter().append("text").attr("dy",".35em").style("opacity",0).text(function(e){return e.data.label}).each(function(e){this._current=e}),s=svg.select(".labels").selectAll("text").data(pie(l),key).text(function(e){return e.data.label+": "+currency+e.data.value}),svg.select(".centerYear").text(getCurrentYear()),s.transition().duration(a).style("opacity",function(e){return 0===e.data.value?0:1}).attrTween("transform",function(e){var a=d3.interpolate(this._current,e),r=this;return function(e){var n=a(e);r._current=n;var l=outerArc.centroid(n);return l[0]=radius*(t(n)<Math.PI?1:-1),"translate("+l+")"}}).styleTween("text-anchor",function(e){var a=d3.interpolate(this._current,e);return function(e){var r=a(e);return t(r)<Math.PI?"start":"end"}}),s=svg.select(".labels").selectAll("text").data(pie(e),key),s.exit().transition().delay(a).remove();var u=svg.select(".lines").selectAll("polyline").data(pie(n),key);u.enter().append("polyline").style("opacity",0).each(function(e){this._current=e}),u=svg.select(".lines").selectAll("polyline").data(pie(l),key),u.transition().duration(a).style("opacity",function(e){return 0===e.data.value?0:.5}).attrTween("points",function(e){this._current=this._current;var a=d3.interpolate(this._current,e),r=this;return function(e){var n=a(e);r._current=n;var l=outerArc.centroid(n);return l[0]=.95*radius*(t(n)<Math.PI?1:-1),[arc.centroid(n),outerArc.centroid(n),l]}}),u=svg.select(".lines").selectAll("polyline").data(pie(e),key),u.exit().transition().delay(a).remove()}var color=d3.scale.category20().domain(labels),svg=d3.select("#chart").append("svg").append("g");svg.append("g").attr("class","slices"),svg.append("g").attr("class","labels"),svg.append("g").attr("class","lines"),svg.append("text").attr("text-anchor","middle").text(getCurrentYear()).style({"font-size":"25px"}).classed("centerYear",!0);var width=document.getElementById("chart").offsetWidth,height=document.getElementById("chart").offsetHeight;radius=Math.min(width-300,height)/2;var pie=d3.layout.pie().sort(null).value(function(e){return e.value}),arc=d3.svg.arc().outerRadius(.8*radius).innerRadius(.4*radius),outerArc=d3.svg.arc().innerRadius(.9*radius).outerRadius(.9*radius);svg.attr("transform","translate("+width/2+","+height/2+")");var key=function(e){return e.data.label};initializeChart();</script>