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({
    data: {
        mutations: [
            {ref: "R", pos: 282, alt: "W", value: 10, category: "network-rewiring"}
        ],
        sites: [
            {start: 142, end: 167, type: "acetylation", my_property: "some-value"},
        ]
    },
    needle_tooltip: new MinimalTooltip({
        render: function(mut){
           var name = mut.ref + mut.pos + mut.alt;
           return "My tooltip for mutation: <b>" +  name + "</b><br>" + mut.category;
        }
    }),
    site_tooltip: new MinimalTooltip({
        render: function(site){
           return "My tooltip for site: " + site.type +
           				"<br><i>" + site.my_property + "</i>";
        }
    }),
    element: document.getElementById('needleplot'),
    sequence_length: 393
});