NGLess-1.4.1: Html/nglessQC.html
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.1/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" />
<link href="ngless.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="perBaseQualScores.css" media="screen" />
<title>FastQ Quality Statistics</title>
<script src="output.js"></script>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">FastQ Quality Control</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div ng-app="fqStatsApp">
<div ng-controller="FQInfoCtrl">
<div id="table" align="center">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th> </th>
<th ng-repeat="fq in fqStats">{{fq.fileName}}</th>
</tr>
</thead>
<tbody>
<tr>
<td> %GC: </td>
<td ng-repeat="fq in fqStats">{{fq.gcContent*100. | number : 1}}%</td>
</tr>
<tr>
<td> Encoding: </td>
<td ng-repeat="fq in fqStats">{{fq.encoding}}</td>
</tr>
<tr>
<td> Number of Sequences: </td>
<td ng-repeat="fq in fqStats">{{fq.numSeqs}}</td>
</tr>
<tr>
<td> Sequence length: </td>
<td ng-repeat="fq in fqStats">{{fq.seqLength[0]}}–{{fq.seqLength[1]}}</td>
</tr>
<tr>
<td>Plot below</td>
<td ng-repeat="fq in fqStats"><button ng-click="doPlot($index);">Plot</button></td>
</tr>
</tbody>
</table>
</div>
<div id="offsetDiv">
<div class='with-3d-shadow with-transitions'>
<svg id="qualityPlot"></svg>
</div>
</div>
<script>
function convertData (data) {
var newData = [],
shapes = ['triangle-up', 'triangle-down'],
tag = ['mean', 'median', 'lowerQuartile', 'upperQuartile'];
for (var i = 0; i < tag.length; i++) {
newData.push({
key: tag[i],
values: []
});
for (var j = 0; j < data.length; j++) {
newData[i].values.push({
x: j,
y: data[j][tag[i]],
shape: shapes[i % 2]
});
}
}
return newData;
}
var chart = nv.models.lineChart()
.showYAxis(true)
.showXAxis(true)
.useVoronoi(false)
.color(d3.scale.category10().range())
.transitionDuration(300)
;
chart.xAxis.tickFormat(d3.format('1'));
chart.yAxis.tickFormat(d3.format('.02f'));
chart.tooltipContent(function(key) {
return '<h4>' + key + '</h4>';
});
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
var app = angular.module('fqStatsApp', []);
app.factory('fqStats', function() {
return output.fqStats;
});
function FQInfoCtrl($scope, fqStats){
$scope.fqStats = fqStats;
$scope.doPlot = function (index) {
d3.select('#qualityPlot')
.datum(convertData(fqStats[index].perBaseQ))
.call(chart);
}
}
</script>
</div>
</div>
</body>
</html>