chuckpr · August 29, 2015 14:12
diff --git a/readme.csv b/readme.csv
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <html lang="en">
 <head>
 <style>

 .axis path {
 stroke: black;
 shape-rendering: crispEdges;
 stroke-width: 2.5;
 stroke-opacity = 0.50;
 }

 .axis line {
 shape-rendering: crispEdges;
 stroke: lightgrey;
 }

 .axis text {
 font-size: 18px;
 font-family: sans-serif;
 }


 .c13CCPS {
 fill: #377eb8;
 fill-opacity: 0.50;
 stroke: #377eb8;
 stroke-width: 3;
 }

 .c12CCPS {
 fill: #ff7f00;
 fill-opacity: 0.50;
 stroke: #ff7f00;
 stroke-width: 3;
 }

 </style>
 </head>
 <body>
 <svg class="chart"></svg>
 <div id="ex10"></div>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="profile.js"></script>
 </body>
diff --git a/profile.coffee b/profile.coffee
 margin  = {top: 50, bottom : 120, left : 130, right : 50}
 width = 750 - margin.left - margin.right
 height = 450 - margin.top - margin.bottom

 chart = d3.select ".chart" 
  .attr "width", width + margin.left + margin.right
  .attr "height", height + margin.top + margin.bottom
  .append "g"
  .attr "transform", "translate(" + margin.left + "," + margin.top + ")"

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

 yAxis = d3.svg.axis()
  .scale y
  .orient "left"
  .tickSize -width, 0, 0
  .ticks 5

 x = d3.scale.linear()
  .range [0, width]

 xAxis = d3.svg.axis()
  .scale x
  .orient "bottom"
  .tickSize -height, 0, 0

 list = d3.select "#ex10"
  .append "select"

 c = d3.scale.ordinal()
  .range ["blue", "orange"]

 line = d3.svg.line()

 type = (d) ->
  d.Density = +d.Density
  d.Abundance = +d.Abundance
  d

 dataset = null
 nestedData = null
 otu = null

 d3.csv("readme.csv", type, (error, rows) ->
  dataset = rows
  x.domain d3.extent (row.Density for row in dataset)

  axX = chart
    .append "g"
    .attr "class", "x axis"  
    .attr "transform", "translate(0," + height + ")"
    .call xAxis

  axX
    .selectAll "text"
    .attr "transform", "translate(-15,15)rotate(-45)"

  axX
    .append "text"
    .attr "transform", () -> 
      "translate(" + width/2 + "," + margin.bottom/2 + ")"
    .attr "text-anchor", "middle"
    .text "Density, g/mL"

  nestedData = d3.nest()
    .key (d) -> d.OTU
    .key (d) -> d.Treatment
      .sortValues (a, b) -> d3.ascending a.Density, b.Density
    .map dataset, d3.map

  list.selectAll "option"
    .data nestedData.keys()
    .enter()
    .append "option"
    .attr "value", (d) -> d
    .text (d) -> d

  otu = nestedData.keys()[0]
  initialData = nestedData.get otu

  getMaxA = (a) ->
    d3.max (i.Abundance for i in a)

  max = d3.max (getMaxA initialData.get t for t in initialData.keys())
  pad = max * 0.02

  y.domain [0 - pad, max + pad]

  chart
    .append "g"
    .attr "class", "y axis"
    .attr "transform", "translate(0," + 0 + ")"
    .call yAxis
    .append "text"
    .attr "transform", () -> "translate(" + -margin.left/2 + "," + height/2 + ")rotate(-90)"
    .attr "text-anchor", "middle"
    .text "Relative abundance"

  areaFunc = d3.svg.area()
    .y0 y(0)
    .y1 (d) -> y d.Abundance
    .x (d) -> x d.Density
    .interpolate "basis"

  makeArea = (d) -> 
    id =  (d) -> "c" + (i.Treatment for i in d)[0]
    chart
      .append "path"
      .data [d]
      .attr "id", id
      .attr "class", id
      .attr "d", areaFunc
      .attr "stroke", "blue"
      .attr "stroke-width", 2
    undefined

  plot = (data) ->
    makeArea(data.get k) for k in data.keys()
    undefined

  plot(initialData)

  update = ->
    d = nestedData.get otu

    max = d3.max (getMaxA d.get t for t in d.keys())
    pad = max * 0.02
    y.domain [0 - pad , max + pad]

    d3.select ".y.axis"
      .transition()
      .duration 750
      .call yAxis

    updateArea = (d) ->
      id =  "#" + "c" + (i.Treatment for i in d)[0]
      d3.select id
        .data [d]
        .transition()
        .duration 750
        .attr "d", areaFunc
      undefined

    plotUpdate = (d) ->
      updateArea(d.get k) for k in d.keys()
      undefined

    plotUpdate(d)
    undefined

  list.on "change", ->
    otu = d3.event.target.value
    update()
    undefined

  undefined
 )
