chuckpr · August 29, 2015 14:11
diff --git a/readme.csv b/readme.csv
diff --git a/README.md b/README.md
diff --git a/readme.md b/readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">
 		<style>
                .axis path {
 						stroke: black;
 						shape-rendering: crispEdges;
 						stroke-width: 2.5;
 				}

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

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

 				.point { 
 						fill: black;
 						fill-opacity: 0.25;
 						stroke: black;
 						stroke-opacity: 1.0;
 				}

 				.point.unselected {
 						fill: black;
 						fill-opacity: 0.25;
 						stroke: black;
 						stroke-opacity: 1.0;
 				}

 				.point.selected {
 						fill: red;
 						stroke: red;
 						fill-opacity: 0.55;
 						stroke-opacity: 1.00;
 				}

 				.brush {
 						stroke: none;
 						fill: none;
 				}

 				.button {
 						position: absolute;
 						display: block;
 				}

 				rect.background {
 						fill: white;
 				}

 		</style>
 <svg class="chart"></svg>
 </head>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="scatter.js"></script>
 </body>
 </html>
diff --git a/scatter.coffee b/scatter.coffee
 margin  = {top: 20, bottom : 225, left : 75, right : 50}
 width = 700 - margin.left - margin.right
 height = 625 - margin.top - margin.bottom

 button = d3.select("body")
 		.append "div"
 		.attr "class", "button"
 		.style "top", "0px"
 		.style "left", (d) -> margin.left + width - margin.right + "px"
 		.append "button"
 		.attr "class", "button"

 button.text "brush"
 		.style "font-size", "18px"
 		.style "font-family", "sans-serif"

 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 
 
 x = d3.scale.ordinal()

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

 type = (d) ->
 		d.log2FoldChange = +d.log2FoldChange
 		d

 dataset = null
 ranks = ["Rank2", "Rank3", "Rank4", "Rank5", "Rank6"]
 iRank = 0
 filterTaxon = -1
 previousFilterTaxon = null
 selected = []
 console.log(ranks[iRank])

 sign = () -> if Math.random() < 0.5 then -1 else 1
 jitter = () -> sign() * Math.random() * 7.5

 d3.csv("readme.csv", type, (data) ->
 		pad = 0.25
 		y.domain [d3.min(data, (d) -> d.log2FoldChange) - 0.5, 
 		          d3.max(data, (d) -> d.log2FoldChange) + 0.5]
 		
 		bg = chart.append "rect"
 			.attr "class", "background"
 			.attr "width", width
 			.attr "height", height

 		ylabel = chart
 			.append "g"
 			.attr "class", "y axis"
 			.call yAxis

 		chart
 			.append "g"
 			.attr "class", "x axis"
 			.attr "transform", () -> "translate(0," + height + ")"

 		ylabel.append("text")
 			.attr "text-anchor", "middle"
 			.attr "x", -height / 2
 			.attr "y", -margin.left / 3
 			.attr "transform", "rotate(-90)"
 			.html "log&#8322; FoldChange"

 		update = () ->
 			xRank = ranks[iRank]
 			if filterTaxon == -1
 					d = data
 			else
 					d = data.filter (d) -> d[ranks[iRank - 1]] == filterTaxon

 			dNest= d3.nest()
 					.key (e) -> e[xRank]
 					.rollup (e) -> {MAX:d3.max(e, (g) -> g.log2FoldChange)}
 					.entries d

 			sorted = dNest.sort (a, b) -> d3.descending(a.values.MAX, b.values.MAX)
 			
 			domainValues = d3.set sorted.map (e) -> e.key
 		
 			x.rangeRoundPoints [0, width], 1.5
 				.domain(domainValues.values())
 			
 			chart.select(".x.axis")
 					.transition().duration(500)
 					.call xAxis
 					.selectAll "text"
 					.style "text-anchor", "end"
 					.style "font-style", "italic"
 					.attr "dx", "-1.0em"
 					.attr "dy", "0.5em"
 					.attr "x", 9
 					.attr "transform", "rotate(-60)"
 			
 			p = chart.selectAll(".point")
 				.data d, (d) -> d.OTU
 					
 			p.transition().duration(500)
 				.attr "cx", (d) -> x(d[xRank]) + jitter()
 				.attr "id", (d) -> d[xRank]
 				
 			p.enter().append "circle"
 				.attr "class", "point"
 				.attr "cy", (d) -> y(d.log2FoldChange)
 				.attr "cx", (d) -> x(d[xRank]) + jitter()
 				.attr "id", (d) -> d[xRank]
 				.attr "r", 0
 				.transition().duration 500
 				.attr "r", 4

 			p.exit()
 				.transition().duration 500
 				.attr "r", 0
 				.remove()

 			p.on "click", () ->
 					if iRank == ranks.length
 						return
 					else if d3.select(this).attr("id") in ["undefined","uncultured","unassigned"]
 							return
 					else
 						++iRank

 					selected.unshift(filterTaxon)
 					filterTaxon = d3.select(this).attr("id")
 					

 					console.log(iRank)
 					console.log(selected)
 					update()
 			
 		#update data.filter((d) -> d["Rank2"] == "Cyanobacteria")
 		update() 

 		bg.on "click", () ->
 				if iRank == 0
 						filterTaxon = -1
 						update()
 						return
 				else
 						--iRank
 						i = selected.lastIndexOf(filterTaxon)
 						console.log(i)
 						filterTaxon = selected[i + 1]

 				console.log(iRank)
 				console.log(filterTaxon)
 				update()

 		line = chart
 				.append "line"
 				.attr "x1", 0 
 				.attr "x2", width 
 				.attr "y1", y(0)
 				.attr "y2", y(0)
 				.attr "stroke", "blue"
 				.style "stroke-width", 4

 		brushmove = () ->
 			e = brush.extent();

 			chart
 				.selectAll ".point"
 				.classed "unselected", (d) -> 
 					e[0][0] > x(d[ranks[iRank]]) \
 					or x(d[ranks[iRank]]) > e[1][0] \
 					or e[0][1] > d.log2FoldChange \
 					or d.log2FoldChange > e[1][1]

 			chart
 				.selectAll ".point"
 				.classed "selected", (d) -> 
 					e[0][0] < x(d[ranks[iRank]]) \
 					and x(d[ranks[iRank]]) < e[1][0] \
 					and e[0][1] < d.log2FoldChange \
 					and d.log2FoldChange < e[1][1]

 		brushend = () -> 
 			chart
 				.selectAll ".unselected"
 				.classed "unselected", false if brush.empty()

 		brush = d3.svg.brush()
 			.x x
 			.y y
 			.on "brush", brushmove
 			.on "brushend", brushend

 		chart
 			.append "g"
 			.attr "class", "brush"
 			.call brush

 		button.on "click", () ->
 				v = d3.select(".brush").style("display")
 				console.log v
 				if v == "inline"
 						d3.select ".brush"
 							.style "display", "none"
 				else
 						d3.select ".brush"
 							.style "display", "inline"
 )
