A needleplot for mutation data, used by ActiveDriverDB. The visualisation is built with d3.js library.
Inspired and partially compatibile with bbglab/muts-needle-plot.
Please click here for an online demo. For more examples, please see examples page in documentation.
Include required files:
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="needleplot.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">Add custom styling:
<style>
.phosphorylation rect, .phosphorylation path{
fill: rgb(67, 162, 202)
}
</style>Create a wrapper element:
<div id="needleplot"></div>Initialise the needleplot and provide your data:
<script>
var needle_plot = NeedlePlot({
element: document.getElementById('needleplot'),
sequence_length: 393,
mutations_color_map: {
proximal: 'orange',
none: 'grey',
distal: 'yellow',
'network-rewiring': 'red'
},
data: {
mutations: [
{ref: "V", pos: 157, alt: "F", value: 6, category: "proximal"},
{ref: "Y", pos: 234, alt: "C", value: 18, category: "none"},
{ref: "R", pos: 273, alt: "H", value: 18, category: "distal"},
{ref: "R", pos: 282, alt: "W", value: 10, category: "network-rewiring"}
],
sites: [
{start: 142, end: 167, type: "phosphorylation"},
{start: 262, end: 276, type: "phosphorylation"}
]
}
});
</script>Please see the above example running online.