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.
<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> |
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 + ")" |
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 + ")" |
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 13C cellulose.
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 ordination plot from a 15N2 DNA-SIP experiment. Each panel has independent brushing allowing different regions to be highlighted.
Just a simple scatter plot example with two panels in D3.js.
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 15N2 DNA-SIP experiment with biological soil crust samples.
This is another example of brushing with a D3.js scatter plot. Drag a rectangle to highlight points.