app/scatterplot.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<!-- bower:js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/chosen/chosen.jquery.min.js"></script>
<script src="/bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="/bower_components/d3/d3.js"></script>
<script src="/bower_components/crossfilter/crossfilter.js"></script>
<script src="/bower_components/dcjs/dc.js"></script>
<script src="/bower_components/classie/classie.js"></script>
<script src="/bower_components/get-style-property/get-style-property.js"></script>
<script src="/bower_components/get-size/get-size.js"></script>
<script src="/bower_components/eventie/eventie.js"></script>
<script src="/bower_components/eventEmitter/EventEmitter.js"></script>
<script src="/bower_components/unipointer/unipointer.js"></script>
<script src="/bower_components/unidragger/unidragger.js"></script>
<script src="/bower_components/draggabilly/draggabilly.js"></script>
<script src="/bower_components/doc-ready/doc-ready.js"></script>
<script src="/bower_components/matches-selector/matches-selector.js"></script>
<script src="/bower_components/fizzy-ui-utils/utils.js"></script>
<script src="/bower_components/outlayer/item.js"></script>
<script src="/bower_components/outlayer/outlayer.js"></script>
<script src="/bower_components/packery/dist/packery.pkgd.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/ev-emitter/ev-emitter.js"></script>
<script src="/bower_components/imagesloaded/imagesloaded.js"></script>
<script src="/bower_components/qtip2/jquery.qtip.js"></script>
<script src="/bower_components/qtip2/basic/jquery.qtip.js"></script>
<script src="/bower_components/vue/dist/vue.js"></script>
<!-- endbower -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/chosen/chosen.min.css" />
<link rel="stylesheet" href="/bower_components/datatables/media/css/jquery.dataTables.css" />
<link rel="stylesheet" href="/bower_components/dcjs/dc.css" />
<link rel="stylesheet" href="/bower_components/qtip2/jquery.qtip.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="scripts/main.js"></script>
<script src="scripts/vueCore.js"></script>
<script src="scripts/controller/sessionEvent.js"></script>
<script src="scripts/controller/sessionUtil.js"></script>
<script src="scripts/views/components/vc/modalTemplate.js"></script>
<script src="scripts/views/components/vc/addVCPopup.js"></script>
<script src="scripts/model/sessionServices.js"></script>
<script src="scripts/views/components/vc/listModal.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>
</head>
<body>
<div id="scatter-container">
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<list-modal :show.sync="showList" :vclist="virtualCohorts" :sample="sampleID" :cancer-study-id="cancerStudyID"></list-modal>
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
iViz.session.URL = "http://loxcalhost:8080/api/sessions/";
iViz.vue.vmScatter.init();
$(document).on('click', '#button', function (e) {
var _vm =iViz.vue.vmScatter.getInstance();
_vm.sampleID = $(e.target).val();
_vm.cancerStudyID = 'ucec_tcga1';
_vm.showList = true;
});
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Test scatter plot'
},
xAxis: {
title: {
enabled: true,
text: 'Gene1 Z-score'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Gene2 Z-score'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},tooltip: {
useHTML: true,
hideDelay: 1000,
shared: false,
borderWidth: 2,
borderColor: '#e7f3fd',
shadow: true,
followTouchMove: true,
backgroundColor: '#fafcff',
formatter: function() {
var content = "<font size='2'>";
content += "mRNA: <strong>" + parseFloat(this.point.y).toFixed(3) + "</strong><br>";
content += "Case ID: <strong>" + this.point.name + "</strong><br>";
content = content + "</font>";
content = content+'<button id="button" value='+this.point.name+'>Add to cohort</button>';
return content;
}
} ,
series: [{
name: 'Samples',
color: 'rgba(223, 83, 83, .5)',
data: [{x: 1,y: 2,name: "TCGA-04-1367-011",color: "#00FF00"},
{x: 1.4,y: 2.4,name: "TCGA-04-1367-012",color: "#00FF00"},
{x: 2,y: 2.5,name: "TCGA-04-1367-013",color: "#00FF00"},
{x: 3,y: 2.9,name: "TCGA-04-1367-014",color: "#00FF00"},
{x: 3.5,y: 3.5,name: "TCGA-04-1367-015",color: "#00FF00"},
{x: 4.4,y: 4.9,name: "TCGA-04-1367-016",color: "#00FF00"},
{x: 1.2,y: 2,name: "TCGA-04-1367-017",color: "#00FF00"},
{x: 1.9,y: 2.1,name: "TCGA-04-1367-018",color: "#00FF00"},
{x: 2.02,y: 3.8,name: "TCGA-04-1367-019",color: "#00FF00"},
{x: 4,y: 1.1,name: "TCGA-04-1367-010",color: "#00FF00"},
{x: 4.1,y: 2.9,name: "TCGA-04-1367-0111",color: "#00FF00"},
{x: 5.2,y: 2.4,name: "TCGA-04-1367-0112",color: "#00FF00"},
{x: 4.9,y: 5.1,name: "TCGA-04-1367-0113",color: "#00FF00"},
{x: 5.1,y: 6.2,name: "TCGA-04-1367-0114",color: "#00FF00"},
{x: 6.1,y: 2.6,name: "TCGA-04-1367-0115",color: "#00FF00"},
{x: 2.8,y: 3.1,name: "TCGA-04-1367-0116",color: "#00FF00"},
{x: 1,y: 4.2,name: "TCGA-04-1367-0117",color: "#00FF00"},
{x: 3.8,y: 2.5,name: "TCGA-04-1367-0118",color: "#00FF00"}]
}]
});
});
</script>
</html>