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({
		head_size: 10,
    mutations_color_map: {
      interesting: 'orange',
      important: 'red',
      none: 'grey',
    },
    data: {
        mutations: [
            {pos: 157, alt: "F", value: 6, category: 'interesting'},
            {pos: 234, alt: "C", value: 18, category: 'important'},
            {pos: 273, alt: "H", value: 18, category: 'none'},
            {pos: 282, alt: "W", value: 10} // category not provided
        ],
        sites: []
    },
    element: document.getElementById('needleplot'),
    sequence_length: 393
});