diff --git a/profile.js b/profile.js
 // Generated by CoffeeScript 1.8.0
 var c, chart, dataset, height, line, list, margin, nestedData, otu, type, width, x, xAxis, y, yAxis;

 margin = {
  top: 50,
  bottom: 120,
  left: 130,
  right: 50
 };

 width = 750 - margin.left - margin.right;

 height = 450 - margin.top - margin.bottom;

 chart = d3.select(".chart").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

 yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width, 0, 0).ticks(5);

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

 xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height, 0, 0);

 list = d3.select("#ex10").append("select");

 c = d3.scale.ordinal().range(["blue", "orange"]);

 line = d3.svg.line();

 type = function(d) {
  d.Density = +d.Density;
  d.Abundance = +d.Abundance;
  return d;
 };

 dataset = null;

 nestedData = null;

 otu = null;

 d3.csv("readme.csv", type, function(error, rows) {
  var areaFunc, axX, getMaxA, initialData, makeArea, max, pad, plot, row, t, update;
  dataset = rows;
  x.domain(d3.extent((function() {
    var _i, _len, _results;
    _results = [];
    for (_i = 0, _len = dataset.length; _i < _len; _i++) {
      row = dataset[_i];
      _results.push(row.Density);
    }
    return _results;
  })()));
  axX = chart.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
  axX.selectAll("text").attr("transform", "translate(-15,15)rotate(-45)");
  axX.append("text").attr("transform", function() {
    return "translate(" + width / 2 + "," + margin.bottom / 2 + ")";
  }).attr("text-anchor", "middle").text("Density, g/mL");
  nestedData = d3.nest().key(function(d) {
    return d.OTU;
  }).key(function(d) {
    return d.Treatment;
  }).sortValues(function(a, b) {
    return d3.ascending(a.Density, b.Density);
  }).map(dataset, d3.map);
  list.selectAll("option").data(nestedData.keys()).enter().append("option").attr("value", function(d) {
    return d;
  }).text(function(d) {
    return d;
  });
  otu = nestedData.keys()[0];
  initialData = nestedData.get(otu);
  getMaxA = function(a) {
    var i;
    return d3.max((function() {
      var _i, _len, _results;
      _results = [];
      for (_i = 0, _len = a.length; _i < _len; _i++) {
        i = a[_i];
        _results.push(i.Abundance);
      }
      return _results;
    })());
  };
  max = d3.max((function() {
    var _i, _len, _ref, _results;
    _ref = initialData.keys();
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      t = _ref[_i];
      _results.push(getMaxA(initialData.get(t)));
    }
    return _results;
  })());
  pad = max * 0.02;
  y.domain([0 - pad, max + pad]);
  chart.append("g").attr("class", "y axis").attr("transform", "translate(0," + 0 + ")").call(yAxis).append("text").attr("transform", function() {
    return "translate(" + -margin.left / 2 + "," + height / 2 + ")rotate(-90)";
  }).attr("text-anchor", "middle").text("Relative abundance");
  areaFunc = d3.svg.area().y0(y(0)).y1(function(d) {
    return y(d.Abundance);
  }).x(function(d) {
    return x(d.Density);
  }).interpolate("basis");
  makeArea = function(d) {
    var id;
    id = function(d) {
      var i;
      return "c" + ((function() {
        var _i, _len, _results;
        _results = [];
        for (_i = 0, _len = d.length; _i < _len; _i++) {
          i = d[_i];
          _results.push(i.Treatment);
        }
        return _results;
      })())[0];
    };
    chart.append("path").data([d]).attr("id", id).attr("class", id).attr("d", areaFunc).attr("stroke", "blue").attr("stroke-width", 2);
    return void 0;
  };
  plot = function(data) {
    var k, _i, _len, _ref;
    _ref = data.keys();
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      k = _ref[_i];
      makeArea(data.get(k));
    }
    return void 0;
  };
  plot(initialData);
  update = function() {
    var d, plotUpdate, updateArea;
    d = nestedData.get(otu);
    max = d3.max((function() {
      var _i, _len, _ref, _results;
      _ref = d.keys();
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        t = _ref[_i];
        _results.push(getMaxA(d.get(t)));
      }
      return _results;
    })());
    pad = max * 0.02;
    y.domain([0 - pad, max + pad]);
    d3.select(".y.axis").transition().duration(750).call(yAxis);
    updateArea = function(d) {
      var i, id;
      id = "#" + "c" + ((function() {
        var _i, _len, _results;
        _results = [];
        for (_i = 0, _len = d.length; _i < _len; _i++) {
          i = d[_i];
          _results.push(i.Treatment);
        }
        return _results;
      })())[0];
      d3.select(id).data([d]).transition().duration(750).attr("d", areaFunc);
      return void 0;
    };
    plotUpdate = function(d) {
      var k, _i, _len, _ref;
      _ref = d.keys();
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        k = _ref[_i];
        updateArea(d.get(k));
      }
      return void 0;
    };
    plotUpdate(d);
    return void 0;
  };
  list.on("change", function() {
    otu = d3.event.target.value;
    update();
    return void 0;
  });
  return void 0;
 });
