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)
  }
 .acetylation rect, .acetylation path{
    fill: #bae4bc
  }

JavaScript

var needle_plot = new NeedlePlot({
    data: {
        mutations: [
            {pos: 157, alt: "F", value: 6},
        ],
        sites: [
            {start: 142, end: 167, type: "phosphorylation"},
            {start: 262, end: 276, type: "acetylation"}
        ]
    },
    element: document.getElementById('needleplot'),
    sequence_length: 393
});