Hypercubed · August 29, 2015 14:15
diff --git a/.editorconfig b/.editorconfig
 # http://editorconfig.org
 root = true

 [*]
 indent_style = space
 indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

 [*.md]
 trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
 node_modules
 *.min.*
diff --git a/.jshintrc b/.jshintrc
 {
  "node": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "quotmark": "single",
  "undef": true,
  "unused": true,
  "strict": true
 }
diff --git a/README.md b/README.md
diff --git a/datapackage.json b/datapackage.json
 {
  "name": "fantom5-time-courses-samples",
  "title": "Exploring FANTOM5 Phase 2 Time Course Data",
  "homepage": "http://fantom.gsc.riken.jp/5/sstar/Time_Courses_chart",
  "version": "0.1.0",
  "license": "CC-BY-4.0",
  "resources": [
    {
      "format": "csv",
      "mediatype": "text/csv",
      "path": "table.tsv",
      "dialect": {
        "delimiter": "\t",
        "lineTerminator": "\r\n",
        "header": true
      }
    }
  ],
  "repository": "git@gist.github.com:/b4269831b309c13bd612.git"
 }
diff --git a/gulpfile.js b/gulpfile.js
 'use strict';

 var gulp = require('gulp'),
  uglify = require('gulp-uglify'),
  jshint = require('gulp-jshint'),
  rename = require('gulp-rename'),
  minifyCSS = require('gulp-minify-css'),
  livereload = require('gulp-livereload'),
  connect = require('gulp-connect');

 gulp.task('server', function () {
  connect.server({
    root: ['.', '.tmp'],
    port: 8080,
    livereload: true
  });
 });

 gulp.task('lint', function() {
  return gulp.src(['./*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
 });

 gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./*.js', ['uglify']);
  gulp.watch('./*.css', ['minify-css']);
  gulp.watch('./*.html', ['reload']);
 });

 gulp.task('reload', function() {
  gulp.src(['./*.html'])
    .pipe(livereload());
 });

 gulp.task('uglify', function() {
  gulp.src('./script.js')
    .pipe(uglify({ outSourceMap: true }))
    .pipe(rename(function (path) {
      if(path.extname === '.js') {
        path.basename += '.min';
      }
    }))
    .pipe(gulp.dest('.'))
    .pipe(livereload());
 });

 gulp.task('minify-css', function() {
  gulp.src('./style.css')
    .pipe(minifyCSS())
    .pipe(rename(function (path) {
      if(path.extname === '.css') {
        path.basename += '.min';
      }
    }))
    .pipe(gulp.dest('.'))
    .pipe(livereload());
 });

 gulp.task('build', ['uglify', 'minify-css']);
 gulp.task('default', ['build', 'server', 'watch']);
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

  <head>

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="globalWrapper">
      <div id="column-content">
        <div id="timecourseChart">

        </div>
      </div>
    </div>

    <script src="//cdn.rawgit.com/Hypercubed/_F/master/_F.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="script.js"></script>
  </body>

 </html>
diff --git a/package.json b/package.json
 {
  "name": "fantom5-time-courses-samples",
  "version": "0.1.0",
  "dependencies": {
  },
  "author": "J. Harshbarger",
  "devDependencies": {
    "gulp-connect": "^2.2.0",
    "gulp-minify-css": "^0.4.5",
    "connect-livereload": "~0.4.0",
    "gulp": "~3.6.2",
    "gulp-jshint": "~1.9.0",
    "gulp-livereload": "^3.7.0",
    "gulp-rename": "^1.2.0",
    "gulp-uglify": "~1.0.2"
  }
 }
diff --git a/script.js b/script.js
 /* global d3:true */
 /* global _F:true */

 (function() {
  'use strict';

  var URL = 'http://fantom.gsc.riken.jp/5/sstar/';
  var _series =  _F('Series');
  var _sample =  _F('Sample');
  var _name = _F('Time Course');
  var _id = _F('Time Course Id');
  var _time = _F('Time', Number);
  var _timePoint = _F('Time Desc');
  var _species = _F('Species');
  var _donor = _F('Donor');
  var _key = _F('key');
  var _values = _F('values');
  var _timeSort = _time.order().asc;
  var _donorSort = _donor.order().desc;

  var _sort = function(a,b) {
    return _timeSort(a,b) || _donorSort(a,b);
  };

  var _timeCourseUrl = function(d) {
    return URL+d.id;
  };

  var _sampleUrl = function(d) {
    return URL+'FF:'+_sample(d);
  };

  function SeriesChart() {

    var
    width = 500,
    dy = 20,
    r = 3.5,
    ddy = 0,
    height = 900,
    margin = { top: 0, right: 200, bottom: 40, left: 200 };

    var color = d3.scale.category10();

    function chart(selection) {
      selection.each(function(_data) {

        var series = _series(_data[0]);

        var nestedData = d3.nest()
          .key(_name)
          //.sortKeys(d3.ascending)
          .key(_time)
          //  .sortKeys(d3.ascending)
          .sortValues(_sort)
          .entries(_data);

        var xValues = [];
        nestedData.forEach(function(d) {

          var times = d.values.map(function(d) {
            d[_timePoint.key] = _timePoint(d.values[0]).trim();
            d[_time.key] = _time(d.values[0]);
            return d[_time.key];
          });

          d.id = _id(d.values[0].values[0]);
          d.species = _species(d.values[0].values[0]);

          d.timeRange = d3.extent(times);
          xValues = xValues.concat(times);
        });

        nestedData = nestedData
          .sort(_F('timeRange.1')
          .order(d3.descending));

        height = dy*nestedData.length;

        var svg = d3.select(this)
          .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('g')
          .append('text')
          .attr('dy', -0)
          .attr('dx', width/2)
          .style('text-anchor', 'middle')
          .attr('class','title')
          .text(series);

        var xExtent = d3.extent(_data, _time);
        var xMax = xExtent[1];

        var xUnit = 'mins', xUnitScale = 1;
        var xScale, xAxis = d3.svg.axis();

        if(series === 'Early response') {

          //console.log(nestedData);

          xScale = d3.scale.log().clamp(true)
            .domain([1, xMax])
            .range([0, width]);

          xValues
            .push(1000,10000);

          xValues = xValues.sort(d3.ascending);

          xAxis
            .scale(xScale)
            .tickValues(xValues)
            .tickFormat(function(d) {
              if (d === 0) { return '0:00'; }
              if (d < 60) { return '0:'+d; }
              d = d3.round(d/60,2);
              if (d === 1) { return d+'hr'; }
              if (d <= 5) { return d%1 === 0 ? d : ''; }
              if (d <= 5) { return d%1 === 0 ? d : ''; }
              if (d < 72) { return d%12 === 0 ? d : ''; }
              d = d/24;
              if (d === 4) { return d+'days'; }
              if (d === 28) { return d+'days'; }
              return d%2 === 0 ? d: '';
            });

        } else if (series === 'Development') {
          xUnitScale = 1/60/24;
          xUnit = 'days';

          //console.log(xExtent);

          xScale = d3.scale.linear()
            .domain(xExtent)
            .range([0, width]);

          xAxis
            .scale(xScale).tickValues(xValues)
            .tickFormat(function(d, i) {  // mins
              var v = d3.round(d*xUnitScale,2);
              if (v < 0) { return i % 2 === 0 ? 'E'+(v+20) : ''; }
              return 'N'+v;
            });
        } else {

          if (xMax > 100) {
            xUnitScale = 1/60;
            xUnit = 'hrs';
          }
          if (xMax > 10000) {
            xUnitScale = 1/60/24;
            xUnit = 'days';
          }

          xScale = d3.scale.linear()
            .domain([0, xMax])
            .range([0, width]);

          xAxis
            .scale(xScale).tickValues(xValues)
            .tickFormat(function(d) {  // mins
              var v = d3.round(d*xUnitScale,2);
              if (d === xMax) { return v+xUnit; }
              if (v%2 !== 0) { return ''; }
              return v;
            });

        }

        svg.append('g')
          .attr('transform', 'translate(0,' + (height+margin.bottom/2) + ')')
          .call(xAxis);

        var gSample = svg.selectAll('.sample').data(nestedData).enter()
          .append('g')
          .attr('transform', function(d, i) { return 'translate(0,' + (dy*i) + ')'; })
          .attr('class',function(d) { return 'sample '+_species(d.values[0].values[0]); });

        gSample
          .append('a')
          .attr('xlink:href', _timeCourseUrl)
          .attr('class','sample-name')
          .append('text')
          .style('text-anchor', 'end')
          .attr('dy', dy)
          .attr('dx', -10)
          .text(_key);

        gSample
          .append('g')
          .attr('transform', function() { return 'translate(0,' + dy + ')'; })
          //.each(function(d) {
          //d3.select(this).call(xAxis.tickValues(d.timeValues));
          //})
          //.call(xAxis)
          ;

        gSample
          .append('line')
          .attr('class','sample-axis')
          //.attr("y1", 0)
          .attr('y1', dy)
          .attr('y2', dy)
          //.attr('x1', 0)
          .attr('x2', width);

        gSample
          .append('line')
          .attr('class','sample-range')
          .attr('y1', dy)
          .attr('y2', dy)
          .attr('x1', function(d) { return xScale(d.timeRange[0]); })
          .attr('x2', function(d) { return xScale(d.timeRange[1]); })
          .style('stroke', function(d) { return color(_species(d.values[0].values[0])); });

        var times = gSample
          .selectAll('.point').data(_values).enter()
          .append('g')
          .attr('class', function(d) { return 'point '+_species(d); });

        var points = times
          .selectAll('a').data(_values).enter()
          .append('a')
          .attr('xlink:href', _sampleUrl)
          .append('circle')
          .attr('r', r)
          .attr('cx', function(d) { return xScale(+_time(d)); })
          .attr('cy', function(d, i) { return dy-i*ddy; }) //function(d) { return dy/2+(_doner(d)-1)*ddy; })
          .style('fill', function(d) { return color(_species(d)); });

        points
          .append('title')
          .text(function(d) {
            return _sample(d)+' '+_donor(d)+' @'+d['Time Desc'];
          });

        times.on('mouseenter', function(d) {
          //d3.selectAll('svg')
          //  .classed('hover', true);

          var N = d.values.length-1;
          var duration = 300;

          d3.select(this).selectAll('circle')
            .transition()
            //.delay(function(d, i) { return i / N * duration; })
            .duration(duration)
            .attr('r', 1.5*r)
            .attr('cy', function(d, i) { return dy-(N-i)*2.5*r; });

        });

        times.on('mouseleave', function() {

          d3.select(this).selectAll('circle')
            .transition()
            .duration(500)
            .attr('r', r)
            .attr('cy', function(d, i) { return dy-i*ddy; });

        });

  });
 }

 chart.color = function(_) {
  if (arguments.length < 1) { return color; }
  color = _;
  return chart;
 };

 chart.width = function(_) {
  if (arguments.length < 1) { return width; }
  width = _;
  return chart;
 };

 chart.margin = function(_) {
  if (arguments.length < 1) { return margin; }
  margin = _;
  return chart;
 };

 return chart;

 }

 function SeriesLegend() {

  var
  //width = 830,
  dy = 20,
  gap = 3,
  //height = 200,
  margin = { top: 10, right: 30, bottom: 20, left: 730 };

  var color = d3.scale.category10();

  function chart(selection) {
    selection.each(function(data) {

      data = data || color.domain();

      //console.log(data);

      var g=d3.select(this).append('g')
      .attr('transform', 'translate(' + [margin.left,margin.top] + ')');

      var legend = g
        .selectAll('.legend')
        .data(data)
        .enter().append('g')
        .attr('class', function(d) { return 'legend '+d; })
        .attr('transform', function(d,i) { return 'translate(0,' + (i * (dy+gap)) + ')'; });

      legend.append('rect')
        .attr('x', 0)
        .attr('width', dy)
        .attr('height', dy)
        .style('fill', color);

      legend.append('text')
        .attr('x', dy+gap)
        .attr('y', 9)
        .attr('dy', '.35em')
        .style('text-anchor', 'start')
        .text(function(d) { return d; });

      legend.on('mouseenter', function(d) {
        d3.selectAll('svg')
          .classed('hover hover-'+d, true);
      });

      legend.on('mouseleave', function(d) {
        d3.selectAll('svg')
          .classed('hover hover-'+d, false);
      });

    });
  }

  chart.color = function(_) {
    if (arguments.length < 1) { return color; }
    color = _;
    return chart;
  };

  chart.margin = function(_) {
    if (arguments.length < 1) { return margin; }
    margin = _;
    return chart;
  };

  return chart;

 }

 d3.tsv('table.tsv', function(data) {

  var nestedData = d3.nest()
    .key(_series)
    .sortKeys(d3.ascending)
    .entries(data);

  var color = d3.scale.category10().domain(['Human','Mouse']);

  //var width = 800;
  var width = 800;

  var seriesChart = new SeriesChart()
    .color(color)
    .width(width)
    .margin({ top: 60, right: 200, bottom: 40, left: 200 });

  var seriesLegend = new SeriesLegend()
    .color(color)
    .margin({ top: 35, right: 30, bottom: 20, left: width+230 });

  var charts = d3.select('#timecourseChart')
    .selectAll('.series').data(nestedData).enter()
    .append('div')
    .attr('class', 'series');

  charts
    .append('div').datum(_values)
    .call(seriesChart);

  d3.select('svg').append('g').datum(color.domain())
    .call(seriesLegend);

 });

 })();
diff --git a/style.css b/style.css
 /* Styles go here */

 #timecourseChart  {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 100;
  padding-top: 10px;
  position: relative;
  /* width: 960px; */
 }

 #timecourseChart .series {
  /* border: 1px solid red; */
  text-align: center;
  margin-top: -30px;
 }

 #timecourseChart .series h4 {
  margin-bottom: 0;
 }

 #timecourseChart line {
  stroke: #666;
  stroke-width: 0.5px;
 }

 #timecourseChart text {
  color: #000;
  font-family: sans-serif;
  font-size: 9px;
  fill: #000;
 }

 #timecourseChart text.title {
  font-size: 18px;
  font-weight: bold;
 }

 #timecourseChart .sample-name text {
  font-family: sans-serif;
  font-size: 9px;
  font-weight: bold;
  fill: #000;
  cursor: pointer;
 }

 #timecourseChart .sample-name text:hover {
  text-decoration: underline;
 }

 #timecourseChart .sample-axis {
  stroke: #666;
  stroke-width: 0.5px;
 }

 #timecourseChart .sample-range {
  stroke: #666;
  stroke-width: 4px;
 }

 #timecourseChart .name {
  fill: none;
  stroke: #000;
 }

 #timecourseChart path.domain {
  fill: none;
  stroke: #666;
  stroke-width: 0.5px;
 }

 #timecourseChart .point {
  stroke: #333;
  cursor: pointer;
 }

 #timecourseChart .point circle:hover {
  stroke: #000;
  stroke-width: 1.5px;
 }

 #timecourseChart svg.hover .sample {
  opacity: 0.5;
 }

 #timecourseChart svg.hover-Human .Human,
 #timecourseChart svg.hover-Mouse .Mouse,
 #timecourseChart svg.hover .sample:hover {
  opacity: 1;
 }

 #globalWrapper {
  width: 1350px;
 }
 #column-content {
  width: 83%;
 }