diff --git a/thumbnail.png b/thumbnail.png
	<html lang="en">
	<head>
	<style>

	.axis path {
	stroke: black;
	shape-rendering: crispEdges;
	stroke-width: 2.5;
	stroke-opacity = 0.50;
	}

	.axis line {
	shape-rendering: crispEdges;
	stroke: lightgrey;
	}

	.axis text {
	font-size: 18px;
	font-family: sans-serif;
	}


	.c13CCPS {
	fill: #377eb8;
	fill-opacity: 0.50;
	stroke: #377eb8;
	stroke-width: 3;
	}

	.c12CCPS {
	fill: #ff7f00;
	fill-opacity: 0.50;
	stroke: #ff7f00;
	stroke-width: 3;
	}

	</style>
	</head>
	<body>
	<svg class="chart"></svg>
	<div id="ex10"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="profile.js"></script>
	</body>
	margin = {top: 50, bottom : 120, left : 130, right : 50}
	width = 750 - margin.left - margin.right
	height = 450 - margin.top - margin.bottom

	chart = d3.select ".chart"
	.attr "width", width + margin.left + margin.right
	.attr "height", height + margin.top + margin.bottom
	.append "g"
	.attr "transform", "translate(" + margin.left + "," + margin.top + ")"

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

	yAxis = d3.svg.axis()
	.scale y
	.orient "left"
	.tickSize -width, 0, 0
	.ticks 5

	x = d3.scale.linear()
	.range [0, width]

	xAxis = d3.svg.axis()
	.scale x
	.orient "bottom"
	.tickSize -height, 0, 0

	list = d3.select "#ex10"
	.append "select"

	c = d3.scale.ordinal()
	.range ["blue", "orange"]

	line = d3.svg.line()

	type = (d) ->
	d.Density = +d.Density
	d.Abundance = +d.Abundance
	d

	dataset = null
	nestedData = null
	otu = null

	d3.csv("readme.csv", type, (error, rows) ->
	dataset = rows
	x.domain d3.extent (row.Density for row in dataset)

	axX = chart
	.append "g"
	.attr "class", "x axis"
	.attr "transform", "translate(0," + height + ")"
	.call xAxis

	axX
	.selectAll "text"
	.attr "transform", "translate(-15,15)rotate(-45)"

	axX
	.append "text"
	.attr "transform", () ->
	"translate(" + width/2 + "," + margin.bottom/2 + ")"
	.attr "text-anchor", "middle"
	.text "Density, g/mL"

	nestedData = d3.nest()
	.key (d) -> d.OTU
	.key (d) -> d.Treatment
	.sortValues (a, b) -> d3.ascending a.Density, b.Density
	.map dataset, d3.map

	list.selectAll "option"
	.data nestedData.keys()
	.enter()
	.append "option"
	.attr "value", (d) -> d
	.text (d) -> d

	otu = nestedData.keys()[0]
	initialData = nestedData.get otu

	getMaxA = (a) ->
	d3.max (i.Abundance for i in a)

	max = d3.max (getMaxA initialData.get t for t in initialData.keys())
	pad = max * 0.02

	y.domain [0 - pad, max + pad]

	chart
	.append "g"
	.attr "class", "y axis"
	.attr "transform", "translate(0," + 0 + ")"
	.call yAxis
	.append "text"
	.attr "transform", () -> "translate(" + -margin.left/2 + "," + height/2 + ")rotate(-90)"
	.attr "text-anchor", "middle"
	.text "Relative abundance"

	areaFunc = d3.svg.area()
	.y0 y(0)
	.y1 (d) -> y d.Abundance
	.x (d) -> x d.Density
	.interpolate "basis"

	makeArea = (d) ->
	id = (d) -> "c" + (i.Treatment for i in d)[0]
	chart
	.append "path"
	.data [d]
	.attr "id", id
	.attr "class", id
	.attr "d", areaFunc
	.attr "stroke", "blue"
	.attr "stroke-width", 2
	undefined

	plot = (data) ->
	makeArea(data.get k) for k in data.keys()
	undefined

	plot(initialData)

	update = ->
	d = nestedData.get otu

	max = d3.max (getMaxA d.get t for t in d.keys())
	pad = max * 0.02
	y.domain [0 - pad , max + pad]

	d3.select ".y.axis"
	.transition()
	.duration 750
	.call yAxis

	updateArea = (d) ->
	id = "#" + "c" + (i.Treatment for i in d)[0]
	d3.select id
	.data [d]
	.transition()
	.duration 750
	.attr "d", areaFunc
	undefined

	plotUpdate = (d) ->
	updateArea(d.get k) for k in d.keys()
	undefined

	plotUpdate(d)
	undefined

	list.on "change", ->
	otu = d3.event.target.value
	update()
	undefined

	undefined
	)
	// Generated by CoffeeScript 1.8.0
	var c, chart, dataset, height, line, list, margin, nestedData, otu, type, width, x, xAxis, y, yAxis;

	margin = {
	top: 50,
	bottom: 120,
	left: 130,
	right: 50
	};

	width = 750 - margin.left - margin.right;

	height = 450 - margin.top - margin.bottom;

	chart = d3.select(".chart").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

	yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width, 0, 0).ticks(5);

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

	xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height, 0, 0);

	list = d3.select("#ex10").append("select");

	c = d3.scale.ordinal().range(["blue", "orange"]);

	line = d3.svg.line();

	type = function(d) {
	d.Density = +d.Density;
	d.Abundance = +d.Abundance;
	return d;
	};

	dataset = null;

	nestedData = null;

	otu = null;

	d3.csv("readme.csv", type, function(error, rows) {
	var areaFunc, axX, getMaxA, initialData, makeArea, max, pad, plot, row, t, update;
	dataset = rows;
	x.domain(d3.extent((function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = dataset.length; _i < _len; _i++) {
	row = dataset[_i];
	_results.push(row.Density);
	}
	return _results;
	})()));
	axX = chart.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
	axX.selectAll("text").attr("transform", "translate(-15,15)rotate(-45)");
	axX.append("text").attr("transform", function() {
	return "translate(" + width / 2 + "," + margin.bottom / 2 + ")";
	}).attr("text-anchor", "middle").text("Density, g/mL");
	nestedData = d3.nest().key(function(d) {
	return d.OTU;
	}).key(function(d) {
	return d.Treatment;
	}).sortValues(function(a, b) {
	return d3.ascending(a.Density, b.Density);
	}).map(dataset, d3.map);
	list.selectAll("option").data(nestedData.keys()).enter().append("option").attr("value", function(d) {
	return d;
	}).text(function(d) {
	return d;
	});
	otu = nestedData.keys()[0];
	initialData = nestedData.get(otu);
	getMaxA = function(a) {
	var i;
	return d3.max((function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = a.length; _i < _len; _i++) {
	i = a[_i];
	_results.push(i.Abundance);
	}
	return _results;
	})());
	};
	max = d3.max((function() {
	var _i, _len, _ref, _results;
	_ref = initialData.keys();
	_results = [];
	for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	t = _ref[_i];
	_results.push(getMaxA(initialData.get(t)));
	}
	return _results;
	})());
	pad = max * 0.02;
	y.domain([0 - pad, max + pad]);
	chart.append("g").attr("class", "y axis").attr("transform", "translate(0," + 0 + ")").call(yAxis).append("text").attr("transform", function() {
	return "translate(" + -margin.left / 2 + "," + height / 2 + ")rotate(-90)";
	}).attr("text-anchor", "middle").text("Relative abundance");
	areaFunc = d3.svg.area().y0(y(0)).y1(function(d) {
	return y(d.Abundance);
	}).x(function(d) {
	return x(d.Density);
	}).interpolate("basis");
	makeArea = function(d) {
	var id;
	id = function(d) {
	var i;
	return "c" + ((function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = d.length; _i < _len; _i++) {
	i = d[_i];
	_results.push(i.Treatment);
	}
	return _results;
	})())[0];
	};
	chart.append("path").data([d]).attr("id", id).attr("class", id).attr("d", areaFunc).attr("stroke", "blue").attr("stroke-width", 2);
	return void 0;
	};
	plot = function(data) {
	var k, _i, _len, _ref;
	_ref = data.keys();
	for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	k = _ref[_i];
	makeArea(data.get(k));
	}
	return void 0;
	};
	plot(initialData);
	update = function() {
	var d, plotUpdate, updateArea;
	d = nestedData.get(otu);
	max = d3.max((function() {
	var _i, _len, _ref, _results;
	_ref = d.keys();
	_results = [];
	for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	t = _ref[_i];
	_results.push(getMaxA(d.get(t)));
	}
	return _results;
	})());
	pad = max * 0.02;
	y.domain([0 - pad, max + pad]);
	d3.select(".y.axis").transition().duration(750).call(yAxis);
	updateArea = function(d) {
	var i, id;
	id = "#" + "c" + ((function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = d.length; _i < _len; _i++) {
	i = d[_i];
	_results.push(i.Treatment);
	}
	return _results;
	})())[0];
	d3.select(id).data([d]).transition().duration(750).attr("d", areaFunc);
	return void 0;
	};
	plotUpdate = function(d) {
	var k, _i, _len, _ref;
	_ref = d.keys();
	for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	k = _ref[_i];
	updateArea(d.get(k));
	}
	return void 0;
	};
	plotUpdate(d);
	return void 0;
	};
	list.on("change", function() {
	otu = d3.event.target.value;
	update();
	return void 0;
	});
	return void 0;
	});