Skip to content

Instantly share code, notes, and snippets.

@chuckpr

chuckpr/README.md

Last active August 29, 2015 14:12
Show Gist options
  • Save chuckpr/1df7d4db3ad616558460 to your computer and use it in GitHub Desktop.
Save chuckpr/1df7d4db3ad616558460 to your computer and use it in GitHub Desktop.
Download ZIP
l2fc scatter of just cellulose responders
Raw
readme.csv
Day log2FoldChange OTU Rank2
14 5.86653605539366 OTU.862 Actinobacteria
14 5.60522086742976 OTU.83 Verrucomicrobia
14 5.31420978791286 OTU.1065 Planctomycetes
14 4.91729510953332 OTU.484 Planctomycetes
14 4.8667869913339 OTU.900 Proteobacteria
30 4.82899841220421 OTU.6062 Proteobacteria
14 4.79721102506813 OTU.518 Proteobacteria
14 4.75836265426757 OTU.120 Cyanobacteria
30 4.60516193778251 OTU.1023 Verrucomicrobia
30 4.54215796499263 OTU.266 Verrucomicrobia
30 4.48812380443761 OTU.541 Verrucomicrobia
14 4.47565869463611 OTU.1754 Proteobacteria
14 4.4664912583447 OTU.982 Proteobacteria
14 4.43004098160107 OTU.627 Verrucomicrobia
14 4.36501378475907 OTU.185 Verrucomicrobia
30 4.31802540995682 OTU.1204 Planctomycetes
14 4.3157840153423 OTU.1087 Proteobacteria
14 4.30672099956178 OTU.64 Chloroflexi
14 4.19375318140684 OTU.4322 Chloroflexi
30 4.06865501546823 OTU.1312 Proteobacteria
14 4.05999125486535 OTU.150 Planctomycetes
14 4.01077582195424 OTU.5539 Proteobacteria
30 4.0021106075943 OTU.638 Verrucomicrobia
14 3.87626414566445 OTU.3775 Proteobacteria
30 3.84055977181005 OTU.633 Proteobacteria
30 3.83335537082856 OTU.3594 Proteobacteria
14 3.81347758542581 OTU.204 Planctomycetes
30 3.78710446927915 OTU.465 Bacteroidetes
30 3.69895626122866 OTU.429 Proteobacteria
30 3.68677777701935 OTU.1094 Bacteroidetes
14 3.68473919191762 OTU.98 Chloroflexi
30 3.67913384859115 OTU.971 Chloroflexi
30 3.62983275803117 OTU.663 Planctomycetes
7 3.61760685167259 OTU.6 Proteobacteria
30 3.59968254489095 OTU.5190 Chloroflexi
14 3.57548085663875 OTU.473 Planctomycetes
30 3.54561671420477 OTU.285 Planctomycetes
14 3.54386303083846 OTU.351 Planctomycetes
30 3.49400032859876 OTU.2192 Verrucomicrobia
30 3.4829770164437 OTU.600 Planctomycetes
30 3.42849379075817 OTU.1533 Verrucomicrobia
14 3.41412961894957 OTU.11 Proteobacteria
30 3.3380929514696 OTU.669 Bacteroidetes
14 3.31430811556985 OTU.119 Proteobacteria
14 3.24499981172742 OTU.154 Proteobacteria
14 3.21033794354877 OTU.766 Proteobacteria
14 3.09883189693992 OTU.165 Proteobacteria
30 3.05238223700903 OTU.442 Proteobacteria
30 3.02894146381265 OTU.573 Bacteroidetes
14 2.99029348594081 OTU.327 Proteobacteria
14 2.94457726018402 OTU.90 Proteobacteria
14 2.93803318025042 OTU.257 Actinobacteria
30 2.86942150273819 OTU.670 Bacteroidetes
14 2.81037473623935 OTU.132 Actinobacteria
14 2.77683717725522 OTU.114 Proteobacteria
14 2.68548667026003 OTU.5 Proteobacteria
14 2.66270283135722 OTU.100 Proteobacteria
14 2.66089859996186 OTU.241 Verrucomicrobia
14 2.59432379571068 OTU.28 Proteobacteria
30 2.54121848827367 OTU.228 Proteobacteria
14 2.44380959872226 OTU.19 Proteobacteria
3 2.33834743342122 OTU.32 Proteobacteria
30 2.28018656226215 OTU.899 Proteobacteria
Raw
README.md

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.