diff --git a/table.csv b/table.csv
diff --git a/table.tsv b/table.tsv
diff --git a/thumbnail.png b/thumbnail.png
	# http://editorconfig.org
	root = true

	[*]
	indent_style = space
	indent_size = 2
	charset = utf-8
	trim_trailing_whitespace = true
	insert_final_newline = true

	[*.md]
	trim_trailing_whitespace = false
	{
	"node": true,
	"esnext": true,
	"bitwise": true,
	"camelcase": true,
	"curly": true,
	"eqeqeq": true,
	"immed": true,
	"indent": 2,
	"latedef": true,
	"newcap": true,
	"noarg": true,
	"quotmark": "single",
	"undef": true,
	"unused": true,
	"strict": true
	}
	{
	"name": "fantom5-time-courses-samples",
	"title": "Exploring FANTOM5 Phase 2 Time Course Data",
	"homepage": "http://fantom.gsc.riken.jp/5/sstar/Time_Courses_chart",
	"version": "0.1.0",
	"license": "CC-BY-4.0",
	"resources": [
	{
	"format": "csv",
	"mediatype": "text/csv",
	"path": "table.tsv",
	"dialect": {
	"delimiter": "\t",
	"lineTerminator": "\r\n",
	"header": true
	}
	}
	],
	"repository": "git@gist.github.com:/b4269831b309c13bd612.git"
	}
	'use strict';

	var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	jshint = require('gulp-jshint'),
	rename = require('gulp-rename'),
	minifyCSS = require('gulp-minify-css'),
	livereload = require('gulp-livereload'),
	connect = require('gulp-connect');

	gulp.task('server', function () {
	connect.server({
	root: ['.', '.tmp'],
	port: 8080,
	livereload: true
	});
	});

	gulp.task('lint', function() {
	return gulp.src(['./*.js'])
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
	});

	gulp.task('watch', function() {
	livereload.listen();
	gulp.watch('./*.js', ['uglify']);
	gulp.watch('./*.css', ['minify-css']);
	gulp.watch('./*.html', ['reload']);
	});

	gulp.task('reload', function() {
	gulp.src(['./*.html'])
	.pipe(livereload());
	});

	gulp.task('uglify', function() {
	gulp.src('./script.js')
	.pipe(uglify({ outSourceMap: true }))
	.pipe(rename(function (path) {
	if(path.extname === '.js') {
	path.basename += '.min';
	}
	}))
	.pipe(gulp.dest('.'))
	.pipe(livereload());
	});

	gulp.task('minify-css', function() {
	gulp.src('./style.css')
	.pipe(minifyCSS())
	.pipe(rename(function (path) {
	if(path.extname === '.css') {
	path.basename += '.min';
	}
	}))
	.pipe(gulp.dest('.'))
	.pipe(livereload());
	});

	gulp.task('build', ['uglify', 'minify-css']);
	gulp.task('default', ['build', 'server', 'watch']);
	<!DOCTYPE html>
	<html>

	<head>

	<link rel="stylesheet" href="style.css" />
	</head>

	<body>
	<div class="globalWrapper">
	<div id="column-content">
	<div id="timecourseChart">

	</div>
	</div>
	</div>

	<script src="//cdn.rawgit.com/Hypercubed/_F/master/_F.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	{
	"name": "fantom5-time-courses-samples",
	"version": "0.1.0",
	"dependencies": {
	},
	"author": "J. Harshbarger",
	"devDependencies": {
	"gulp-connect": "^2.2.0",
	"gulp-minify-css": "^0.4.5",
	"connect-livereload": "~0.4.0",
	"gulp": "~3.6.2",
	"gulp-jshint": "~1.9.0",
	"gulp-livereload": "^3.7.0",
	"gulp-rename": "^1.2.0",
	"gulp-uglify": "~1.0.2"
	}
	}
	/* global d3:true */
	/* global _F:true */

	(function() {
	'use strict';

	var URL = 'http://fantom.gsc.riken.jp/5/sstar/';
	var _series = _F('Series');
	var _sample = _F('Sample');
	var _name = _F('Time Course');
	var _id = _F('Time Course Id');
	var _time = _F('Time', Number);
	var _timePoint = _F('Time Desc');
	var _species = _F('Species');
	var _donor = _F('Donor');
	var _key = _F('key');
	var _values = _F('values');
	var _timeSort = _time.order().asc;
	var _donorSort = _donor.order().desc;

	var _sort = function(a,b) {
	return _timeSort(a,b) \|\| _donorSort(a,b);
	};

	var _timeCourseUrl = function(d) {
	return URL+d.id;
	};

	var _sampleUrl = function(d) {
	return URL+'FF:'+_sample(d);
	};

	function SeriesChart() {

	var
	width = 500,
	dy = 20,
	r = 3.5,
	ddy = 0,
	height = 900,
	margin = { top: 0, right: 200, bottom: 40, left: 200 };

	var color = d3.scale.category10();

	function chart(selection) {
	selection.each(function(_data) {

	var series = _series(_data[0]);

	var nestedData = d3.nest()
	.key(_name)
	//.sortKeys(d3.ascending)
	.key(_time)
	// .sortKeys(d3.ascending)
	.sortValues(_sort)
	.entries(_data);

	var xValues = [];
	nestedData.forEach(function(d) {

	var times = d.values.map(function(d) {
	d[_timePoint.key] = _timePoint(d.values[0]).trim();
	d[_time.key] = _time(d.values[0]);
	return d[_time.key];
	});

	d.id = _id(d.values[0].values[0]);
	d.species = _species(d.values[0].values[0]);

	d.timeRange = d3.extent(times);
	xValues = xValues.concat(times);
	});

	nestedData = nestedData
	.sort(_F('timeRange.1')
	.order(d3.descending));

	height = dy*nestedData.length;

	var svg = d3.select(this)
	.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('g')
	.append('text')
	.attr('dy', -0)
	.attr('dx', width/2)
	.style('text-anchor', 'middle')
	.attr('class','title')
	.text(series);

	var xExtent = d3.extent(_data, _time);
	var xMax = xExtent[1];

	var xUnit = 'mins', xUnitScale = 1;
	var xScale, xAxis = d3.svg.axis();

	if(series === 'Early response') {

	//console.log(nestedData);

	xScale = d3.scale.log().clamp(true)
	.domain([1, xMax])
	.range([0, width]);

	xValues
	.push(1000,10000);

	xValues = xValues.sort(d3.ascending);

	xAxis
	.scale(xScale)
	.tickValues(xValues)
	.tickFormat(function(d) {
	if (d === 0) { return '0:00'; }
	if (d < 60) { return '0:'+d; }
	d = d3.round(d/60,2);
	if (d === 1) { return d+'hr'; }
	if (d <= 5) { return d%1 === 0 ? d : ''; }
	if (d <= 5) { return d%1 === 0 ? d : ''; }
	if (d < 72) { return d%12 === 0 ? d : ''; }
	d = d/24;
	if (d === 4) { return d+'days'; }
	if (d === 28) { return d+'days'; }
	return d%2 === 0 ? d: '';
	});

	} else if (series === 'Development') {
	xUnitScale = 1/60/24;
	xUnit = 'days';

	//console.log(xExtent);

	xScale = d3.scale.linear()
	.domain(xExtent)
	.range([0, width]);

	xAxis
	.scale(xScale).tickValues(xValues)
	.tickFormat(function(d, i) { // mins
	var v = d3.round(d*xUnitScale,2);
	if (v < 0) { return i % 2 === 0 ? 'E'+(v+20) : ''; }
	return 'N'+v;
	});
	} else {

	if (xMax > 100) {
	xUnitScale = 1/60;
	xUnit = 'hrs';
	}
	if (xMax > 10000) {
	xUnitScale = 1/60/24;
	xUnit = 'days';
	}

	xScale = d3.scale.linear()
	.domain([0, xMax])
	.range([0, width]);

	xAxis
	.scale(xScale).tickValues(xValues)
	.tickFormat(function(d) { // mins
	var v = d3.round(d*xUnitScale,2);
	if (d === xMax) { return v+xUnit; }
	if (v%2 !== 0) { return ''; }
	return v;
	});

	}

	svg.append('g')
	.attr('transform', 'translate(0,' + (height+margin.bottom/2) + ')')
	.call(xAxis);

	var gSample = svg.selectAll('.sample').data(nestedData).enter()
	.append('g')
	.attr('transform', function(d, i) { return 'translate(0,' + (dy*i) + ')'; })
	.attr('class',function(d) { return 'sample '+_species(d.values[0].values[0]); });

	gSample
	.append('a')
	.attr('xlink:href', _timeCourseUrl)
	.attr('class','sample-name')
	.append('text')
	.style('text-anchor', 'end')
	.attr('dy', dy)
	.attr('dx', -10)
	.text(_key);

	gSample
	.append('g')
	.attr('transform', function() { return 'translate(0,' + dy + ')'; })
	//.each(function(d) {
	//d3.select(this).call(xAxis.tickValues(d.timeValues));
	//})
	//.call(xAxis)
	;

	gSample
	.append('line')
	.attr('class','sample-axis')
	//.attr("y1", 0)
	.attr('y1', dy)
	.attr('y2', dy)
	//.attr('x1', 0)
	.attr('x2', width);

	gSample
	.append('line')
	.attr('class','sample-range')
	.attr('y1', dy)
	.attr('y2', dy)
	.attr('x1', function(d) { return xScale(d.timeRange[0]); })
	.attr('x2', function(d) { return xScale(d.timeRange[1]); })
	.style('stroke', function(d) { return color(_species(d.values[0].values[0])); });

	var times = gSample
	.selectAll('.point').data(_values).enter()
	.append('g')
	.attr('class', function(d) { return 'point '+_species(d); });

	var points = times
	.selectAll('a').data(_values).enter()
	.append('a')
	.attr('xlink:href', _sampleUrl)
	.append('circle')
	.attr('r', r)
	.attr('cx', function(d) { return xScale(+_time(d)); })
	.attr('cy', function(d, i) { return dy-iddy; }) //function(d) { return dy/2+(_doner(d)-1)ddy; })
	.style('fill', function(d) { return color(_species(d)); });

	points
	.append('title')
	.text(function(d) {
	return _sample(d)+' '+_donor(d)+' @'+d['Time Desc'];
	});

	times.on('mouseenter', function(d) {
	//d3.selectAll('svg')
	// .classed('hover', true);

	var N = d.values.length-1;
	var duration = 300;

	d3.select(this).selectAll('circle')
	.transition()
	//.delay(function(d, i) { return i / N * duration; })
	.duration(duration)
	.attr('r', 1.5*r)
	.attr('cy', function(d, i) { return dy-(N-i)2.5r; });

	});

	times.on('mouseleave', function() {

	d3.select(this).selectAll('circle')
	.transition()
	.duration(500)
	.attr('r', r)
	.attr('cy', function(d, i) { return dy-i*ddy; });

	});

	});
	}

	chart.color = function(_) {
	if (arguments.length < 1) { return color; }
	color = _;
	return chart;
	};

	chart.width = function(_) {
	if (arguments.length < 1) { return width; }
	width = _;
	return chart;
	};

	chart.margin = function(_) {
	if (arguments.length < 1) { return margin; }
	margin = _;
	return chart;
	};

	return chart;

	}

	function SeriesLegend() {

	var
	//width = 830,
	dy = 20,
	gap = 3,
	//height = 200,
	margin = { top: 10, right: 30, bottom: 20, left: 730 };

	var color = d3.scale.category10();

	function chart(selection) {
	selection.each(function(data) {

	data = data \|\| color.domain();

	//console.log(data);

	var g=d3.select(this).append('g')
	.attr('transform', 'translate(' + [margin.left,margin.top] + ')');

	var legend = g
	.selectAll('.legend')
	.data(data)
	.enter().append('g')
	.attr('class', function(d) { return 'legend '+d; })
	.attr('transform', function(d,i) { return 'translate(0,' + (i * (dy+gap)) + ')'; });

	legend.append('rect')
	.attr('x', 0)
	.attr('width', dy)
	.attr('height', dy)
	.style('fill', color);

	legend.append('text')
	.attr('x', dy+gap)
	.attr('y', 9)
	.attr('dy', '.35em')
	.style('text-anchor', 'start')
	.text(function(d) { return d; });

	legend.on('mouseenter', function(d) {
	d3.selectAll('svg')
	.classed('hover hover-'+d, true);
	});

	legend.on('mouseleave', function(d) {
	d3.selectAll('svg')
	.classed('hover hover-'+d, false);
	});

	});
	}

	chart.color = function(_) {
	if (arguments.length < 1) { return color; }
	color = _;
	return chart;
	};

	chart.margin = function(_) {
	if (arguments.length < 1) { return margin; }
	margin = _;
	return chart;
	};

	return chart;

	}

	d3.tsv('table.tsv', function(data) {

	var nestedData = d3.nest()
	.key(_series)
	.sortKeys(d3.ascending)
	.entries(data);

	var color = d3.scale.category10().domain(['Human','Mouse']);

	//var width = 800;
	var width = 800;

	var seriesChart = new SeriesChart()
	.color(color)
	.width(width)
	.margin({ top: 60, right: 200, bottom: 40, left: 200 });

	var seriesLegend = new SeriesLegend()
	.color(color)
	.margin({ top: 35, right: 30, bottom: 20, left: width+230 });

	var charts = d3.select('#timecourseChart')
	.selectAll('.series').data(nestedData).enter()
	.append('div')
	.attr('class', 'series');

	charts
	.append('div').datum(_values)
	.call(seriesChart);

	d3.select('svg').append('g').datum(color.domain())
	.call(seriesLegend);

	});

	})();
	/* Styles go here */

	#timecourseChart {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 100;
	padding-top: 10px;
	position: relative;
	/* width: 960px; */
	}

	#timecourseChart .series {
	/* border: 1px solid red; */
	text-align: center;
	margin-top: -30px;
	}

	#timecourseChart .series h4 {
	margin-bottom: 0;
	}

	#timecourseChart line {
	stroke: #666;
	stroke-width: 0.5px;
	}

	#timecourseChart text {
	color: #000;
	font-family: sans-serif;
	font-size: 9px;
	fill: #000;
	}

	#timecourseChart text.title {
	font-size: 18px;
	font-weight: bold;
	}

	#timecourseChart .sample-name text {
	font-family: sans-serif;
	font-size: 9px;
	font-weight: bold;
	fill: #000;
	cursor: pointer;
	}

	#timecourseChart .sample-name text:hover {
	text-decoration: underline;
	}

	#timecourseChart .sample-axis {
	stroke: #666;
	stroke-width: 0.5px;
	}

	#timecourseChart .sample-range {
	stroke: #666;
	stroke-width: 4px;
	}

	#timecourseChart .name {
	fill: none;
	stroke: #000;
	}

	#timecourseChart path.domain {
	fill: none;
	stroke: #666;
	stroke-width: 0.5px;
	}

	#timecourseChart .point {
	stroke: #333;
	cursor: pointer;
	}

	#timecourseChart .point circle:hover {
	stroke: #000;
	stroke-width: 1.5px;
	}

	#timecourseChart svg.hover .sample {
	opacity: 0.5;
	}

	#timecourseChart svg.hover-Human .Human,
	#timecourseChart svg.hover-Mouse .Mouse,
	#timecourseChart svg.hover .sample:hover {
	opacity: 1;
	}

	#globalWrapper {
	width: 1350px;
	}
	#column-content {
	width: 83%;
	}