Needleplot

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.

Quick start

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.