Raw
index.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;
}
.x.axis text {
font-size: 18px;
font-style: italic;
}
.point {
fill-opacity: 0.50;
stroke-opacity: 1.0;
}
point.mouseover {
fill-opacity: 1.00;
}
.legend text {
font-family: sans-serif;
}
</style>
<svg class="chart"></svg>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="scatter.js"></script>
</body>
Raw
scatter.coffee
margin = {top: 50, bottom : 130, left : 100, right : 50}
width = 700 - margin.left - margin.right
height = 520 - 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 + ")"
type = (d) ->
d.log2FoldChange = +d.log2FoldChange
d
x = d3.scale.ordinal()
.rangeRoundPoints [0, width], 1
xAxis = d3.svg.axis()
.scale x
.orient "bottom"
.tickSize -height, 0, 0
y = d3.scale.linear()
.range [height, 0]
yAxis = d3.svg.axis()
.scale y
.orient "left"
.tickSize -width, 0, 0
.ticks 6
c = d3.scale.category10()
sign = () -> if Math.random() < 0.5 then -1 else 1
jitter = () -> sign() * Math.random() * 15
d3.csv("readme.csv", type, (data) ->
phyla = d3.nest data
.key (d) -> d.Rank2
.map data, d3.map
.keys()
x.domain phyla
xAx = chart
.append("g")
.attr "class", "x axis"
.attr "transform", "translate(0," + height + ")"
.call xAxis
xAx
.selectAll "text"
.attr "transform", "translate(-5,5)rotate(-55)"
.style "text-anchor", "end"
max = d3.max (row.log2FoldChange for row in data)
min = d3.min (row.log2FoldChange for row in data)
pad = max * 0.02
y.domain [min - pad, max + pad]
yAx = chart
.append("g")
.attr "class", "axis"
.attr "transform", "translate(0," + 0 + ")"
.call yAxis
yAx
.append "text"
.attr "transform", () -> "translate(" + -margin.left/2 + "," + height/2 + ")rotate(-90)"
.attr "text-anchor", "middle"
.html "log&#8322; fold change"
update = (data) ->
r = 7
points = chart.selectAll ".point"
.data data, (d) -> d.OTU
points.enter().append "circle"
.attr "class", "point"
.attr "cy", (d) -> y d.log2FoldChange
.attr "cx", (d) -> x(d.Rank2) + jitter()
.attr "r", (d) -> r
.attr "fill", (d) -> c d.Day
.attr "stroke", (d) -> c d.Day
.append "title"
.text (d) -> d.OTU
points
.on "mouseover", () ->
d3.select this
.attr "class", "mouseover"
.transition()
.duration 25
.attr "r", 10
undefined
.on "mouseout", () ->
d3.select this
.transition()
.duration 250
.attr "r", r
.attr "class", "point"
undefined
points.exit()
.remove()
undefined
days = d3.nest().key((d) -> d.Day).map(data, d3.map).keys()
console.log days
legend = chart
.selectAll ".legend"
.data days
.enter().append("g")
.attr "class", "legend"
.attr "transform", (d, i) -> "translate(" + width + "," + i*20 + ")"
legend
.append "circle"
.attr "fill", (d) -> c d
.attr "r", 7
legend
.append "text"
.attr "dx", -10
.attr "dy", 7.5
.text (d) -> "Day " + d
.style "text-anchor", "end"
update(data)
)
Raw
scatter.js
// Generated by CoffeeScript 1.8.0
var c, chart, height, jitter, margin, sign, type, width, x, xAxis, y, yAxis;
margin = {
top: 50,
bottom: 130,
left: 100,
right: 50
};
width = 700 - margin.left - margin.right;
height = 520 - 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 + ")");
type = function(d) {
d.log2FoldChange = +d.log2FoldChange;
return d;
};
x = d3.scale.ordinal().rangeRoundPoints([0, width], 1);
xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height, 0, 0);
y = d3.scale.linear().range([height, 0]);
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width, 0, 0).ticks(6);
c = d3.scale.category10();
sign = function() {
if (Math.random() < 0.5) {
return -1;
} else {
return 1;
}
};
jitter = function() {
return sign() * Math.random() * 15;
};
d3.csv("readme.csv", type, function(data) {
var days, legend, max, min, pad, phyla, row, update, xAx, yAx;
phyla = d3.nest(data).key(function(d) {
return d.Rank2;
}).map(data, d3.map).keys();
x.domain(phyla);
xAx = chart.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
xAx.selectAll("text").attr("transform", "translate(-5,5)rotate(-55)").style("text-anchor", "end");
max = d3.max((function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = data.length; _i < _len; _i++) {
row = data[_i];
_results.push(row.log2FoldChange);
}
return _results;
})());
min = d3.min((function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = data.length; _i < _len; _i++) {
row = data[_i];
_results.push(row.log2FoldChange);
}
return _results;
})());
pad = max * 0.02;
y.domain([min - pad, max + pad]);
yAx = chart.append("g").attr("class", "axis").attr("transform", "translate(0," + 0 + ")").call(yAxis);
yAx.append("text").attr("transform", function() {
return "translate(" + -margin.left / 2 + "," + height / 2 + ")rotate(-90)";
}).attr("text-anchor", "middle").html("log&#8322; fold change");
update = function(data) {
var points, r;
r = 7;
points = chart.selectAll(".point").data(data, function(d) {
return d.OTU;
});
points.enter().append("circle").attr("class", "point").attr("cy", function(d) {
return y(d.log2FoldChange);
}).attr("cx", function(d) {
return x(d.Rank2) + jitter();
}).attr("r", function(d) {
return r;
}).attr("fill", function(d) {
return c(d.Day);
}).attr("stroke", function(d) {
return c(d.Day);
}).append("title").text(function(d) {
return d.OTU;
});
points.on("mouseover", function() {
d3.select(this).attr("class", "mouseover").transition().duration(25).attr("r", 10);
return void 0;
}).on("mouseout", function() {
d3.select(this).transition().duration(250).attr("r", r).attr("class", "point");
return void 0;
});
points.exit().remove();
return void 0;
};
days = d3.nest().key(function(d) {
return d.Day;
}).map(data, d3.map).keys();
console.log(days);
legend = chart.selectAll(".legend").data(days).enter().append("g").attr("class", "legend").attr("transform", function(d, i) {
return "translate(" + width + "," + i * 20 + ")";
});
legend.append("circle").attr("fill", function(d) {
return c(d);
}).attr("r", 7);
legend.append("text").attr("dx", -10).attr("dy", 7.5).text(function(d) {
return "Day " + d;
}).style("text-anchor", "end");
return update(data);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment