jgilfillan · August 29, 2015 14:05
diff --git a/readme.md b/readme.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 
 .chart-row-female {
  fill: #fb9a99;
 }

 .chart-row-female:hover {
  fill: #e31a1c;
 }

 .chart-row-male {
  fill: #a6cee3;
 }

 .chart-row-male:hover {
  fill: #1f78b4;
 }

 svg {
  margin: auto;
 }

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

 .axis text {
    font-family: sans-serif;
    font-size: 11px;
    fill: #969696;
 }

 .axis-y text {
  text-anchor: middle;
  alignment-baseline: central;
  fill: black;
 }

 .d3-tip {
  padding: 5px 5px 5px 5px;
  /*margin-left: 10px;*/
  /*margin-right: 50px;*/
  line-height: 1;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 11px;
  background: #FEE5AC;
  border-radius: 3px;

 }

 #tooltip.hidden {
  display: none;
 }
 
 </style>
 <body>
 <div class="chart"></div>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/queue.v1.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>
 <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
 <script>
 
 var svg = d3.select('.chart').append('svg')
  ,width = 960
  ,height = 250
  ,margin = {top: 10, bottom: 50, right: 50, left: 50, label: 35}
  ,genderChartWidth = (width - margin.right - margin.left - margin.label) / 2
  ,data = []
  ,chart
  ,xMaleScale = d3.scale.linear().range([0, genderChartWidth])
  ,xFemaleScale = d3.scale.linear().range([genderChartWidth, 0])    //reversed
  ,yScale = d3.scale.ordinal().rangeBands([0, height - margin.top - margin.bottom], 0.1, 0.1)
  ,xMaleAxis = d3.svg.axis()
  ,xFemaleAxis = d3.svg.axis()
  ,tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(d) { 
          var fte, sex;
          if (d3.select(this).classed('chart-row-female')) {
              fte = d.female;
              sex = 'Female';
            } 
          else if (d3.select(this).classed('chart-row-male')) {
              fte = d.male;
              sex = 'Male';
          }
          return '<strong>' + sex + ' FTE:</strong><span style="color: red"> ' + Math.round(fte * 10) / 10 + '</span>'
        }).direction(function(d) {
          return d3.select(this).classed('chart-row-female') ? 'w' : d3.select(this).classed('chart-row-male') ? 'e' : 'n';
        }).offset(function(d) {
          return d3.select(this).classed('chart-row-female') ? [0, -10] : d3.select(this).classed('chart-row-male') ? [0, 10] : [0, 0];
        })
  ;

 // set up chart
 svg.attr('width', width).attr('height', height);

 // invoke tooltip
 svg.call(tip);

 chart = svg.append('g')
  .attr('class', 'chart')
  .attr('transform', translateString(margin.left, margin.top))
  ;


 //translate function
 function translateString(x, y) {
  return 'translate(' + x + ',' + y + ')';
 }

 // read data
 d3.csv('data.csv', function(d) {
  var csv,
      summary = []
  ;

  csv = d.map(function(x) {
    return {
      year: +x.rtrn_yr,
      gender: x.Gender,
      fte:  +x.GRM_FTE 
    };
  });

  // loop through csv, aggregating by gender and fte
  csv.forEach(function(x) {

    // push year to summary array if it doesn't already exist
    if ( !summary.some(function(y) { return (y.year === x.year); }) ) {
      summary.push( {year: x.year, male: 0, female: 0, unknown: 0} );
    }

    // now add fte
    summary.forEach(function(y) {
      if ( y.year === x.year ) {
        (x.gender === 'M') ? y.male += x.fte :
          (x.gender === 'F') ? y.female += x.fte : y.unknown += x.fte;
      }
    });


  });

  data.push(summary);

  redrawChart();

 });   // end: read csv


 function redrawChart() {

  // resize scales
  xMaleScale.domain([0, d3.max(data[0], function(d) {return Math.max(d.male, d.female);})]).nice();
  xFemaleScale.domain([0, d3.max(data[0], function(d) {return Math.max(d.male, d.female);})]).nice();
  yScale.domain(data[0].map(function(d) {return d.year;}));

  //set axes
  xMaleAxis.scale(xMaleScale).orient('bottom');
  xFemaleAxis.scale(xFemaleScale).orient('bottom');

  // g for each year
  chartRows = chart.selectAll('.chart-row').data(data[0])
    .enter()
    .append('g')
    .attr('class', 'chart-row')
    .attr('id', function(d) {return 'year-' + d.year; })
    .attr('transform', function(d) { return  translateString(0, yScale(d.year)); })
    ;

  // female bars
  chartRows.append('rect')
    .attr('class', 'chart-row-female')
    .attr('x', function(d) { console.log(d) ;return xFemaleScale(d.female); })
    .attr('y', 0)
    .attr('width', function(d) { console.log(d.year, d.female, xFemaleScale(d.female)); return genderChartWidth - xFemaleScale(d.female); })
    .attr('height', yScale.rangeBand())
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    
  ;

  // male bars
  chartRows.append('rect')
    .attr('class', 'chart-row-male')
    .attr('x', genderChartWidth + margin.label)
    .attr('y', 0)
    .attr('width', function(d) { return xMaleScale(d.male); })
    .attr('height', yScale.rangeBand())
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
  ;

  // year labels (y axis)
  chartRows.append('g')
    .attr('class', 'axis-y axis')
    .attr('transform', translateString((2 * genderChartWidth + margin.label) / 2, yScale.rangeBand() / 2))
    .append('text')
    .text(function(d) {return d.year;})
    ;

  // x axes
  chart.append('g')
    .attr('class', 'axis axis-x axis-female')
    .attr('transform', translateString(0, height - margin.bottom - margin.top))
    .call(xFemaleAxis)
    ;

  chart.append('g')
    .attr('class', 'axis axis-x axis-male')
    .attr('transform', translateString(genderChartWidth + margin.label, height - margin.bottom - margin.top))
    .call(xMaleAxis)
    ;
 }
 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.chart-row-female {
	fill: #fb9a99;
	}

	.chart-row-female:hover {
	fill: #e31a1c;
	}

	.chart-row-male {
	fill: #a6cee3;
	}

	.chart-row-male:hover {
	fill: #1f78b4;
	}

	svg {
	margin: auto;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	fill: #969696;
	}

	.axis-y text {
	text-anchor: middle;
	alignment-baseline: central;
	fill: black;
	}

	.d3-tip {
	padding: 5px 5px 5px 5px;
	/margin-left: 10px;/
	/margin-right: 50px;/
	line-height: 1;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 11px;
	background: #FEE5AC;
	border-radius: 3px;

	}

	#tooltip.hidden {
	display: none;
	}

	</style>
	<body>
	<div class="chart"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script>

	var svg = d3.select('.chart').append('svg')
	,width = 960
	,height = 250
	,margin = {top: 10, bottom: 50, right: 50, left: 50, label: 35}
	,genderChartWidth = (width - margin.right - margin.left - margin.label) / 2
	,data = []
	,chart
	,xMaleScale = d3.scale.linear().range([0, genderChartWidth])
	,xFemaleScale = d3.scale.linear().range([genderChartWidth, 0]) //reversed
	,yScale = d3.scale.ordinal().rangeBands([0, height - margin.top - margin.bottom], 0.1, 0.1)
	,xMaleAxis = d3.svg.axis()
	,xFemaleAxis = d3.svg.axis()
	,tip = d3.tip()
	.attr('class', 'd3-tip')
	.html(function(d) {
	var fte, sex;
	if (d3.select(this).classed('chart-row-female')) {
	fte = d.female;
	sex = 'Female';
	}
	else if (d3.select(this).classed('chart-row-male')) {
	fte = d.male;
	sex = 'Male';
	}
	return '<strong>' + sex + ' FTE:</strong><span style="color: red"> ' + Math.round(fte * 10) / 10 + '</span>'
	}).direction(function(d) {
	return d3.select(this).classed('chart-row-female') ? 'w' : d3.select(this).classed('chart-row-male') ? 'e' : 'n';
	}).offset(function(d) {
	return d3.select(this).classed('chart-row-female') ? [0, -10] : d3.select(this).classed('chart-row-male') ? [0, 10] : [0, 0];
	})
	;

	// set up chart
	svg.attr('width', width).attr('height', height);

	// invoke tooltip
	svg.call(tip);

	chart = svg.append('g')
	.attr('class', 'chart')
	.attr('transform', translateString(margin.left, margin.top))
	;


	//translate function
	function translateString(x, y) {
	return 'translate(' + x + ',' + y + ')';
	}

	// read data
	d3.csv('data.csv', function(d) {
	var csv,
	summary = []
	;

	csv = d.map(function(x) {
	return {
	year: +x.rtrn_yr,
	gender: x.Gender,
	fte: +x.GRM_FTE
	};
	});

	// loop through csv, aggregating by gender and fte
	csv.forEach(function(x) {

	// push year to summary array if it doesn't already exist
	if ( !summary.some(function(y) { return (y.year === x.year); }) ) {
	summary.push( {year: x.year, male: 0, female: 0, unknown: 0} );
	}

	// now add fte
	summary.forEach(function(y) {
	if ( y.year === x.year ) {
	(x.gender === 'M') ? y.male += x.fte :
	(x.gender === 'F') ? y.female += x.fte : y.unknown += x.fte;
	}
	});


	});

	data.push(summary);

	redrawChart();

	}); // end: read csv


	function redrawChart() {

	// resize scales
	xMaleScale.domain([0, d3.max(data[0], function(d) {return Math.max(d.male, d.female);})]).nice();
	xFemaleScale.domain([0, d3.max(data[0], function(d) {return Math.max(d.male, d.female);})]).nice();
	yScale.domain(data[0].map(function(d) {return d.year;}));

	//set axes
	xMaleAxis.scale(xMaleScale).orient('bottom');
	xFemaleAxis.scale(xFemaleScale).orient('bottom');

	// g for each year
	chartRows = chart.selectAll('.chart-row').data(data[0])
	.enter()
	.append('g')
	.attr('class', 'chart-row')
	.attr('id', function(d) {return 'year-' + d.year; })
	.attr('transform', function(d) { return translateString(0, yScale(d.year)); })
	;

	// female bars
	chartRows.append('rect')
	.attr('class', 'chart-row-female')
	.attr('x', function(d) { console.log(d) ;return xFemaleScale(d.female); })
	.attr('y', 0)
	.attr('width', function(d) { console.log(d.year, d.female, xFemaleScale(d.female)); return genderChartWidth - xFemaleScale(d.female); })
	.attr('height', yScale.rangeBand())
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)

	;

	// male bars
	chartRows.append('rect')
	.attr('class', 'chart-row-male')
	.attr('x', genderChartWidth + margin.label)
	.attr('y', 0)
	.attr('width', function(d) { return xMaleScale(d.male); })
	.attr('height', yScale.rangeBand())
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	;

	// year labels (y axis)
	chartRows.append('g')
	.attr('class', 'axis-y axis')
	.attr('transform', translateString((2 * genderChartWidth + margin.label) / 2, yScale.rangeBand() / 2))
	.append('text')
	.text(function(d) {return d.year;})
	;

	// x axes
	chart.append('g')
	.attr('class', 'axis axis-x axis-female')
	.attr('transform', translateString(0, height - margin.bottom - margin.top))
	.call(xFemaleAxis)
	;

	chart.append('g')
	.attr('class', 'axis axis-x axis-male')
	.attr('transform', translateString(genderChartWidth + margin.label, height - margin.bottom - margin.top))
	.call(xMaleAxis)
	;
	}
	</script>
	</body>