g3-lollipop.js: visualize genetic mutations using an interactive lollipop diagram.
Read more at g3-lollipop.js or g3viz (R interface).
license: MIT | |
height: 520 | |
border: yes |
g3-lollipop.js: visualize genetic mutations using an interactive lollipop diagram.
Read more at g3-lollipop.js or g3viz (R interface).
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.css"> | |
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/css/gist.css"> | |
</head> | |
<body> | |
<div> | |
<div> | |
<span class="btn-group"> | |
<button id="save-as-png">save as PNG</button> | |
<button id="save-as-svg">save as SVG</button> | |
</span> | |
</div> | |
<div id="lollipop"></div> | |
</div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/data/CCLE_APC.js"></script> | |
<script> | |
// new lollipop chart | |
var lollipop = g3.Lollipop("lollipop"); | |
// add data | |
lollipop.data.snvData = mutationData; | |
lollipop.data.domainData = domainData; | |
// add data options | |
lollipop.format.snvData = mutationDataFormat; | |
lollipop.format.domainData = domainDataFormat; | |
// add chart options | |
lollipop.setOptions(plotOptions); | |
// draw | |
lollipop.draw(); | |
// get chart div id | |
var chartID = lollipop.options.chartID; | |
// set default filename | |
var output_chart_filename = "lollipop"; | |
// button actions: download chart | |
document.getElementById("save-as-png").onclick = function (e) { | |
g3.output().toPNG(output_chart_filename, chartID); | |
}; | |
document.getElementById("save-as-svg").onclick = function (e) { | |
g3.output().toSVG(output_chart_filename, chartID); | |
}; | |
</script> | |
</body> | |
</html> |