Needleplot example

HTML

<link rel="stylesheet" href="https://rawgit.com/reimandlab/needleplot/master/style.css">
<script src="https://rawgit.com/reimandlab/needleplot/master/needleplot.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="needleplot"></div>

CSS

.phosphorylation rect, .phosphorylation path{
    fill: rgb(67, 162, 202)
  }

JavaScript

var needle_plot = new NeedlePlot({
    element: document.getElementById('needleplot'),
    legends: {y: 'Count of cancer-related mutations', x: 'Sequence of TP53'},
    sequence_length: 393,
    data: {
        mutations: [
            {pos: 157, alt: "F", value: 6},
            {pos: 234, alt: "C", value: 18},
            {pos: 273, alt: "H", value: 18},
            {pos: 282, alt: "W", value: 10}
        ],
        sites: []
    }
});