Charles Pepe-Ranney chuckpr

The brush can be turned on and off by clicking the brush button. When the brush is off, clicking on a point drills down into that taxonomic category at higher resolution. Try it out! This data is from a ¹⁵N₂ DNA-SIP experiment with biological soil crust samples.

Just a simple scatter plot example with two panels in D3.js.

This is an ordination plot from a ¹⁵N₂ DNA-SIP experiment. Each panel has independent brushing allowing different regions to be highlighted.

This path can be dragged left or right along the x-axis. Go to the gist to see the mpld3 code in an IPython notebook.

This is an example of a transitioning SVG path. Selecting an OTU from the drop down (lower left) transitions the plot to the data for selected OTU. These profiles are abundance versus density plots for a DNA-SIP experiment with ¹³C cellulose.

This is a simple scatter plot. Hovering over points increases the opacity and radius. The SVG title element for each circle is shown by the browser on hover as well.

	margin = {top: 80, bottom : 100, left : 100, right : 50}
	width = 1000 - margin.left - margin.right
	height = 650 - 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 + ")"

	margin = {top: 60, bottom : 40, left : 100, right : 50}
	width = 1000 - margin.left - margin.right
	height = 650 - 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 + ")"


	<div class="polls3">
	<table>
	<thead>
	<tr>
	{% for c in cols[:5] %}
	<th><div {% if c.lower() in ('grade', 'sample', 'weight') %}
	style="text-align: center"
	{% endif %}>
	{{c}}</div>