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.
chuckpr
/ fivethirtyeight-table
Created
April 29, 2020 12:02
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
chuckpr
/ facet.coffee
Last active
August 29, 2015 14:12
l2fc day + treatment facet grid plus panel zoom and pan
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 + ")" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
NewerOlder