diff --git a/scatter.js b/scatter.js
 // Generated by CoffeeScript 1.8.0
 var button, chart, dataset, filterTaxon, height, iRank, jitter, margin, previousFilterTaxon, ranks, selected, sign, type, width, x, xAxis, y, yAxis;

 margin = {
  top: 20,
  bottom: 225,
  left: 75,
  right: 50
 };

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

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

 button = d3.select("body").append("div").attr("class", "button").style("top", "0px").style("left", function(d) {
  return margin.left + width - margin.right + "px";
 }).append("button").attr("class", "button");

 button.text("brush").style("font-size", "18px").style("font-family", "sans-serif");

 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);

 x = d3.scale.ordinal();

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

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

 dataset = null;

 ranks = ["Rank2", "Rank3", "Rank4", "Rank5", "Rank6"];

 iRank = 0;

 filterTaxon = -1;

 previousFilterTaxon = null;

 selected = [];

 console.log(ranks[iRank]);

 sign = function() {
  if (Math.random() < 0.5) {
    return -1;
  } else {
    return 1;
  }
 };

 jitter = function() {
  return sign() * Math.random() * 7.5;
 };

 d3.csv("readme.csv", type, function(data) {
  var bg, brush, brushend, brushmove, line, pad, update, ylabel;
  pad = 0.25;
  y.domain([
    d3.min(data, function(d) {
      return d.log2FoldChange;
    }) - 0.5, d3.max(data, function(d) {
      return d.log2FoldChange;
    }) + 0.5
  ]);
  bg = chart.append("rect").attr("class", "background").attr("width", width).attr("height", height);
  ylabel = chart.append("g").attr("class", "y axis").call(yAxis);
  chart.append("g").attr("class", "x axis").attr("transform", function() {
    return "translate(0," + height + ")";
  });
  ylabel.append("text").attr("text-anchor", "middle").attr("x", -height / 2).attr("y", -margin.left / 3).attr("transform", "rotate(-90)").html("log&#8322; FoldChange");
  update = function() {
    var d, dNest, domainValues, p, sorted, xRank;
    xRank = ranks[iRank];
    if (filterTaxon === -1) {
      d = data;
    } else {
      d = data.filter(function(d) {
        return d[ranks[iRank - 1]] === filterTaxon;
      });
    }
    dNest = d3.nest().key(function(e) {
      return e[xRank];
    }).rollup(function(e) {
      return {
        MAX: d3.max(e, function(g) {
          return g.log2FoldChange;
        })
      };
    }).entries(d);
    sorted = dNest.sort(function(a, b) {
      return d3.descending(a.values.MAX, b.values.MAX);
    });
    domainValues = d3.set(sorted.map(function(e) {
      return e.key;
    }));
    x.rangeRoundPoints([0, width], 1.5).domain(domainValues.values());
    chart.select(".x.axis").transition().duration(500).call(xAxis).selectAll("text").style("text-anchor", "end").style("font-style", "italic").attr("dx", "-1.0em").attr("dy", "0.5em").attr("x", 9).attr("transform", "rotate(-60)");
    p = chart.selectAll(".point").data(d, function(d) {
      return d.OTU;
    });
    p.transition().duration(500).attr("cx", function(d) {
      return x(d[xRank]) + jitter();
    }).attr("id", function(d) {
      return d[xRank];
    });
    p.enter().append("circle").attr("class", "point").attr("cy", function(d) {
      return y(d.log2FoldChange);
    }).attr("cx", function(d) {
      return x(d[xRank]) + jitter();
    }).attr("id", function(d) {
      return d[xRank];
    }).attr("r", 0).transition().duration(500).attr("r", 4);
    p.exit().transition().duration(500).attr("r", 0).remove();
    return p.on("click", function() {
      var _ref;
      if (iRank === ranks.length) {
        return;
      } else if ((_ref = d3.select(this).attr("id")) === "undefined" || _ref === "uncultured" || _ref === "unassigned") {
        return;
      } else {
        ++iRank;
      }
      selected.unshift(filterTaxon);
      filterTaxon = d3.select(this).attr("id");
      console.log(iRank);
      console.log(selected);
      return update();
    });
  };
  update();
  bg.on("click", function() {
    var i;
    if (iRank === 0) {
      filterTaxon = -1;
      update();
      return;
    } else {
      --iRank;
      i = selected.lastIndexOf(filterTaxon);
      console.log(i);
      filterTaxon = selected[i + 1];
    }
    console.log(iRank);
    console.log(filterTaxon);
    return update();
  });
  line = chart.append("line").attr("x1", 0).attr("x2", width).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "blue").style("stroke-width", 4);
  brushmove = function() {
    var e;
    e = brush.extent();
    chart.selectAll(".point").classed("unselected", function(d) {
      return e[0][0] > x(d[ranks[iRank]]) || x(d[ranks[iRank]]) > e[1][0] || e[0][1] > d.log2FoldChange || d.log2FoldChange > e[1][1];
    });
    return chart.selectAll(".point").classed("selected", function(d) {
      return e[0][0] < x(d[ranks[iRank]]) && x(d[ranks[iRank]]) < e[1][0] && e[0][1] < d.log2FoldChange && d.log2FoldChange < e[1][1];
    });
  };
  brushend = function() {
    if (brush.empty()) {
      return chart.selectAll(".unselected").classed("unselected", false);
    }
  };
  brush = d3.svg.brush().x(x).y(y).on("brush", brushmove).on("brushend", brushend);
  chart.append("g").attr("class", "brush").call(brush);
  return button.on("click", function() {
    var v;
    v = d3.select(".brush").style("display");
    console.log(v);
    if (v === "inline") {
      return d3.select(".brush").style("display", "none");
    } else {
      return d3.select(".brush").style("display", "inline");
    }
  });
 });
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<style>
	.axis path {
	stroke: black;
	shape-rendering: crispEdges;
	stroke-width: 2.5;
	}

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

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

	.point {
	fill: black;
	fill-opacity: 0.25;
	stroke: black;
	stroke-opacity: 1.0;
	}

	.point.unselected {
	fill: black;
	fill-opacity: 0.25;
	stroke: black;
	stroke-opacity: 1.0;
	}

	.point.selected {
	fill: red;
	stroke: red;
	fill-opacity: 0.55;
	stroke-opacity: 1.00;
	}

	.brush {
	stroke: none;
	fill: none;
	}

	.button {
	position: absolute;
	display: block;
	}

	rect.background {
	fill: white;
	}

	</style>
	<svg class="chart"></svg>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="scatter.js"></script>
	</body>
	</html>
	margin = {top: 20, bottom : 225, left : 75, right : 50}
	width = 700 - margin.left - margin.right
	height = 625 - margin.top - margin.bottom

	button = d3.select("body")
	.append "div"
	.attr "class", "button"
	.style "top", "0px"
	.style "left", (d) -> margin.left + width - margin.right + "px"
	.append "button"
	.attr "class", "button"

	button.text "brush"
	.style "font-size", "18px"
	.style "font-family", "sans-serif"

	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

	x = d3.scale.ordinal()

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

	type = (d) ->
	d.log2FoldChange = +d.log2FoldChange
	d

	dataset = null
	ranks = ["Rank2", "Rank3", "Rank4", "Rank5", "Rank6"]
	iRank = 0
	filterTaxon = -1
	previousFilterTaxon = null
	selected = []
	console.log(ranks[iRank])

	sign = () -> if Math.random() < 0.5 then -1 else 1
	jitter = () -> sign() * Math.random() * 7.5

	d3.csv("readme.csv", type, (data) ->
	pad = 0.25
	y.domain [d3.min(data, (d) -> d.log2FoldChange) - 0.5,
	d3.max(data, (d) -> d.log2FoldChange) + 0.5]

	bg = chart.append "rect"
	.attr "class", "background"
	.attr "width", width
	.attr "height", height

	ylabel = chart
	.append "g"
	.attr "class", "y axis"
	.call yAxis

	chart
	.append "g"
	.attr "class", "x axis"
	.attr "transform", () -> "translate(0," + height + ")"

	ylabel.append("text")
	.attr "text-anchor", "middle"
	.attr "x", -height / 2
	.attr "y", -margin.left / 3
	.attr "transform", "rotate(-90)"
	.html "log₂ FoldChange"

	update = () ->
	xRank = ranks[iRank]
	if filterTaxon == -1
	d = data
	else
	d = data.filter (d) -> d[ranks[iRank - 1]] == filterTaxon

	dNest= d3.nest()
	.key (e) -> e[xRank]
	.rollup (e) -> {MAX:d3.max(e, (g) -> g.log2FoldChange)}
	.entries d

	sorted = dNest.sort (a, b) -> d3.descending(a.values.MAX, b.values.MAX)

	domainValues = d3.set sorted.map (e) -> e.key

	x.rangeRoundPoints [0, width], 1.5
	.domain(domainValues.values())

	chart.select(".x.axis")
	.transition().duration(500)
	.call xAxis
	.selectAll "text"
	.style "text-anchor", "end"
	.style "font-style", "italic"
	.attr "dx", "-1.0em"
	.attr "dy", "0.5em"
	.attr "x", 9
	.attr "transform", "rotate(-60)"

	p = chart.selectAll(".point")
	.data d, (d) -> d.OTU

	p.transition().duration(500)
	.attr "cx", (d) -> x(d[xRank]) + jitter()
	.attr "id", (d) -> d[xRank]

	p.enter().append "circle"
	.attr "class", "point"
	.attr "cy", (d) -> y(d.log2FoldChange)
	.attr "cx", (d) -> x(d[xRank]) + jitter()
	.attr "id", (d) -> d[xRank]
	.attr "r", 0
	.transition().duration 500
	.attr "r", 4

	p.exit()
	.transition().duration 500
	.attr "r", 0
	.remove()

	p.on "click", () ->
	if iRank == ranks.length
	return
	else if d3.select(this).attr("id") in ["undefined","uncultured","unassigned"]
	return
	else
	++iRank

	selected.unshift(filterTaxon)
	filterTaxon = d3.select(this).attr("id")


	console.log(iRank)
	console.log(selected)
	update()

	#update data.filter((d) -> d["Rank2"] == "Cyanobacteria")
	update()

	bg.on "click", () ->
	if iRank == 0
	filterTaxon = -1
	update()
	return
	else
	--iRank
	i = selected.lastIndexOf(filterTaxon)
	console.log(i)
	filterTaxon = selected[i + 1]

	console.log(iRank)
	console.log(filterTaxon)
	update()

	line = chart
	.append "line"
	.attr "x1", 0
	.attr "x2", width
	.attr "y1", y(0)
	.attr "y2", y(0)
	.attr "stroke", "blue"
	.style "stroke-width", 4

	brushmove = () ->
	e = brush.extent();

	chart
	.selectAll ".point"
	.classed "unselected", (d) ->
	e[0][0] > x(d[ranks[iRank]]) \
	or x(d[ranks[iRank]]) > e[1][0] \
	or e[0][1] > d.log2FoldChange \
	or d.log2FoldChange > e[1][1]

	chart
	.selectAll ".point"
	.classed "selected", (d) ->
	e[0][0] < x(d[ranks[iRank]]) \
	and x(d[ranks[iRank]]) < e[1][0] \
	and e[0][1] < d.log2FoldChange \
	and d.log2FoldChange < e[1][1]

	brushend = () ->
	chart
	.selectAll ".unselected"
	.classed "unselected", false if brush.empty()

	brush = d3.svg.brush()
	.x x
	.y y
	.on "brush", brushmove
	.on "brushend", brushend

	chart
	.append "g"
	.attr "class", "brush"
	.call brush

	button.on "click", () ->
	v = d3.select(".brush").style("display")
	console.log v
	if v == "inline"
	d3.select ".brush"
	.style "display", "none"
	else
	d3.select ".brush"
	.style "display", "inline"
	)
	// Generated by CoffeeScript 1.8.0
	var button, chart, dataset, filterTaxon, height, iRank, jitter, margin, previousFilterTaxon, ranks, selected, sign, type, width, x, xAxis, y, yAxis;

	margin = {
	top: 20,
	bottom: 225,
	left: 75,
	right: 50
	};

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

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

	button = d3.select("body").append("div").attr("class", "button").style("top", "0px").style("left", function(d) {
	return margin.left + width - margin.right + "px";
	}).append("button").attr("class", "button");

	button.text("brush").style("font-size", "18px").style("font-family", "sans-serif");

	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);

	x = d3.scale.ordinal();

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

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

	dataset = null;

	ranks = ["Rank2", "Rank3", "Rank4", "Rank5", "Rank6"];

	iRank = 0;

	filterTaxon = -1;

	previousFilterTaxon = null;

	selected = [];

	console.log(ranks[iRank]);

	sign = function() {
	if (Math.random() < 0.5) {
	return -1;
	} else {
	return 1;
	}
	};

	jitter = function() {
	return sign() * Math.random() * 7.5;
	};

	d3.csv("readme.csv", type, function(data) {
	var bg, brush, brushend, brushmove, line, pad, update, ylabel;
	pad = 0.25;
	y.domain([
	d3.min(data, function(d) {
	return d.log2FoldChange;
	}) - 0.5, d3.max(data, function(d) {
	return d.log2FoldChange;
	}) + 0.5
	]);
	bg = chart.append("rect").attr("class", "background").attr("width", width).attr("height", height);
	ylabel = chart.append("g").attr("class", "y axis").call(yAxis);
	chart.append("g").attr("class", "x axis").attr("transform", function() {
	return "translate(0," + height + ")";
	});
	ylabel.append("text").attr("text-anchor", "middle").attr("x", -height / 2).attr("y", -margin.left / 3).attr("transform", "rotate(-90)").html("log₂ FoldChange");
	update = function() {
	var d, dNest, domainValues, p, sorted, xRank;
	xRank = ranks[iRank];
	if (filterTaxon === -1) {
	d = data;
	} else {
	d = data.filter(function(d) {
	return d[ranks[iRank - 1]] === filterTaxon;
	});
	}
	dNest = d3.nest().key(function(e) {
	return e[xRank];
	}).rollup(function(e) {
	return {
	MAX: d3.max(e, function(g) {
	return g.log2FoldChange;
	})
	};
	}).entries(d);
	sorted = dNest.sort(function(a, b) {
	return d3.descending(a.values.MAX, b.values.MAX);
	});
	domainValues = d3.set(sorted.map(function(e) {
	return e.key;
	}));
	x.rangeRoundPoints([0, width], 1.5).domain(domainValues.values());
	chart.select(".x.axis").transition().duration(500).call(xAxis).selectAll("text").style("text-anchor", "end").style("font-style", "italic").attr("dx", "-1.0em").attr("dy", "0.5em").attr("x", 9).attr("transform", "rotate(-60)");
	p = chart.selectAll(".point").data(d, function(d) {
	return d.OTU;
	});
	p.transition().duration(500).attr("cx", function(d) {
	return x(d[xRank]) + jitter();
	}).attr("id", function(d) {
	return d[xRank];
	});
	p.enter().append("circle").attr("class", "point").attr("cy", function(d) {
	return y(d.log2FoldChange);
	}).attr("cx", function(d) {
	return x(d[xRank]) + jitter();
	}).attr("id", function(d) {
	return d[xRank];
	}).attr("r", 0).transition().duration(500).attr("r", 4);
	p.exit().transition().duration(500).attr("r", 0).remove();
	return p.on("click", function() {
	var _ref;
	if (iRank === ranks.length) {
	return;
	} else if ((_ref = d3.select(this).attr("id")) === "undefined" \|\| _ref === "uncultured" \|\| _ref === "unassigned") {
	return;
	} else {
	++iRank;
	}
	selected.unshift(filterTaxon);
	filterTaxon = d3.select(this).attr("id");
	console.log(iRank);
	console.log(selected);
	return update();
	});
	};
	update();
	bg.on("click", function() {
	var i;
	if (iRank === 0) {
	filterTaxon = -1;
	update();
	return;
	} else {
	--iRank;
	i = selected.lastIndexOf(filterTaxon);
	console.log(i);
	filterTaxon = selected[i + 1];
	}
	console.log(iRank);
	console.log(filterTaxon);
	return update();
	});
	line = chart.append("line").attr("x1", 0).attr("x2", width).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "blue").style("stroke-width", 4);
	brushmove = function() {
	var e;
	e = brush.extent();
	chart.selectAll(".point").classed("unselected", function(d) {
	return e[0][0] > x(d[ranks[iRank]]) \|\| x(d[ranks[iRank]]) > e[1][0] \|\| e[0][1] > d.log2FoldChange \|\| d.log2FoldChange > e[1][1];
	});
	return chart.selectAll(".point").classed("selected", function(d) {
	return e[0][0] < x(d[ranks[iRank]]) && x(d[ranks[iRank]]) < e[1][0] && e[0][1] < d.log2FoldChange && d.log2FoldChange < e[1][1];
	});
	};
	brushend = function() {
	if (brush.empty()) {
	return chart.selectAll(".unselected").classed("unselected", false);
	}
	};
	brush = d3.svg.brush().x(x).y(y).on("brush", brushmove).on("brushend", brushend);
	chart.append("g").attr("class", "brush").call(brush);
	return button.on("click", function() {
	var v;
	v = d3.select(".brush").style("display");
	console.log(v);
	if (v === "inline") {
	return d3.select(".brush").style("display", "none");
	} else {
	return d3.select(".brush").style("display", "inline");
	}
	});
	});