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'),
  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"}
    ]
  }
});